:root{
  --mobileWidth: 400px;
}

.html, .body{
  width: 75%;
  height: 75%;
  max-width: 1333px;
  
}

.topnav{
    background-color: rgb(147 137 212);
    z-index: 1;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    position: relative;
    text-shadow: none;
}
.topnav a{
    float: center;
    color:rgb(0, 0, 0);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; 
    font-size: 17px;
}

.topnav a:hover{
    background-color: grey;
    color:rgb(0, 0, 0);
}

.topnav a.active{
    background-color: grey;
    color: white;
}

.dropdownItem{
    border: none;
    padding: 14px 16px;
    font-size: 17px;
    background-color: rgb(147	137	212);

}

.dropdown{
    position: relative;
    display: inline-block;


}

.dropdownContent{
    display: none;
    position: absolute;
    background-color: rgba(147, 137,	212,.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(8,8,8,.2);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

}
.dropdownContent a{
    padding: 12px 16px;
    display: block;
    text-align: left;
    min-width: 160px;
    text-shadow: none;
    font-weight: bold;
}

.dropdownContent a:hover{
    display: block;
    border-radius: 15px;
    z-index: 3;
}

.dropdown:hover .dropdownContent{
    display: block;
    z-index: 3;
    

}
.dropdownItem:hover{
    background-color: rgb(147	137	212);
    z-index: 3;
}

.topnav .icon{
    display:none;
}

@media screen and (max-width: 600px) {

    .topnav a:not(:first-child), .dropdown .dropdownItem {
      display: none;
    }
    #home{
      padding-top: 19px;
      padding-bottom: 19px;
      float: left;
      text-shadow: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
      background-color: rgb(147	137	212);

    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {
      position: absolute;
      margin-right: 5%;
      margin-left: 5%;
      width: var(--mobileWidth);
      z-index: 0;
      
    }
    .topnav.responsive .icon {
      background-color: rgb(147	137	212);
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: center;
      display: block;
      text-align: left;

    }
    .topnav.responsive  {
      z-index: 1;     
      float: center;
      display: block;
      text-align: left;
      

    }
    .topnav.responsive .dropdownContent {

      position: relative;
      padding-left: 40px;
      width: calc(var(--mobileWidth) - 40px);
      z-index: 2;
      text-shadow: none;
      background-color: grey;
      color:white;
    }
    .topnav.responsive .dropdown .dropdownItem {
      display: list-item;
      position: inherit;
      text-align: left;
      z-index: 2;
      min-width: var(--mobileWidth);

    }
    #respoNav.topnav.topnav.responsive{
      padding-bottom: 0pt;

      
    }
    #respoNav.topnav{
      padding-bottom: 39px;
    }
  }
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(255, 255, 255);
    text-align: center;
    position: relative; 
  }