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

   Filename: mill.css
*/
   



/* Main Styles */
   html {
    background-color:rgb(50, 44, 41);
    font-family: Verdana, Geneva, sans-serif;
    height: 100%;
    
   }
 
   body {
    min-height: 100%;  
    margin: 0px auto;
    min-width: 320px;
    max-width: 2000px;
    width: 100%;
   }

   #backgroundImage{
      width:100%;
      position: absolute;
      z-index:-1;
      max-width: 2000px;
   }

   header img#logoimg, #tablePic, #tableBottomPic, #arrows, iframe#recentVidBT, 
   #tvPic, div#insideTv, #stereoPic, footer img{
      display:-webkit-flex;
      display:flex;
   }

   header img#logoimg, #tablePic, #tableBottomPic, #arrows, #tvPic, 
   #spotifyWrapper, #stereoPic, footer img, div#line{
      margin-right: auto;
      margin-left: auto;
   }

   #backgroundImage, #membersLink, #membersLinkImg, #bonusContent, #table,
   #tablePic, #tableBottom, #tableBottomPic, #youtubeInstructions, #up, #tv,
   div#insideTv, #overlay, #stereo, #insideStereo{
      position: absolute;
   }
   
   header, #arrows, #down, #tvPic, div#youtube, #spotifyWrapper, #stereoPic, footer img{
      position: relative;
   }

   #tv, #table, #insideTv, #stereo, #insideStereo, #tableBottom, #arrows{
      max-width:2000px;
   }

   /* Max Width Styles */
   @media only screen and (min-width: 2000px) {
      /*TV and Youtube Max Width Styles */
      #arrows{
         top:-665px;
         width:2000px;
      }
      #up{
         right:155px;
      }
      #down{
         right:155px;
         top:225px;
      }
      #tv{
         margin-top:980px;
      }
      #insideTv{
         margin-top:1130px;
         margin-left:240px;
      }
      #recentVidBT{
         margin-top:70px;
      }
      #youtubeInstructions{
         width: 300px;
         margin-left:1540px;
         margin-top:-1100px;
  
      }
      #youtubeInst{
         font-size:20px;
      }
      /*Spotify and Stereo Max Width Styles */
      #stereo{
         margin-top:2520px;
      }
      #insideStereo{
         margin-top: 2370px;
      }

      #spotifyWrapper{
         margin-top: 150px;
      }

      #spotifyBanner{
         width: 200px;
      }

      #Spotifylink{
         position:absolute;
         margin-left:1440px;
         margin-top: -250px;
      }
      #stereoPic{
         margin-top:-210px;
      }

      /*Body Max Width Styles*/

      #table{
         margin-top:2275px;
         height:10px !important;
      }
      #tablePic{
         height:1360px !important;
         margin-top:-190px;
      }

      #tableBottom{
         margin-top:3485px;
         height: 10px!important;
      }
     
      #tableBottomPic{
         margin-top:-1440px;
         height:1400px!important;
      }
      
      /*Footer Max Width Styles*/

      footer address{
         margin-top:10px;
      }

      footer{
         margin-top:3300px;
      }
      
      #line{
         margin-top:-3300px;
      }

      /*Title Max width Styles*/
      #bonusContentimg{
         margin-top:225px;
         margin-left:200px;
         max-width: 390px;
      }

   }

   @media only screen and (max-width: 1999px) {
      /*TV and Youtube Max Width Styles */
      #arrows{
         top:-32.5vw;
      }
      #up{
         right:8vw;
         top:11vw;
      }
      #down{
         top:11vw;
         right:8vw;
      }
      #tv{
         margin-top:50vw;
      }
      #insideTv{
         margin-top:57vw;
         margin-left:12.2vw;
      }
      #recentVidBT{
         margin-top:5vw;
      }
      #youtubeInstructions{
         width: 13vw;
         margin-left:77vw;
         margin-top:-55.5vw;
      }
      /*Spotify and Stereo Max Width Styles */
      #stereoPic{
         margin-top:-11.25vw;
      }
      
      #Spotifylink{
         position:absolute;
         margin-left:71.5vw;
         margin-top: -13vw;
      }
      #stereo{
         margin-top:126vw;
      }
      #spotifyBanner{
         width: 10vw;
      }
      #insideStereo{
         margin-top: 120vw;
      }
      #spotifyWrapper{
         margin-top:6vw;
      }
      /*Body Max Width Styles*/
      #table{
         margin-top:113vw;
      }
      
      #tableBottom{
         margin-top:173.5vw;
         height:10px;
      }
     
      #tableBottomPic{
         margin-top:-71vw;
      }
     
      #tablePic{
         height: 70vw;
         margin-top:-10vw;
      }
      /*Footer Max Width Styles*/
      footer address{
         margin-top: 1vw;
      }

      footer{
         margin-top:170vw;
      }

      #line{
         margin-top: -170vw;
      }
      /*Title Max width Styles*/
      #bonusContentimg{
      
         width:20%;
         margin-top:11%;
         margin-left:9%;
         max-width: 595px;
      }

   }


/* Header and Nav Styles */
   #membersLink{
      margin-top: -50px;
      margin-left: 3vw;
      z-index:10;
   }

   #membersLinkImg{
      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;
   }

/* Title Styles */
   #bonusContent{
      width:100%;
   }

   #bonusLink{
      height:100%;
      -webkit-filter:opacity(.4);
      filter:opacity(.4);
      transition:filter 0.5s;
   }

   #bonusLink:hover{
      -webkit-filter:opacity(1);
      filter:opacity(1);
   }

   header{
      z-index:1;
   }


   header img#logoimg {
      width: 100%;
   }

   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-family:monospace, Andale Mono, monospace;
      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;
      -moz-border-radius: 40px;
      -webkit-border-radius: 40px;
      border-radius: 40px;
      border-width: 2px;
      border-color: rgb(48, 48, 48,0);
      border-style: solid;
   }

/* Body Styles */

   
   #table{
      pointer-events: none;
      z-index:4;
      width:100%;
      height:10px;
   } 

   #tablePic{
      width: 100%;
      pointer-events: none;
   }

   #tableBottom{
      pointer-events: none;
      z-index:-1;
      width:100%;
      height:10px;
   }

   #tableBottomPic{
      width: 100%;
      pointer-events: none;

      height: 70vw;
   }


/* Youtube and TV Styles */

   #arrows{
      width:100%;
      height:100%;
      z-index:3;
   }


   #youtubeInst{
      text-align:center;
      color:rgba(172, 161, 153, 0.863);
      z-index:100;
      -webkit-filter: drop-shadow(10px 8px rgb(0, 0, 0));
      filter: drop-shadow(10px 8px rgb(0, 0, 0));
      font-family:Georgia, 'Times New Roman', Times, serif;
      font-size: min(2.5vw, 45px);
      font-weight: 1000;
   }

   #up{
      pointer-events: all;
      -webkit-filter: brightness(.5);
      filter:brightness(.5);
      margin-left:auto;
      width:10%;
      height:10vw;
      top:1vw;
      max-width:200px;
      max-height:200px;
   }

   div.ytlinkBT{

      max-width:1200px;
      max-height:800px;
   }

   #down{
      pointer-events: all;
      -webkit-filter:brightness(.5);
      filter:brightness(.5);
      margin-left:auto;
      width:10%;
      height:10vw;
      max-width:200px;
      max-height:200px;
   }

   #up:hover {
      -webkit-filter: brightness(90%);
      filter: brightness(90%);
   }

   #down:hover {
      -webkit-filter: brightness(90%);
      filter: brightness(90%);
   }

   iframe#recentVidBT{
      float:left;
      margin-left: 0;
      margin-right: auto;
      width: 59vw;
      height: 33vw;
      max-width: 1200px;
      max-height: 720px;
   }

   div#tv{
      pointer-events: none;
      z-index:3;
      width:100%;
      height:10px;
   }

   #tvPic{
      -webkit-filter:brightness(.3);
      filter:brightness(.3);
      width: 90%;
      pointer-events: none;
   }

   div#insideTv{
      background-color:black;
      width:65%;
      width:60%;
      height:45vw;
      max-width:1200px;
      max-height:900px;
   }


   div#youtube{
      height:100%;
      max-height:800px;
   }
   
   #overlay{
      -webkit-filter:opacity(0.8) contrast(0.7);
      filter:opacity(.8) contrast(.7);
      height:90%;
      float:left;
      margin-left: 1px;
      margin-right: auto;
      width: 65vw;
      height: 45vw;
      -moz-border-radius: 30px;
      -webkit-border-radius: 30px;
      border-radius: 30px;
      border-style: solid;
      color: black;
      border-width:1px;
      z-index:1;
      pointer-events:none;
      max-width:1200px;
      max-height:900px;
      
   }

/* Stereo and Spotify Styles */
   #spotifyBanner{
      -moz-border-radius:30px;
      -webkit-border-radius:30px;
      border-radius:30px;
      z-index:200;
   }

   #Spotifylink{
      pointer-events: all;
      -webkit-filter:opacity(.1) brightness(1.2);
      filter:opacity(.1) brightness(1.2);
      z-index:200;
   }

   #Spotifylink:hover{
      -webkit-filter:opacity(.7) brightness(.8);
      filter:opacity(.7) brightness(.8);

   }

   #spotifyWrapper{
      width:42%;
      height: 20vw;
      z-index:1;
      background-color:rgb(36, 36, 36);
      max-height:400px;
   }

   #spotify{
      margin-left: 2vw;
      height:20vw;
      width:38vw;
      max-height: 400px;
      max-width: 760px;
   }

   #stereo{
      pointer-events: none;
      z-index:2;
      width:100%;
      height:10px;
      margin-left:1vw;
   }

   #stereoPic{
      -webkit-filter: brightness(.6);
      filter: brightness(.6);
      width: 95%;
      pointer-events: none;
      height:40vw;
      width: 70vw;
      max-width:1400px;
      max-height:800px;
   }

   #insideStereo{
      height:10px;
      width:100%;
   }

/* Footer Styles */

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

   footer address {
      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#line{
      width: 70%;
      -moz-border-radius:0px;
      -webkit-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) {
      
      #membersButton{
         display:none;
      }

      a#navicon img{
         height: 15vw;
      }

      #header{
         height: 150px;
      }

      a#navicon {
         display: block;
         margin-left: 10px;
      }

      #youtubeInstructions{
         width: 13vw;
         margin-left:78vw;
         margin-top:-55.5vw;
  
      }

      #youtubeInst{
         -webkit-filter: drop-shadow(5px 5px rgb(0, 0, 0));
         filter: drop-shadow(5px 5px rgb(0, 0, 0));
      }
     
      
      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%;
      }
   
      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:-14vw;
         margin-bottom: 20vw;
      }
      
      #backgroundImage{
         margin-top: 20vw;
      }

      section img{
         display:block;
         width:50%;
         margin:auto;
      }
}
 
/* 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;
      }

}