body{
    font-family: 'Chewy', sans-serif;
    background-color: #2dfdb3;
    background-image: url("content/text.png");
    background-repeat: repeat; /* Repeats the texture */
    color: hotpink;
    overflow-x: hidden;
}
header{
    text-align: center;
    font-size: 20px;
    font-variant: small-caps;
    border: dotted 5px white;
    padding: 20px 20px 20px 200px; /* Top, Right, Bottom, Left */
    margin-bottom: 20px;
    background-image: url("content/animation.gif.gif");
    background-color: pink ;
    background-repeat: no-repeat;
    background-size: contain;
}
header h1{
    letter-spacing: 0.1cm;
}
nav{
    margin: 0 0 10% 0;
    background-color: #2dfdb3;
}
nav ul li{
    display: block;
    position: relative;
    float: left;
    padding: 1%;
    width: 405px;
    background-color: pink;
    border: solid 1px white;
    text-align: center;
    margin-right: 10px;
}
nav ul li:hover{
    text-decoration: lightgray;
    text-align: center;
}
nav a{
    text-decoration: none;
}
main section{
    position: relative;
    left: 0;
    margin: 10px;
    width: 20%;
    border: 5px dotted hotpink;
    border-radius: 30px;
    padding: 15px;
    display: block;
    text-align: center;
}
nav ul li:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

nav .dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background: deeppink;
    transform: translateY(-10px); /* Начальное смещение вверх */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

nav .dropdown li a {
    padding: 10px;
    background: deeppink;
}

nav .dropdown li a:hover {
    background: pink;
}


.crysa{
    position: absolute; /* Позволяет двигать */
    z-index: 9999; /* Поверх всех */
    top: 0; /* Начальная позиция (можешь изменить) */
    left: 0;
}