*,
*::after,
*::before {
    box-sizing: border-box;
}

:root{
    --bar-width: 40px;
    --bar-height: 6px;
    --hamburger-gap: 5px;
    --foreground: #776B5D;
    --background: white;
    --hamburger-margin: 28px;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2)
}

.hamburger-menu{
    --x-width: calc(var(--hamburger-height) * 1.41421356237);

    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: absolute;
    top: var(--hamburger-margin);
    left: var(--hamburger-margin);
    z-index: 2;
    cursor: pointer;
}

.hamburger-menu:has(input:checked) {
    --foreground: white;
    --background: #776B5D;
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible{
    border: 1px solid var(--foreground);
    box-shadow: 0 0 0 1px var(--background);
}


.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--foreground);
    border-radius: 9999px;
    transform-origin: left center;
    transition: opacity var(--animation-timing), width var(--animation-timing), translate var(--animation-timing), rotate var(--animation-timing), background-color var(--animation-timing);
}

.hamburger-menu input{
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    /* pointer-events: none; */
}

.hamburger-menu:has(input:checked)::before{
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after{
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked {
    opacity: 0;
}

.sidebar{
    transition: translate var(--animation-timing);
    translate: -110%;
    padding: 0.5rem 1rem;
    padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 2rem);
    background-color: var(--foreground);
    color: var(--background);
    min-height: max-content;
    max-width: max-content;
    overflow: hidden;
    border-radius: 40px;
    opacity: 0.8;
}

.hamburger-menu:has(input:checked) + .sidebar {
    translate: 0;
}

header{
    position: fixed;
}

html{
    margin: 0;
    padding: 0;
}

body{
    font-size: 20px;
    font-family: sans-serif;
    color: #776B5D;
    background-color:#F3EEEA;
}

main, footer{
    max-width: 1200px;
    margin: 0 auto;
}

.container{
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
}

.link{
    text-decoration: none;
    color: white;
    font-size: 30px;
    opacity: 1;
    margin-bottom: 10px;
}
.sidebar li{
    margin: 0 0 10px 0;
}

.title{
    text-align: center;
}

.block{
    background-color: white;
    margin: 10px auto;
    border-radius: 40px;
    padding: 10px 30px 20px 30px;
}
main{
    padding: 0 5px;
    text-align: justify;
}

h1,h2,h3{
    text-transform: uppercase;
    margin: 20px 0;
    text-align: center;
}

p{
    margin: 20px 0;
}

h1{
    font-size: 40px;
    border-bottom: 3px dotted #776B5D;
    margin: 0 auto 30px auto;
    padding: 20px 0;
    overflow: hidden;
}

.matrix{
    border: 3px solid #776B5D;
    margin-bottom: 10px;
    border-radius: 40px;
    max-width: 60%;
}

/* h3{
    border-bottom: 4px dotted dimgray;
    width: 80%;
    margin: 0 auto 20px auto;
    padding-bottom: 20px;
    text-align: center;
} */

h4{
    text-align: center;
    margin: 10px 0;
}

.dark-block{
    background-color: #776B5D;
    max-width: 100%;
    color: #F3EEEA;
    font-size: 20px;
    padding: 30px 20px;
    border-radius: 40px;
    margin: 0 auto;
}

.dark-block li{
    margin-bottom: 10px;
}

.dark-block ol{
    margin-bottom: 0;
}

.dark-block p{
    margin: 0 0 15px 0;
}

.dark-block a{
    color: #FDFFAE;
}

ul{
    text-align: left;
    margin: 0 0 20px 0;
}

h3{
    font-size: 20px;
}


@media(max-width:1024px){
    .matrix{
        width: 99%;
    }
    body, .dark-block{
        font-size: 15px;
    }
    h1{
        font-size: 17px;
        width: 80%;
        padding: 20px 0;
        margin: 0 auto 10px auto;
    }
    h4, h3{
        font-size: 15px;
        margin: 5px 0 10px;
    }
    .dark-block{
        max-width: 100%;
        padding: 20px 20px 10px 20px;
    }
    ul, ol{
        padding: 0 10px 5px 10px;
        margin-bottom: 0;
    }
    .block{
        padding: 5px 20px;
    }
    .block li{
        margin: 3px 0;
    }
    .menu.list{
        display: block;
    }
    p{
        margin: 10px 0;
    }
}

@media (max-width:768px){
    .matrix{
        max-width: 100%;
    }
}