/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
html { box-sizing: border-box;}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #30a3f3;
  min-height: 100vh;
    background-image: linear-gradient(180deg, #30a3f3 0%, #87CEEB 50%, #E6F1FD 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  margin: 0;
  box-sizing: border-box;
  
  font-family: Oswald;
  color: #30a3f3;
}

a {
  color: #87CEEB
  }
  
header { 
  display: flex;
  flex-direction: column;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 95%; 
  top: 0%; 
  height: 12vh; 
  min-height: 108px;
  padding-bottom: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  
  font-family: Oswald;
  font-size: 5vh;
  color: #30a3f3;
  }
  
main { 
  display: flex;
  position: absolute;
  top: max(115px, 14vh);
  flex: 1;
  }
  
h1 {
  font-family: Babbler;
  font-size: 42px;
  text-decoration: underline;
  }
  
/*  Div name: Menu
    Div Type: Grid
    View on: All pages (header)
    Description: Displays sections for logo, site title, subtitle, webpage navigation, and off-site navigation to social media. */
    
.menu {  
  display: grid;
  grid-template-areas:
    "logo title SM"
    "logo option SM";
  grid-template-columns: 1fr 2fr 1fr;
  justify-content: center;
  align-items: center;
  min-width: 100%; 
  min-height: 100%; 
  }
.menu div {
  text-align: center;
  }
.menu .logo {
  grid-area: logo;
  }
.menu .title {
  grid-area: title;
  text-align: center;
  }
.menu .option {
  grid-area: option;
  font-family: Babbler;
  font-size: 24px;
  }
.menu .SM {
  grid-area: SM;
  font-size: 16px;
  justify-content: flex-end;
  }    
  
    
/*  Div name: Center
    Div type: Inline Grid
    View on: Homepage ("About")
    Description: Displays sections for Hero image banner, artist biography, gallery preview, resume download link, and navigation to contact page.*/

.center { 
  display: inline-grid;
  grid-template-areas:
    "hero hero"
    "bio bio"
    "gallerypreview resume"
    "contactpreview contactpreview";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr 2fr 1fr;
  justify-content: center;
  align-items: center;
  height: 83vh; 
  width: 90vw; 
  margin: 5px;
  background: rgba(255, 255, 255, 0.75);
  border:3px solid white;
  border-radius: 5px;
  }
.center a {
  color: #fff;
  }

.center div {
  font-size: 20px;
  text-align: center;
  padding: 1px;
  }
  .center .hero {
  grid-area: hero;
  text-align: center;
  }
  .center .bio {
  grid-area: bio;
  text-align: center;
  }
  .center .gallerypreview {
  grid-area: gallerypreview;
  }
  .center .resume {
  grid-area: resume;
  }
  .center .contactpreview {
  grid-area: contactpreview;
  } 
  
/*  Div name: Content
    Div Type: Section, Block
    View on: Gallery
    Description: Contains Gallery and navigation divs.*/  
    
.content {
  display: block;
  padding: 10px;
  height: 83vh; 
  width: 90vw;
  margin: 5px;
  background:  rgba(255, 255, 255, 0.75);
  border:3px solid white;
  border-radius: 5px;
  }  

  /* Gallery filter settings */  
  .content .content-filter {
    padding: 0 15px;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    }
    
  .content .content-filter .filter-item {
    color: #ffffff;
    border: 2px solid white;
    display: inline-block;
    border-radius: 20px;
    margin-right: 8px;
    cursor: pointer;
    padding: 8px 20px 8px 20px;
    line-height: 1.2;
    transition: all 0.3s ease;
    }
  
  .content .content-filter .filter-item:hover{
    color: #30a3f3;
    border-color: #30a3f3;
    animation: fadeIn 0.2s ease;
    }
  
  .content .content-filter .filter-item.active {
    background-color: white;
    color: #30a3f3;
    }
  
/*  Div name: Gallery
    Div Type: Grid
    View on: Gallery
    Description: Displays preview images for visual content on the gallery page, connected to a modal that displays the full artwork and it's information. Impliments hover effects on preview images. Impliments modal to navigate to content information page.
    Additional scripts: speaks to gallery.js to impliment modal.*/
    
.gallery {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  justify-content: center;
  align-items: center;
  }
  
  .gallery .gallery-item {
    padding: 5px;
    }
    
  .gallery .gallery-item.show {
    animation: fadeIn 0.5s ease;
    }
    @keyframes fadeIn {
      0% {
        opacity: 0;
        }
      100% {
        opacity: 1;
        }
      }
      
  .gallery .gallery-item.hide {
    display: none;
    }
  
  /* Gallery image settings */
  .gallery img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid white;
    border-radius: 5px;
    transition: transform 0.3s ease;
    cursor: pointer;
    }
    
  /* Hover effects for preview images */
  .gallery img:hover{
    transform: scale(1.05);
    }
    
/*  Div name: Modal
    Div Type: Grid
    View on: Gallery
    Description: Displays full-screen versions of visual content with artwork information. Impliments visual effects to "grey out" gallery space. Can be closed via onClick command (found in "gallery.js") */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(127, 127, 127, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000
  }
  
  .modal img {
    max-width: 80%;
    max-height: 90%;
    border-radius: 10px;
    transition: all 0.3 ease;
    }
  .modal .close {
    position: absolute;
    top: 30px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease
    }
  .modal .close.hover {
    color: #87CEEB;
    }
  
  .modal .modal-profile {
    display: grid;
    grid-template-columns: 75% 25%;
    position: relative;
    max-height: 95%;
    max-width: 95%;
    background: white;
    border: 5px solid white;
    border-radius: 10px;
    justify-content: center;
    align-items: center;}
    
  .modal .modal-profile.hide{
    display: none;
    }
    
    .modal .modal-profile .modal-artwork {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      position: fixed;
      max-width: 75%;
      max-height: 90%;
      }
    
    .modal .modal-profile .modal-info {
      display: grid;
      justify-content: center;
      align-items: flex-start;
      }
    
    .modal .modal-profile .modal-info #name {
      font-family: Babbler;
      font-size: 30px;
      }
      .modal .modal-profile .modal-info #year {
       font-weight: bold;
        }
      .modal .modal-profile .modal-info #desc {
        font-size: 18px
       }
    
  /* media settings */    
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
    }
    
  .content .content-filter .filter-item {
      margin-bottom: 10px;
      }
    
    .modal img{
      max-width: 90%;
      }
    }
    
    
/*  Div name: Contact
    Div type: Inline Grid
    View on: Contact
    Description: Displays sections for page title, contact information and email function, and offsite links to social media.*/

.contact { 
  display: inline-grid;
  grid-template-areas:
    "title title"
    "direct social";
  grid-template-columns: 50% 50%;
  grid-template-rows: 20%;
  justify-content: center;
  align-items: center;
  height: 83vh; 
  width: 90vw; 
  margin: 5px;
  background: rgba(255, 255, 255, 0.75);
  border:3px solid white;
  border-radius: 5px;
  }
.contact a {
  color: #fff;
  }

.contact div {
  font-size: 20px;
  text-align: center;
  padding: 1px;
  }
  .contact .title {
  grid-area: title;
  text-align: center;
  }
  .contact .social {
  grid-area: social;
  }
  .contact .direct {
  grid-area: direct;
  } 

/*  Div name: Footer
    Div Type: inline block
    View on: All pages 
    Description: Displays page footer. */
    
.footer {
   position: fixed;
   align-content: center;
   left: 0;
   bottom: 0;
   width: 97%;
   margin-left: 1%;
   margin-bottom: 10px;
   font-size: 14px;
   color: gray;
   text-align: center;
   }

  .footer div {
     font-size: 12px;
     color: gray;
     text-align: center;
  }