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

   Filename: mill.css
*/
   



/* Main Styles */
   html {
   background-image: gray;
   font-family: Verdana, Geneva, sans-serif;
   height: 100%;
   }

  body {
   background-image: -moz-linear-gradient(0deg,  #000000 0%,#3a434d 50%, #000000 100%);
   background-image: -webkit-linear-gradient(0deg,  #000000 0%,#3a434d 50%, #000000 100%);
   background-image: linear-gradient(0deg,  #000000 0%,#3a434d 50%, #000000 100%);
   min-height: 100%;  
   margin: 0px auto;
   min-width: 320px;
   max-width: 1920px;  
  }


/* Commonly Reused Styles */
  header img#logoImg, blockquote.desc, section div#images, div#linkTop,
  div#linkBottom, div#linkTopR, div#linkBottomR, div#line, footer img{
      display: -webkit-flex;
      display:flex;
  }

  header img#logoImg, p#moreInfo, blockquote.desc, div#line, footer img{
      margin-right: auto;
      margin-left: auto;
  }

  div#images div, div#linkTop, div#linkBottom, div#linkTopR, div#linkBottomR, body,
  header nav ul li a, blockquote.desc{
      width:100%;
  }

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

   #membersLinkImg{
      position:absolute;
      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);
   }

   header img#logoImg {
      width: 50%;
      -webkit-filter:opacity(.8);
      filter:opacity(.8);
   }
   
   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(203, 203, 203);
      display: block;
      text-align:center;
      text-decoration: none;
      background-color: transparent;
      
   }
   
   header nav ul li a:hover {
      color: rgb(255, 255, 255);
      text-decoration:overline;
      -webkit-border-radius: 40px ;
      -moz-border-radius: 40px ;
      border-radius: 40px;
      border-width: 2px;
      border-color: rgba(237, 237, 237, 0);
      border-style: solid;
   }

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

/* Paragraph Styles */
   p#moreInfo{

      width: 20%;
      text-align:center;
      background-color: transparent;
      color:rgb(210, 210, 210);
      font-size: 1.1em;
      -webkit-border-radius:  15px;
      -moz-border-radius: 15px ;
      border-radius: 15px;
      border-width: 2px;
      border-color: rgb(140, 138, 138);
      border-style: solid;
   }

   p#doronP {
      display: block;
      text-align: center;
      color: white;
      font-size: 2em;
   }

   blockquote.desc {
      text-align: center;
      color:rgb(255, 255, 255);
      font-size: min(1.5vw, 25px);
      margin-top:auto;
      margin-bottom: auto;

   }

   p.linkdesc {
      float:left;
      text-align: left;
      color:rgb(220, 215, 210);
      font-size: 1em;
      margin-top: 30px;
      margin-bottom: auto;
      font-style:bold;
   }

/* Creator Styles */
   section div#images{
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      margin:auto;
   }

   div#images div{
      height:100%;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      margin-top:auto;
   }

   .creators{
      font-style:bold;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      text-align:center;
      font-size: 1em;
      color:rgb(255, 255, 255);
      -webkit-filter:grayscale(100) brightness(0.5);
      filter:grayscale(100) brightness(0.5);
      transition: 0.5s;
   }

   .creators:hover{
      font-size:1.25em;
      transition: .5s;
      -webkit-filter: grayscale(100) brightness(1);
      filter: grayscale(100) brightness(1);
      transform: rotate(.5deg);
   }

   .creators::after{
      -webkit-filter: grayscale(100) brightness(.5);
      filter: grayscale(100) brightness(.5);
      transition: filter 0.5s;

   }

   .creators:hover::after{
      -webkit-filter: grayscale(100) brightness(.5);
      filter: grayscale(100) brightness(.5);
   }

   img#Brodie{
      padding-right:15px;
   }
   
   .creatorDiv{
      margin-top:auto;
      margin-bottom:auto;
   }

/* Creator Link Styles */   
   h2.links{
      text-align:center;
      color:rgb(223, 217, 209);
      margin-top: auto;
      margin-bottom:0px;
      font-size: 1.25em;
      font-style: bold;
   }

   a.links{
      width:15%;
      height:15%;
      float:left;
      margin-top:20px;
      margin-left:10px;

   }

   div#linkTop{
      text-align:center;
      height:100%;
   }

   div#linkBottom{
      text-align:center;
      padding-top: 25px;
      height:100%;
   }

   div#linkTopR{
      padding-top: 20px;
      text-align:center;
      height:100%;
      padding-left: 30px;
   }
   div#linkBottomR{
      text-align:center;
      height:100%;
      padding-left: 30px;
   }

/* Title Styles */

   h2.creatorTag{
      text-align:center;
      color:rgb(223, 217, 209);
      font-size: min(2vw, 30px);
      font-style: bold;
      margin-top:auto;
      margin-bottom: 1vw;
   }

/* Footer Styles */
   footer {
      text-align:center;
      font-size: 1em;
      padding-bottom: 1em;
      color:rgb(255, 255, 255);
      font-family:monospace, Andale Mono, monospace;
   }

   footer address {
      margin-top: 0px;
      font-style: normal;
   }

   div#line{
      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);
   }

   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);
   }

 
/* Section Styles */

   section h1{
      color:white;
      text-align:center;
      font-size:2em;
   }

/* Mobile Styles */
@media only screen and (max-width: 640px) {
   header nav ul {
      display: none;
   }
   
   header nav ul li {
      font-size: 1.5em;
      line-height: 2em;
      height: 3em;
      padding: 2px;
      margin-left:auto;
      margin-right:auto;
      width: 40%;
   }

   p#moreInfo{
      margin-right: auto;
      margin-left: auto;
      width: 40%;
      text-align:center;
      background-color: transparent;
      color:rgb(210, 210, 210);
      font-size: 1.1em;
      -webkit-border-radius: 15px ;
      -moz-border-radius: 15px ;
      border-radius: 15px;
      border-width: 2px;
      border-color: rgb(140, 138, 138);
      border-style: solid;
   }

   p.linkdesc{
      font-size:2vw !important;
   }

   #membersButton{
      display:none;
   }

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

   a#navicon img{
      height: 15vw;
   }

   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;
   }
   
   section#Bio{
      padding-top: 10em;
      margin:auto;
      display:block;
      padding-bottom: 5vw;
   }

   section img{
      display:block;
      width:70%;
      margin:auto;
   }
   
   div#linkTop img, div#linkBottom img, div#linkTopR img, div#linkBottomR img{
      width:25px;
      height:25px;
   }
}

/* 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;
      }

      section#Bio{
         padding-top: 10em;
         width:90%;
         margin:auto;
         display:block;
         padding-bottom: 5vw;
      }

      section img{
         position:relative;
         width:80%;
      }

      footer p#Update{
         margin-top: 10px;
         font-style: normal;
         font-size: min(.8vw, 15px);
         color: rgb(165, 165, 165);
      }

      p.desc{
         display: -webkit-flex;
         display:flex;
         width: 100%;
         text-align: center;
         color:rgb(199, 192, 184);
         font-size: min(1.5vw, 25px);
         margin-top:auto;
         margin-bottom: auto;
         margin-left: auto;
         margin-right: auto;
      }

      div#linkTop img, div#linkBottom img, div#linkTopR img, div#linkBottomR img{
         width:35px;
         height:35px;
      }
   
}