@import url("/css/variables.css");

@font-face {
      font-family: "Lexend";
      src: url('/assets/fonts/Lexend.ttf');
   }

  
  body {
    background-color: var(--bgColor);
    background-image: var(--bgImage);
    background-size: var(--bgImageSize);
    color: var(--paragraphText);
    margin: 0;
  }
  
  
  * {
   box-sizing: border-box;  
   font-family: "Lexend", "Courier", sans-serif;
  }
  
  
  #container {
    max-width: var(--containerWidth);
    margin: 0 auto;
  }
  
  /* links besides top bar */
  #container a {
    color: var(--linkText);
    font-weight: bold;
  }
  
  #navigation {
     height: var(--navHeight);
     background-color: var(--navBgColor);
     width: var(--navWidth);
     border: var(--navBorderWidth) var(--navBorderStyle) var(--navBorderColor);
  }
  
  #navigation ul {
     display: flex;
     padding: 0;
     margin: 0;
     list-style-type: none;
     justify-content: space-evenly;
  }
  
  #navigation li {
    padding-top: var(--navListPadding); 
  }
  
  
  #navigation li a {
    color: var(--navLinkColor);
    font-weight: var(--navFontWeight);
    text-decoration: none;
  }
  
  #navigation li a:hover {
    color: var(--navLinkHoverColor);
    text-decoration: underline;
  }

  
  main {
   background-color: var(--mainBGColor);
   flex: 1;
   padding: var(--mainPadding);
   margin-top: var(--mainMargin);
   margin-bottom: var(--mainMargin);
   border: var(--mainBorderWidth) var(--mainBorderStyle) var(--mainBorderColor);
  }
  
  footer {
    background-color: var(--footerBgColor);
    width: var(--footerWidth);
    height: var(--footerHeight);
    padding: var(--footerPadding);
    margin-bottom: var(--footerMargin);
    text-align: center;
  }
  
  .banner {
    width: 90%;
    margin-top:10px;
  }
  
  .box1 {
    /* background-color: var(--boxBgColor); 
    border: var(--boxBorderWidth) var(--boxBorderStyle) var(--boxBorderColor); */
    display: flex;
    align-items: start;
  }
  
  .boxtext {
   padding: 0px;
  }
  
  .box1 > .boxtext {
   margin-left: 1em; 
  }
  
  .box2 {
    background-color: var(--boxBgColor);
    padding: 10px;
    border: var(--boxBorderWidth) var(--boxBorderStyle) var(--boxBorderColor);
    color: var(--boxTextColor);
  }
  
  .homeimage {
     max-width: var(--homeImageWidth);
     padding: 0px;
     margin-top: 30px;
  }
  
  .imggrid {
      padding: var(--gridPadding);
      max-width: var(--gridSizeAcross);
  }
  
  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 var(--gridObjectPadding);
  }
  
  .column {
    flex: var(--gridColAmt);
    max-width: var(--gridColAmt);
    padding: 0 var(--gridObjectPadding);
  }
  
  .column img {
    margin-top: var(--gridImgMargin);
    margin-bottom: var(--gridImgMargin);
    vertical-align: middle;
    width: 95%;
  }
  
  .column img:hover {
    margin-top: var(--gridImgMarginHover);
    margin-bottom: var(--gridImgMarginHover);
    width: 100%;
  }
  
  hr {
    color: var(--horizontalruleColor);
    border-color: var(--horizontalruleColor);
    background-color: var(--horizontalruleColor);
    border-width: var(--horizontalruleWidth);
    border-style: var(--horizontalruleStyle);
  }
  
  
  @media only screen and (max-width: 1200px) {
      #container {
        max-width: 90%;
        min-width: 800px;
      }
      
      .column {
       flex: 50%;
       max-width: 100%;
      }
  }
  
  @media only screen and (max-width: 800px) {
    
    #container {
        max-width: 800px;
        min-width: 100%;
      }
      
      main {
        border: none;
        margin-top: var(--mainMarginMobile);
        margin-bottom: var(--mainMarginMobile);
      }
      
      footer {
        height: var(--footerHeightMobile);
        margin-top: var(--footerMarginMobile);
        margin-bottom: 0px;
      }
      
      .banner {
       width: 95%;
       margin-top: 10px;
       margin: -10px;
      }
      
      .homeimage {
      max-width: var(--homeImageWidthMobile);
      margin: auto;
      order: 2;
      }
      
      .box1 {
        flex-wrap: wrap;
      }
      
      .boxtext {
         order: 1;
      }
      
      .column {
       flex: var(--gridColAmtMobile);
       max-width: 100%;
      }
      
      
      #navigation {
        height: var(--navMobileHeight);
        padding-bottom: 10px;
      }
      
      #navigation li a {
        font-weight: var(--navFontWeightMobile);
      }
      
      #navigation ul {
        flex-wrap: wrap;
      }
       
  }