* {
    padding:0px;
    margin:0px;
}
.bod {
    padding-top: 50px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 2;
}
.background {
  position: relative;
}
body {
  overflow: hidden;
}




/*    Navbar    */
.topnav {
    background-color: black;
    overflow: hidden;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
    left: 0;
    padding-bottom: 13px;
    height: 42px;
    padding-top: 10px;
    padding-left: 15px;
}
.topnav a {
    float: left;
    border-radius: 20px 20px 20px 20px;
    color: white;
    text-align: center;
    padding: 13px 20px;
    text-decoration: none;
    font-size: 15px;
     transition: all 0.3s ease-in-out;
     margin-right: 13px;
}
.topnav a:hover {
    transition: 1s;
    background-color: rgb(131, 131, 129);
    border-radius: 10px 10px 10px 10px;
} 
.active {
    background-color: rgb(80, 79, 79);
    border-radius: 10px 10px 10px 10px;
}
img {
display: inline-block;
  position: relative;
  height: 100%;
  width: 55px;
  height: 55px;
}
.logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  float: right;
}
img {
display: inline-block;
  position: relative;
  height: 100%;
  width: 55px;
  height: 55px;
}


/*    web    */
.info-font {
    font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style:normal;
  font-variation-settings:"wdth" 100;
  text-align: left;
  margin-top: 128px;
  margin-left: 57px;
  color: rgb(255, 255, 255);
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 85px;
}

.soc i {
    font-size: 20px;
    padding-left: 68px;
    color: rgb(255, 255, 255);
}
.soc a {
    transition: all 0.2s ease-in-out;
        display: inline-block;
}
.soc a:hover {
  transform: scale(1.05);
  color: rgb(255, 255, 255);
  text-shadow: 5px 5px 6px black;
}
.soc i {
    transition: all 0.2s ease-in-out;
        display: inline-block;
}
.soc i:hover {
  transform: scale(1.05);
  color: rgb(255, 255, 255);
  text-shadow: 5px 5px 6px black;
}
.inf {
  color: white;
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style:normal;
  font-variation-settings:"wdth" 100;
  padding-left: 50px;
}

p {
  padding-left: 62px;
  font-weight: bolder;
}

#email {
      cursor: pointer;
    }

    #email2 {
      cursor: pointer;
    }

    #email2 {
    transition: all 0.2s ease-in-out;
        display: inline-block;
}

#email2:hover {
  transform: scale(1.05);
  color: rgb(255, 255, 255);
  text-shadow: 5px 5px 6px black;
}


@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .info-font {
    margin-top: 100px;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 28px;
    text-align: left;
  }

  .soc {
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 30px;

    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .soc a, .soc i {
    font-size: 18px;
    padding-left: 0;
    color: white;
  }

  .soc a {
    display: flex;
    align-items: center;
    gap: 8px; 
  }

  .topnav a {
    padding: 10px 12px;
    font-size: 14px;
    margin-right: 5px;
  }

  .nav-logo,
  .topnav img {
    width: 40px;
    height: 40px;
  }
}

  img {
    width: 40px !important;
    height: 40px !important;
    float: right !important;
  }

  .background {
    height: auto;
  }