html {
    scroll-behavior: smooth;
}

body {
    font-family: "Handjet";
    font-weight: normal;
    margin: 0; 
    font-optical-sizing: auto;
    font-variation-settings: 
        "wght" 300,
        "ELGR" 1,  
        "ELSH" 2;    
    background: radial-gradient(circle, #833AB4, #FD1D1D, #FCB045);
    background-size: cover;       /* растягивает на весь экран */
    background-attachment: fixed; /* фиксирует фон при скролле */
    min-height: 100vh;
}


main {
    display: flex;
    flex-direction: column; 
    padding: 10vh 20vh 30vh 20vh;
}


h1 {
    font-size: 70px;
    color: white;
    font-family: "Handjet";
    font-weight: normal;
    font-optical-sizing: auto;
    font-variation-settings: 
        "wght" 600,
        "ELGR" 1,  
        "ELSH" 2;  

    margin: 0vw 0vw 5vw 0vw; 
}

p {
    font-size: 20px;
    color:#833AB4;
    margin: 0; 
}

h2 {
    font-size: 30px;
    color: white;
    margin: 0; 
    margin: 0vw 0vw 1vw 0vw; 
}

section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 5vw;
}

.item {
    display: flex;
    flex-direction: row;
}

input[type="checkbox"] {
    min-width: 18px;
    height: 18px;
    accent-color: #833AB4;
    cursor: pointer;
}

label {
    font-size: 20px;
    color: white;
}

a {
    color: white;
    text-decoration: underline;
}

a:hover {
    color: #FCB045;
    text-decoration: underline;
}

a:active {
    color: #FCB045;
    text-decoration: underline;
}

.sims {
    display:flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    right: 20vh;
    align-items: flex-end;
    /* gap: 5px;  */
}

.bubble {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 10px;
    max-width: 35vw;
    padding: 10px;
    margin-bottom: 10px;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;    
    border-bottom: 15px solid transparent;
    border-left: 20px solid white;   
    margin-bottom: 50px;      
}

.bubble_wrapper {
 display:flex;
    flex-direction: row;
    align-items: flex-end;
}

.bubble_wrapper:hover .bubble,
.bubble_wrapper:hover .triangle {
    opacity: 0.1; 
}

.me {
    display:flex;
    flex-direction: column;
    align-items: center;
}

img {
    max-width: 250px;
}

@media (max-width: 600px) {
    main {
        padding: 5vh 5vw 80vw 5vw;
    }

    h1 {
        font-size: 65px;
        margin-bottom: 10vw;
    }

    h2 {
        font-size: 26px;
        margin-bottom: 1.5vw;
        margin-bottom: 5vw;
    }

    p, label {
        font-size: 18px;
    }

    section {
        gap: 8px;
        margin-bottom: 3vw;
        margin-bottom: 10vw;
    }

    .item {
        flex-direction: row; /* Чекбокс и текст в ряд */
        gap: 8px; /* Расстояние между чекбоксом и текстом */
    }

    input[type="checkbox"] {
        min-width: 16px;
        height: 16px;
    }

    .sims {
        flex-direction: column-reverse;
        bottom: 0;
        right: 0;
        left: 0;
        align-items: center;
    }

    .bubble {
        max-width: 90vw;
        padding: 8px;
    }

    .triangle {
        display: none;
    }

    .me img {
        max-width: 150px;
        /* margin-bottom: 5px; */
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

    .bubble-wrapper:hover .bubble,
    .bubble-wrapper:hover .triangle {
        opacity: 1; 
    }