/*
    Stylesheet for the electronics 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;
    }

 


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

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

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


    /*
    Customizes the gudetama
    */
    .gudetama-electronics img{
        width: 200px;
        margin-top: 50px;
        margin-bottom: 100px;
    }








    /*
    Sets up the audio equalizer project using a grid
    */
    .audio-equalizer{
        display: grid;
        grid-template-columns: 1fr 2fr;
        padding: 100px;
        column-gap: 20%;
        background-color: #ddfbff;
    }


    /*
    Sets up the post-net-xs3 project
    */
    .post-net-xs3{
      display: grid;
      grid-template-columns: 1fr 2fr;
      padding: 100px;
      column-gap: 20%;
      background-color: #bcecff;
    }

    /*
    Customizes text
    */
    .information p1, .information2 p1{
        font-family: Roboto;
        font-size: 40px;
        color: #797979;
        font-weight: 500;
    }
    .information p, .information2 p{
        font-family: Roboto;
        font-size: 20px;
        color: #797979;
    }
    .audio-equalizer-pic p, .post-net-pic p{
        font-family: Roboto;
        font-size: 20px;
        color: #797979;
        width: 500px;
    }

    /*
    Customizes images
    */
    .audio-equalizer-pic img{
        width: 500px;
        object-fit: contain;
    }
    .post-net-pic img{
      width: 500px;
      object-fit: contain;
    }
    .information img{
        height: 450px;
    }
    .information2 img{
      width: 450px;
    }
    


    /*
    Customizes the download button
    */
    .download{
        background-color: #489bbc;
        width: 500px;
        font-family: Roboto;
        font-size: 22px;
        border: none;
        border-radius: 8px;
        padding: 40px;
        margin-top: 40px;
    }
    .download:hover{
        cursor: pointer;
        text-decoration: underline;
        transition: .15s;
    }








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