:root {
/*-------------------------------------------------------------------------- Page Colors */
        --BackgroundColor: rgb(240, 240, 235);
        --ContentBackgroundColor: rgb(230, 230, 225);
        --ContentBackgroundGradient: linear-gradient(0deg,rgba(230, 230, 225, 1) 0%, rgba(240, 240, 235, 1) 100%);
        --ContentBorderColor: rgb(220, 220, 215);
        --TextColor: rgba(0, 0, 0, 1);
        --TextLinkColor: rgba(0, 0, 0, 1);
        --TextLinkHoverColor: rgba(0, 0, 70, 1);
        --TextLinkVisitedColor:  rgba(35, 35, 70, 1);
        --TextLinkActiveColor: rgba(255, 255, 255, 1);
 /*-------------------------------------------------------------------------- Fonts */
        --TitleSize: 5.2rem;
        --SubtitleSize: 1.05rem;
        --SectionHeadingSize: 3rem;

    }

    @font-face {
        font-family:"Barlow Condensed";
        src:
          local("BarlowCondensed-Regular"),
          url("fonts/BarlowCondensed-Regular.ttf") format("Truetype");
          font-weight: normal;
          font-style: normal;
          font-display:swap;
      }
      
      @font-face {
        font-family:"Barlow Condensed";
        src:
          local("BarlowCondensed-Italic"),
          url("fonts/BarlowCondensed-Italic.ttf") format("Truetype");
          font-weight: normal;
          font-style: italic;
          font-display:swap;
      }
      
      @font-face {
        font-family:"Barlow Condensed";
        src:
          local("BarlowCondensed-SemiBold"),
          url("fonts/BarlowCondensed-SemiBold.ttf") format("Truetype");
          font-weight: bold;
          font-style: normal;
          font-display:swap;
      }
      
      @font-face {
        font-family:"Barlow Condensed";
        src:
          local("BarlowCondensed-SemiBoldItalic"),
          url("fonts/BarlowCondensed-SemiBoldItalic.ttf") format("Truetype");
          font-weight: bold;
          font-style: italic;
          font-display:swap;
      }
      
      @font-face {
        font-family:"Bebas Neue";
        src:
          local("BebasNeue-Regular"),
          url("fonts/BebasNeue-Regular.ttf") format("Truetype");
          font-weight: normal;
          font-style: normal;
          font-display:swap;
      }

/*-------------------------------------------------------------------------- Responsive Styling */

  * {
    box-sizing: border-box;
}

body {
    padding-left: 6vw;
    padding-right: 6vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    background-color: var(--BackgroundColor);
    color: var(--TextColor);
    font-family:'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 62.5%;
}

.container {
    display: grid;
    grid-template-columns: auto;
    row-gap: 2rem;
    column-gap: 1rem;
    margin-bottom: 5rem;
    font-size: 1.2rem;
}

.title {
    grid-area: span 4;
    font-family:'Bebas Neue', 'Tahoma', sans-serif;
    font-size: 4.5rem;
    text-align: center;
    vertical-align: top;
    padding: 0;
    height: 4rem;
    margin-bottom: .3rem;
}

.subtitle {
    grid-area: span 4;
    font-size: var(--SubtitleSize);
    text-align: center;
    vertical-align: top;
    padding: 0;
    height: 1rem;
    margin-bottom: 2rem;
}

.sectionheading {
    grid-area: span 4;
    font-family:'Bebas Neue', 'Tahoma', sans-serif;
    font-size: var(--SectionHeadingSize);
    font-weight: bold;
    text-align: left;
    vertical-align: bottom;
    padding: 0;
    height: 2.8rem;
    margin-bottom: 1rem;
    border-bottom-style: solid;
    border-bottom-color: var(--TextColor);
    border-bottom-width: 0.2rem;
}


.container .content {
    background-color: var(--ContentBackgroundColor);
    background: var(--ContentBackgroundGradient);
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0;
    padding-bottom: 0.5rem;
    border-radius: 2.5rem;
    border-bottom-style: dotted;
    border-right-style: dotted;
    border-bottom-width: 0.2rem;
    border-right-width: 0.2rem;
    border-right-color: var(--ContentBorderColor);
    border-bottom-color: var(--ContentBorderColor);
    /*min-height: 25rem;*/
    min-height: 30rem;
    font-size: .2rem;
    position: relative;
}

.container .blueskyaddress {
    background-image: url('media/blueskylogo.png');
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    font-size: 1rem;
    width: 100%;
    bottom: 0;
    text-align: center;
    line-height: 2rem;
    height: 32px;
    margin-left:-2rem;
}

.container .redtext {
    position: relative;
    font-size: 1rem;
    text-align: center;
    color: rgba(200,0,0,1);
    margin-top: 1rem;
}



.footer {
    grid-area: span 4;
    background-color: var(--ContentBackgroundColor);
    padding: 1rem;
    padding-left: 2rem;
    border-radius: 2.5rem;
    border-bottom-style: dotted;
    border-right-style: dotted;
    border-bottom-width: 0.2rem;
    border-right-width: 0.2rem;
    border-right-color: var(--ContentBorderColor);
    border-bottom-color: var(--ContentBorderColor);
    font-size: 1.2rem;
    line-height: 1.2rem;
    vertical-align: middle;
    height: auto;
}

h3 {
    font-size: +2rem;
}

h3.feed-title {
    text-align: center;
    font-weight: bold;
   }
   
h3.feed-title a:link {
    color: rgba(0, 0, 0, 1);
    text-decoration:none;
}
   
h3.feed-title a:visited {
    color: rgba(0, 0, 0, 1);
}
   
   
h3.feed-title a:hover {
    text-decoration: underline;
}
   
h4.feed-item-title {
    font-size: 1.2rem;
    font-weight: bold;
}
   
h4.feed-item-title a:link {
    text-decoration: none;
}
   
h4.feed-item-title a:visited {
    color: rgb(150, 150, 145);
    text-decoration:none;
}
   
p.feed-item-desc {
    font-size: 1.2rem;
}

@media only screen and (min-width:800px) {
    .container {
    grid-template-columns: auto auto;
    }

    .title {
        grid-area: span 4;
        font-family:'Bebas Neue', 'Tahoma', sans-serif;
        font-size: var(--TitleSize);
        text-align: center;
        padding: 0;
        line-height: 3.2rem;
        height: 3.2rem;
        margin-bottom: .3rem;
    }
}

@media only screen and (min-width: 1200px) {
    .container {
        grid-template-columns: auto auto auto auto;
    }   
    
    .title {
        grid-area: span 4;
        font-family:'Bebas Neue', 'Tahoma', sans-serif;
        font-size: var(--TitleSize);
        text-align: center;
        padding: 0;
        line-height: 3.2rem;
        height: 3.2rem;
        margin-bottom: .3rem;
    }
}

@media (prefers-color-scheme: dark) {
  body {
    color: rgba(200,200,200,1);
    background: rgba(26,26,30,1);
  }
  .container .content {
    background-color: rgba(26,26,26,1);
    background: linear-gradient(180deg,rgba(26, 26, 26, 1) 0%, rgba(46, 46, 46, 1) 100%);
    border-right-color: rgba(60,60,60,1);
    border-bottom-color: rgba(60,60,60,1);
  }

  .sectionheading {
    border-bottom-color: rgba(150,150,150,1);
    border-bottom-width: 0.1rem;
  }

h3.feed-title a:link{
    color: rgb(255, 255, 255);
    text-shadow: 
        -1px -1px 8px rgba(0, 85, 145, 1),
        -1px 1px 8px  rgba(0, 85, 145, 1),
        1px 1px 8px rgba(0, 85, 145, 1),
        1px -1px 8px rgba(0, 85, 145, 1);
    text-decoration:none;
}
   
h3.feed-title a:visited{
       color: rgb(255, 255, 255);
    text-decoration:none;
}

h4.feed-item-title a:link {
    color: rgb(27, 142, 224)
}

.footer {
    background-color: rgba(26,26,26,1);
    background: linear-gradient(180deg,rgba(26, 26, 26, 1) 0%, rgba(46, 46, 46, 1) 100%);
    border-right-color: rgba(60,60,60,1);
    border-bottom-color: rgba(60,60,60,1);
}

.footer a{
color: rgb(27, 142, 224)
}


.container .redtext {
    position: relative;
    font-size: 1rem;
    text-align: center;
    color: rgba(200,50,50,1);
    margin-top: 1rem;
    vertical-align: middle;
    text-shadow: 
        -1px -1px 1px rgb(0, 0, 0),
        -1px 1px 1px  rgb(0, 0, 0),
        1px 1px 1px rgb(0, 0, 0),
        1px -1px 1px rgb(0, 0, 0);
}


}

.container .blueskyaddress a{
    color: white;
    text-shadow: 
        -1px -1px 1px rgba(0,0,0,0.5),
        -1px 1px 1px rgba(0,0,0,0.5),
        1px 1px 1px rgba(0,0,0,0.5),
        1px -1px 1px rgba(0,0,0,0.5);
        text-decoration:none;
}