/*
Stylesheet for the drawing portfolio page CSS
*/




/*
  Sets whole website background to be blue with no margins 
  */
  .body{
    background-color: #bef1f7;
    margin: 0;
  }
  


  /*
  Header/ Toolbar CSS
  */
    /*
    Creates a header with padding
    */
    .header{
      background-color: #69c0e2;
      padding: 10px;
    }

    /*
    Creates a toolbar using a grid that has 8 columns with certain specifications 
    */
    .toolbar{
      vertical-align: top;
      background-color: #69c0e2;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr .5fr .5fr .5fr; 
      column-gap: 10px;
      justify-content: center;
      align-items: center;
    }

    /*
    Logo specifications to align it to the left 
    */
    .logo{
      vertical-align: top;
      width: 90px;
      height: 90px;
      margin-left: 80px;
      margin-right: 200px;
    }

    /*
    Outside logo specifications to align them to the right
    */
    .git-logo, .insta-logo{
      width: 40px;
      height: 40px;
    }

      /*
      Outside logo specification for Linkdin as imported image has differenet specifications than above 
      */
    .link-logo{
      width: 30px;
      height: 30px;
    }
    
    /*
    Sets toolbar buttons to have certain specifications
    */
    .home-b, .about-b, .portfolio-b, .contact-b{
      background-color: #69c0e2;
      border: none;
      color: white;
      font-family: Roboto;
      font-size: 18px;
    }

 




/*
Drawing section CSS
*/
    /*
    Customizes the intro of the drawing page
    */
    .drawing-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-top: 80px;
    }

    /*
    Centers objects using a flexbox
    */
    .drawing-title, .gudetama-draw{
        display: flex;
        justify-content: center;
        align-items: center;
    }


    /*
    Customizes the title
    */
    .drawing-title p{
        font-family: Roboto;
        font-size: 60px;
        color: #797979;
        font-weight: bold;
    }

    /*
    Customizes the gudetama
    */
    .gudetama-draw img{
        width: 250px;
    }







/*
Gallery section CSS
*/
    /*
    Sets gallery to be a 3 column grid
    */
    .gallery{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      padding: 20px;
      row-gap: 40px;
      column-gap: 30px;
    }

    
    /*
    Center the images in their div using a flexbox
    */
    .beth, .hi, .toad, .sky, .pip-kace, .iu, .tear, .music-box, .dragon, .bubble,
    .me, .piano, .piglet, .portrait, .house-of-dragon, .mountain-lion, .date, .book2, .hooky, .meliodas,
    .evergarden, .shoe, .book1{
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /*
    When hovered, enlarge drawing
    */
    .beth img:hover, .hi img:hover, .toad img:hover, .sky img:hover, .pip-kace img:hover, .iu img:hover, .tear  img:hover, 
    .music-box img:hover, .dragon img:hover, .bubble img:hover, .me img:hover, .piano img:hover, .piglet img:hover, 
    .portrait img:hover, .house-of-dragon img:hover, .mountain-lion img:hover, .date img:hover, .book2 img:hover, .hooky img:hover, 
    .meliodas img:hover, .evergarden img:hover, .shoe img:hover, .book1 img:hover{
      transform:scale(1.5);
      
    }

    
    /*
    Customizes each image
    */
    .beth img, .hi img, .toad img, .sky img, .pip-kace img, .music-box img, .piano img, .book2 img, .meliodas img, 
    .evergarden img, .shoe img, .book1 img{
      width: 300px;
      transition: transform 1s ease-in-out;
    }
    .iu img{
      width: 250px;
      transition: transform 1s ease-in-out;
    }
    .dragon img, .bubble img{
      width: 250px;
      transition: transform 1s ease-in-out;
    }
    .me img{      
      height: 380px;     
      transition: transform 1s ease-in-out;
    }
    .piglet img, .portrait img, .hooky img{
      width: 250px;
      transition: transform 1s ease-in-out;
    }
    .house-of-dragon img{
      height: 350px;
      transition: transform 1s ease-in-out;
    }
    .mountain-lion img{
      height: 300px; 
      transition: transform 1s ease-in-out;     
    }
    .tear img{
      width: 200px;
      transition: transform 1s ease-in-out;
    }
    
    /*
    Customizes the dates underneath the drawings
    */
    .date{
        font-family: Roboto;
        font-size: 22px;
        font-weight: 500;
    }
  











 /*
  Footer CSS
  */
    /*
    Creates a footer with padding
    */
    .footer{
      background-color: #69c0e2;
      padding: 50px;
    }

    /*
    Creates a quick-access using a grid  
    */
    .quick-access{
      vertical-align: top;
      background-color: #69c0e2;
      display: grid;
      grid-template-columns: 1fr 3fr; 
    }

    /*
    Creates quick-links grid
    */
    .quick-links-grid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }

    /*
    Customizes quick-link text
    */
    .quick-link-text{
      color: white;
      font-family: Roboto;
      font-size: 18px;
    }




  /*
  Changes mouse to a pointer when hovered on and underlines the text
  */
  .home-b:hover, .about-b:hover, .portfolio-b:hover, .learn-more:hover, 
  .contact-b:hover,.logo:hover, .git-logo:hover, .link-logo:hover, .insta-logo:hover,
  .thread-image:hover, .equalizer-image:hover, .movie-image:hover,
  .lmb:hover, .explore-b:hover, .experinces-button:hover, .actual-email:hover, .quick-link-text:hover{
    cursor: pointer;
    text-decoration: underline;
    transition: .15s;
  }