h1 {
    font-family: Zangezi;
    font-size: 7em;
    font-weight: 300;
    line-height: 0.9em;
    margin-block-end: 0.4em;
    color: rgba(var(--color-text-h), 1);

    @media (max-width: 768px) {
        font-size: 4.5em;
    } 
}

h2 {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.1;
    margin-block-end: 0;
    color: rgba(var(--color-text-h), 1);

    @media (max-width: 768px) {
        font-size: 1.25em;
        
    }
}

a {
    color: rgba(var(--color-accent),1);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: rgba(var(--color-accent), 0.3);

    transition: color 0.5s, text-decoration-color 0.5s ease-in;
    
    &:hover {
        color: rgba(var(--color-accent-hover), 1);
        text-decoration-color: rgba(var(--color-accent-hover), 0.3);
        
        transition: color 0.5s ease, text-decoration-color 0.1s ease-in;
    }
}

span {
    color: rgba(var(--color-accent),1);
}

/* .accent_block {
    color: rgba(var(--color-text-h), 1);
    background-color: rgba(var(--color-accent),0.1);
    padding: 15px 20px;
    border-radius: 0.3em;
} */

.accent_text {
    margin: 4px 0;
    color: rgba(var(--color-accent-hover),1);
}

.question {
    width: 80%;
    color: rgba(var(--color-text-h), 1);
    font-size: 0.8em;
    padding: 6px 16px 10px 16px;
    /* background-color: rgba(var(--color-surface), 1); */
    border: 1px solid rgba(var(--color-text-h), 0.2);
    border-radius: 0.2em 1em 1em 1em;
}

.answer {
    flex-grow: 0;
    color: rgba(var(--color-text-h), 1);
    margin-left: auto;
    width: 80%;
    font-size: 0.8em;
    padding: 6px 16px 10px 17px;
    /* background-color: rgba(var(--color-surface), 1); */
    border: 1px solid rgba(var(--color-accent), 0.5);
    border-radius: 1em 0.2em 1em 1em;
}

.send_button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    text-decoration: none;
    border: 4px solid rgba(var(--color-accent), 1);
    color: rgba(var(--color-text-h), 1);
    cursor: pointer;
    font-size: 2em;

    transition: background-color 0.5s ease;

    &:hover {
        background-color: rgba(var(--color-accent), 1);
        transition: background-color 0.5s ease;
    }
        @media (max-width: 768px) {
            height: 100px;
            font-size: 1.4em;
            transition: none;
            margin: 0 0 100px 0;
        }
}

.paragraph_wrapper {
    display: flex;
    height: auto;
    width: 65%;

        & .left {
            width: 140px;
            height: auto;
            flex-shrink: 0;
    
            & .dot {
                width: 15px;
                height: 15px;
                position: relative;
                background-color: rgba(var(--color-accent), 1);
                border-radius: 50%;
                left: 20px;
                top: 35px;
            }
        }
        
        & .right {
            flex-grow: 1;
            
            & p {
                margin-bottom: 0;
                margin-block-start: 0.5em;
                margin-block-end: 1em;
            }
        }

        @media (max-width: 768px) {
            width: 90%;
            display: block;
            margin: 0 auto;

            & .left {
                display: none;
            }   

            & .right {
                display: block;
                width: 100%;
            }
        }
}

.main_logo {
    position: fixed;
    top: 0;
    left: 20px;
    width: 100px;
    height: auto;
    z-index: 1;

    & .main_logo_zaglushka {
        width: 100%;
        height: 20px;
        background-color: rgba(var(--color-background), 1);
    }

    & .logo_bg {
        background-color: rgba(var(--color-background), 1);
    }

    & .main_logo_gradient {
        width: 100%;
        height: 150px;
        background: linear-gradient(to bottom, rgba(var(--color-background), 1) 0%, rgba(var(--color-background), 0) 100%);
    }
}
    
.menu {
    width: 20%;
    height: 50vh;
    position: fixed;
    padding: 20px 30px 20px 30px;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(var(--color-surface), 1);
    
    & ul {
        list-style-type: none;
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;
        margin: 0;
        padding: 0;
    }

    & li {
        line-height: 1.1;
        margin-bottom: 14px;
    }
    
    & a {
        text-decoration: none;
        font-size: 0.85em;
        font-weight: 500;
    }
    
    & .menu_title {
        font-size: 1em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: rgba(var(--color-text-h), 1);
    }
    
    & .menu_subtitle {
        font-size: 0.8em;
        /* text-transform: uppercase; */
    }
}
    
.main_button_wrapper {
    width: calc(20% + var(--button_shift));
    height: 50vh;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    font-size: 1.2em;
    text-align: center;
    font-weight: 500;
    color: rgba(var(--color-text-h), 1);
    transition: none;

    --button_shift: 1em;

    &:hover {
        & .main_button {
            transform: translateX(0) translateY(0);
            transition: transform 0.1s ease;

            & .front_edge {
                color: rgba(var(--color-text-h));
                transition: none;
            }
        }
    }
    
    & .main_button {
        position: relative;
        display: block;
        width: 100%;
        height: calc(100% + var(--button_shift));
        transform: translateX(var(--button_shift)) translateY(calc(var(--button_shift) * -1));
        transition: transform 1s ease;
        
        & .upper_edge {
            width: calc(100% - var(--button_shift));
            height: var(--button_shift);
            top: 0;
            left: 0;
            position: absolute;
            background: linear-gradient(to bottom, rgba(77, 17, 17, 1) 0%, rgba(40, 5, 5, 1) 100%);
            transform: skewX(-45deg);
            transform-origin: left bottom;
        }
        
        & .right_edge {
            width: var(--button_shift);
            height: calc(100% - var(--button_shift));
            bottom: 0;
            right: 0;
            position: absolute;
            background-color: rgba(var(--color-surface), 1);
            transform: skewY(-45deg);
            transform-origin: left bottom;
        }
        
        & .front_edge {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            width: calc(100% - var(--button_shift));
            height: calc(100% - var(--button_shift));
            bottom: 0;
            left: 0;
            position: absolute;
            background-color: rgba(var(--color-accent), 1)
        }
    }
    
}

header {
    @media (max-width: 768px) {
        width: 100%;

        .main_logo {

            & .main_logo_zaglushka {
                display: none;
            }

            & .logo_bg {
                position: fixed;
                height: 80px;
                right: 0;
                top: 0;
                width: auto;
                background-color: rgba(var(--color-background), 1);
            }

            & .main_logo_gradient {
                display: none;
            }
        }
            .menu {
                display: none;
        }

            .main_button_wrapper {
            position: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            width: 100%;
            bottom: 0;
            background-color: rgba(var(--color-accent), 1);
            
            & .main_button {
                width: 100%;
                height: 100%;
                transform: none;
                transition: none;
         
                & .upper_edge {
                    display: none;
                }
                
                & .right_edge {
                    display: none;
                }
                
                & .front_edge {
                    display: block;
                    height: 100%;
                    width: 100%;

                    & br {
                        display: none;
                    }
                }
            }   
        }
    }
}
    
img {
display: block;
width: 100%;
}

figure {
    margin: 0;
}

.nav {
    display: block;
    gap: 0.5em;
    
    & a {
        display: inline-block;
        margin-bottom: 0.5em;
        text-decoration: none;
        background-color: rgba(var(--color-surface), 0.2);
        padding: 0.5em 1em;
        border-radius: 0.3em;
        transition: background-color 0.5s, text-decoration-color 0s ease-in;
        
        &:hover {
            background-color: rgba(var(--color-surface), 0.4);
            
            transition: color 0.5s, text-decoration-color 0s ease-in;
        }
    }
}

.empty-block {
    height: 1em;
    
    &.S {
        height: 1em;
    }
    &.M{
        height: 2em;
    }
    &.L{
        height: 4em;
    }
    &.XL{
        height: 8em;
    }
}