body{
      background-image: url('images/b.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
  }

  html{
    scroll-behavior: smooth;
  }

  h1{
    color: #f2f2f2;
    font-size: 40px;
  }

  p{
    color: #f2f2f2;
    font-size: 25px;
  }

  
  /* Change the color of links on hover */
  .button:hover{
    background-color: #ddd;
    color: black;
  }
  
  #about{
    color: #f2f2f2;
    text-align: center;
    display: block;
    height: 100vh;
    
  }
  .button {
    text-decoration: none;
    color: #f2f2f2;
    padding: 1%;
    border:2px solid #f2f2f2;
    border-radius: 10%;
    margin: 1%;
  }

  section{
    width: 100%;
    float:left;
    min-height: 100vh;
    max-height: fit-content;
    position: relative;
  }

  #about-info{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .row{
    width: 100%;
    height: 45vh;
    overflow: hidden;
  }

  .column-pic{
    width: 30%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    object-fit: cover;
  }
  .column{
    width: 70%;
    height: 100%;
    float: left;
    text-align: center;
  }

  .column-pic img{
   max-width: 100%;
   max-height: 100%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 5%;
   object-fit: cover;
   
  }

  .info-column{
    width: 45%;
    height: 100%;
    float: left;
  }

  #resume{
    border:2px solid #f2f2f2;
    border-radius: 10%;
  }

  #contact{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 5%;
  }

  .icon {
    width: 20%;
    height: 20%;
    padding: 2%;
  }

  #end{
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .icons{
    display: table;
    text-align: center;
    width: 100%;
    
  }

  .click, .click:visited{
    margin:1%;
    text-decoration: none;
    color: #f2f2f2;
  }

  .click:hover{
    color: #B0B0B0;
  }

  #projects{
    text-align: center;
  }

  h2, h3{
    color: #f2f2f2;
    margin: 0 0;
    padding: 2%;
  }

  @media screen and (max-width: 700px) {
    .column-pic {
      width: 100%;
    }
    .column{
      width: 100%;
    }
    .info-column{
      width: 100%;
    }
    section{
      display: block;
      overflow: auto;
    }
    #contact{
      padding-top: 5%;
    }
  }