html, body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


nav{
    
    transform-origin: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 15px;
    width: 40%;
    border-radius: 40px;
    padding: 10px;
    background-color: rgb(255, 212, 85);
    display:flex;
    
    
    z-index: 3;
    gap: 0px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0px;
}

nav ul li ul{
    display: none;
}

nav ul li{
    position: relative;
}

nav a{
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    background: #333;
    color: white;
    border-radius: 5px;
}



.top{
    filter: blur(1px);
    margin: 0;
    transform-origin: center;
    position: fixed;
    width: 100vw;
    top: -5px;
    left: -5px;
    padding: 55px;
    background-color: rgb(254, 255, 182);
    z-index: 2;
}



.image{
    transition: filter 0.5s;
    filter: blur(1px);
    position: absolute;
    transform-origin: center;
    transform: scale(1);
    left: 0;
    max-width: 100vw;
    min-width: 0vw;
    
    
}

.image2{
    filter: blur(1px);
    position: absolute;
    transform-origin: center;
    transform: scale(1);
    top: 130%;
    max-width: 100vw;
    min-width: 0vw;
    z-index: 0;

}

.title{
    
    transition: 500ms;
    transform-origin: center;
    font-size: 50pt;
    position: absolute;
    text-align: center;
    font-family: sans-serif;
    top: 15%;
   
    margin-left: 30%;
    margin-right: 30%;
      
    color: white;
    z-index: 1;
    
}

.button1{
    position: relative;
    z-index: 14;
    margin-left: 5px;
    transition: 500ms;
    font-size: 15pt;
    padding: 15px 25px;
    border-radius: 25px 0px 0px 25px;
    background-color: rgb(56, 56, 56);
    border: 0;
    color: white;
   
}

.button2{
    transition: 500ms;
    font-size: 15pt;
    padding: 15px 25px;
    border-radius: 0px 0px 0px 0px;
    background-color: rgb(56, 56, 56);
    border: 0;
    color: white;
}

.button3{
    transition: 500ms;
    font-size: 15pt;
    padding: 15px 25px;
    border-radius: 0px 25px 25px 0px;
    background-color: rgb(56, 56, 56);
    border: 0;
    color: white;
}

.button3:hover,
.button2:hover,
.button1:hover{
    transform-origin: center;
    background-color: rgb(158, 158, 158);
    
    cursor: pointer;

}

.button3:active,

.button1:active{
    
    transition: 50ms;
    transform-origin: center;
    transform: scale(1.1);
}

nav ul li ul {
    display: none;
    position: absolute;  
    top: 100%;            
    left: 0;
    background-color: rgb(56, 56, 56);
    padding: 0;
    margin: 0;
    border-radius: 5px;
    min-width: 120px;   
    z-index: 5;
}

nav ul li:hover > ul {
    display: block;
}

.options{  
    transition: 500ms;
    background-color: rgb(65, 65, 65);
}

.options:hover {
    position: relative;
    z-index: 20;
    background-color: rgb(158, 158, 158);
    transform-origin: center;
    transform: scale(1.05);
    transition: 500ms;
}

.test {
    transition: 500ms;
 
    font-size: 15pt;
    border: 0px solid white;
    position: absolute;
    top: 40%;             
    left: 35%;            

    width: 30%;           
    font-family:'Times New Roman', Times, serif;
    text-align: center;
    overflow-wrap: break-word;
    color: white;
    z-index: 1;

}

.section{
    display: none;
}
.title:hover,
.test:hover{
    transform-origin: center;
    transform: scale(1.05);
    transition: transform 0.5s;
}
.title:hover ~ .image{
    filter: blur(3px);
    transition: filter 0.5s;
}
.test:hover + .image{
    filter: blur(3px);
    transition: filter 0.5s;
}