/*
   COMP 2681 Assignment 2
   Author: Blain Polishak
   Date:   1/18/2024

   Filename: mill.css
*/
   



/* Main Styles */
 
   .line, header img#logoimg, footer img, section div#images{
   display: -webkit-flex;
   display: flex;
   }

   header img#logoimg, #MerchDoron, #MerchBadTakes, .merchdiv img, .backcanvas, footer img, div#bottomLine{
      margin-right: auto;
      margin-left:auto;
   } 

   header nav ul li, h2#DMTitle, h2#merchTitle, h1#Title, h2#subTitle, .merchdiv h2, footer{
      font-family: monospace, Andale Mono, monospace;
   } 


   html {
    background-color: rgb(53, 53, 53);
    font-family: Verdana, Geneva, sans-serif;
    height: 100%;
   }
 
   body {
    min-height: 100%;  
    margin: 0px auto;
    min-width: 320px;
    max-width: 2000px;
    width: 100%;
   }

/* Header and Nav Styles */
   header nav{
      padding-top: 10px;
   }

   header nav ul {
      list-style:none;
      padding-left: 1px;
      padding-right: 1px;
      white-space: nowrap;
      margin-left:0px;
      margin-right:0px;
      margin-top: 0px;
   }

   header nav ul li {
      font-size:1em; 
      line-height: 2em; 
      height: 2em;
      width: 14%;
      padding-left:2px;
      padding-right:2px;
      font-weight: 750;
      
   }

   header nav ul li a {
      color: rgb(255, 255, 255);
      display: block;
      width: 100%;
      text-align:center;
      text-decoration: none;
      background-color: transparent;
   }

   header nav ul li a:hover {
      color: rgb(255, 207, 238);
      text-decoration:overline;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      border-radius: 40px;
      border-width: 2px;
      border-color: rgb(48, 48, 48,0);
      border-style: solid;
   }

   #membersLink{
      position:absolute;
      margin-top: -50px;
      margin-left: 3vw;
      z-index:10;
   }

   #membersLinkImg{
      position:absolute;
      margin-top: 0;
      margin-left: 0;
      height:3vw;
      width:3vw;
      max-height: 35px;
      max-width:40px;
      -webkit-filter: contrast(0) brightness(10);
      filter: contrast(0) brightness(10);
      transition: .6s filter;
   }

   #membersLinkImg:hover{
      transition: filter .1s;
      -webkit-filter: contrast(1) brightness(.8);
      filter: contrast(1) brightness(.8);
   }

   #crossReferencePage{
      float:right;
      margin-right: 0.1vw;
      width:5%;
      position:absolute;
      top:0;
      right:0;
      font-size: min(1vw,15px);
      text-align:center;
      z-index:20;
   }

   #crossReference{
      color:red;
      pointer-events:all;
      text-decoration:none;
   }

   header{
      position:relative;
      z-index:1;
   }


   header img#logoimg {
      width: 100%;
   }

/* Title Styles */
   h2#DMTitle{
      position:relative;
      max-width: 2000px;
      width:100%;
      height:100%;
      text-align: center;
      color:rgb(240, 217, 238);
      font-size: 6vw;
      margin-top: 140px;
      font-weight:1;
   }

   h2#merchTitle{
      max-width: 2000px;
      width:100%;
      height:100%;
      text-align: center;
      color:rgb(240, 217, 238);
      font-size: 6vw;
      margin-top:140px;
      font-weight:1;
   }

   h1#Title{
      max-width: 2000px;
      width:100%;
      height:100%;
      text-align: center;
      color:rgb(255, 255, 255);
      font-size: 7vw;
   }

   h2#subTitle{
      max-width: 2000px;
      width:100%;
      height:100%;
      text-align: center;
      color:rgba(255, 255, 255, 0.493);
      font-size: 2vw;
      margin-top:-2vw;
   }

/* Merchandise Styles */

   #MerchDoron{
      position:relative;
      width:95%;
   }

   #MerchBadTakes{
      position:relative;
      width:95%;
   }

   .line{
      height:100%;
      width:100%;
      margin-top: 100px;
   }

   #merch1{
      margin-right:3.3333%;
   }

   #merch3{
      margin-left:3.3333%;
   }

   .merchdiv img{
      display:block;
      width:90%;
      margin-bottom:-90%;
      border-style:solid;
      -webkit-border-radius: 35px;
      -moz-border-radius: 35px;
      border-radius:35px;
      border-width:0px;
      -moz-box-shadow: 0px 10px 5px rgba(0,0,0,0.3);
      -webkit-box-shadow: 0px 10px 5px rgba(0,0,0,0.3);
      box-shadow:0px 10px 5px rgba(0,0,0,0.3);
   }
  
   .backcanvas{
      -webkit-filter: opacity(0);
      filter: opacity(0);
      display:block;
      transition:filter 0.25s;
   }

   .backcanvas:hover{
      -webkit-filter: opacity(1);
      filter: opacity(1);
   }

   .backcanvas:not(:hover){
      -webkit-filter: opacity(0);
      filter: opacity(0);
   }

   section#MerchBadTakes a[target], section#MerchDoron a[target]{
      display:block;
      width: 100%;
      height:25.4vw;
      max-height: 513px;
      background-color:rgba(250, 196, 255, 0.151);
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius:50px;
   }

   section#MerchBadTakes .merchdiv:last-of-type a, section#MerchDoron .merchdiv:last-of-type a{
      background-color: rgb(166, 150, 117);
   }

   section#MerchBadTakes .merchdiv:first-of-type a, section#MerchDoron .merchdiv:first-of-type a{
      background-color: rgba(100,100,100);
   }

   .merchdiv{
      width:30%;
      border-style:solid;
      -webkit-border-radius: 35px;
      -moz-border-radius: 35px;
      border-radius:35px;
      border-width:0px;
      border-color:white;
   }

   .merchdiv h2{
      color:white;
      text-align:center;
   }


/* Footer Styles */

   footer img{
      max-width:1600px;
      position:relative;
      width:60%;
      max-height:150px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius:30px;
      color:transparent;
      opacity: 70%;
      background-color: rgb(1,1,1,.5);
   }
   
   footer {
      margin-top:5em;
      text-align:center;
      font-size: 1em;
      padding-bottom: 1em;
      color:rgb(255, 255, 255);
   }

   footer address {
      margin-top: 10px;
      font-style: normal;
      font-size: min(1vw, 20px);
   }

   footer p#Update{
      margin-top: 10px;
      font-style: normal;
      font-size: min(.8vw, 15px);
      color: rgb(165, 165, 165);
   }
      
   div#bottomLine{
      margin-top:-80px;
      width: 70%;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius:0px;
      border-style:solid;
      border-width:3px;
      border-color:rgb(109, 90, 105);
   }


/* Mobile Styles */
 
   @media only screen and (max-width: 640px) {
      
      a#navicon {
         display: block;
         margin-left: 10px;
      }

      a#navicon img{
         height: 15vw;
      }

      #membersLinkImg{
         display: none !important;
      }
      
      header nav ul {
         display: none;
         width: 80% !important;
         margin-left:15%;
      }
      
      header nav ul li {
         font-size: 1.5em;
         line-height: 2em;
         height: 3em;
         padding: 2px;
         margin-left:auto;
         margin-right:auto;
         width: 35%;
      }

      footer address{
         font-size: 2vw !important;
      }
   
      a#navicon:hover+ul, header nav ul:hover {
         display: flex;
         display: -webkit-flex;
         flex-flow: row wrap;
         -webkit-flex-flow: row wrap;
         width: 100%;
         font-size: .5em;
         margin-top:-10vw;
      }
      
     
}
 
/* Desktop Styles */
 
   @media only screen and (min-width: 641px) {
   
      body header nav ul {
         display: -webkit-flex;
         display: flex;
         -webkit-flex-flow: row nowrap;
         flex-flow: row nowrap;
         -moz-justify-content: center;
         -webkit-justify-content: center;
         justify-content: center;
      }
      
      body header nav ul li {
         -webkit-flex: 0 1 auto;
         flex: 0 1 auto;
      }

      a#navicon{
         display:none;
      }
}