*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}

html, body{
    width: 100%;
    height: 295vw;
}

body{
    background-color: #fff;
    font-size: 16px;
}

.menu-list{
    display: none;
}

.container{
    user-select: none;
    background-image: url(src/01.jpg);
    background-size: contain;
    height: inherit;
    width: inherit;
}

.wabtn{
    position: absolute;
    z-index: 100;
}

.burger-label #check{
}

.burger-label .checkbtn{
    position: relative;
    display: none;
    z-index: 100;
}

/* header */

nav{
    user-select: none;
    position: fixed;
    width: 100%;
    background-color: rgba(47, 2, 2, 0.65);
    box-shadow: 0px 1px 12px #ede74b;
    z-index: 100;
}

nav ul{
    align-items: center;
    display: flex;
    font-size: 110%;
    z-index: 100;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);}

nav ul li{
    font-family: monospace;
    font-weight: 550;
    margin: 0 0 0 2vw;
}

nav ul li .name{
    font-family: sans-serif;
    margin: 0 2vw 0 -1.8vw;
    font-size: 150%;
    cursor: default;
    filter: drop-shadow(0px 0px 2px #ede74b)
            drop-shadow(0px 0px 2px #7cffaf)
            drop-shadow(0px 0px 2px #ede74b);  
}

nav ul li a{
    color: #4b93c5;
    transition: 0.2s ease-in-out;
}

nav ul li a:hover{
    filter: drop-shadow(0px 0px 3px #ede74b)
            drop-shadow(0px 0px 1px #ede74b)
            drop-shadow(0px 0px 1px #ede74b);

}

nav ul li h1{
    user-select: all;
    font-size: 1.8vw;
    color: #fff;
    position: absolute;
    width: 28%;
    top: 0;
    left: 80vw;
    filter: drop-shadow(0px -1px 2px #000)
            drop-shadow(0px -1px 2px #000);
}

#whatsapp{
    position: relative;
    top: 0.15vw;
    font-size: 110%;
    color: #4fc95d;
    margin: 0 6% 0 0;
}

#email{
    position: relative;
    font-size: 140%;
    color: #4b4b4b;
    cursor: pointer;
    filter: drop-shadow(0px 0px 4px #7cffaf)
            drop-shadow(0px 0px 4px #7cffaf); 
}

.bars{
    display: none;
}

/* body */

.logo{
    width: 30%;
    position: relative;
    top: 22vw;
    left: 67%;
    transition: 0.2s ease-in-out;
    filter: drop-shadow(0px 0px 4px #7cffaf)
            drop-shadow(0px 0px 4px #7cffaf);
}

.box1{
    position: absolute;
    width: 70%;
    top: 10vw;
    left: 1%;
    font-family: sans-serif;
}

.box1 h1{
    text-align: center;
    color: #fff;
    font-size: 5.2vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.box1 h3{
    color: #fff;
    padding: 4% 0 0 4%;
    position: inherit;
    width: 75%;
    font-weight: 200;
    font-size: 2.3vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.img1{
    height: 40vw;
    width: 40vw;
    position: absolute;
    top: 85vw;
    left: 3%;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 3px #7cffaf)
            drop-shadow(0px 0px 3px #7cffaf);
}

.img2{
    height: 40vw;
    width: 40vw;
    position: absolute;
    top: 206vw;
    left: 56%;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 3px #7cffaf)
            drop-shadow(0px 0px 3px #7cffaf);
}

.box2{
    position: absolute;
    width: 55%;
    top: 80vw;
    left: 44%;
    font-family: sans-serif;
}

.box2 h1{
    text-align: center;
    color: #fff;
    font-size: 5.2vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.box2 h3{
    color: #fff;
    padding: 4% 0 0 10%;
    position: inherit;
    width: 85%;
    font-weight: 200;
    font-size: 2.5vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.box3{
    position: absolute;
    top: 145vw;
    font-family: sans-serif;
}

.box3 h1{
    text-align: center;
    color: #fff;
    font-size: 5.2vw;
    margin: 0 10% 0 10%;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.box3 h3{
    color: #fff;
    margin: 0 25% 0 25%;
    padding: 3% 0 0 0;
    position: inherit;
    font-weight: 200;
    font-size: 2.5vw;
    text-align: center;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.box4{
    position: absolute;
    top: 200vw;
    left: 1%;
    width: 80%;
    font-family: sans-serif;
}

.box4 h1{
    position: relative;
    text-align: start;
    color: #fff;
    font-size: 5.2vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.box4 h3{
    color: #fff;
    margin: 0 25% 0 0;
    padding: 6% 6% 0 2%;
    position: inherit;
    font-weight: 200;
    font-size: 2vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.box5{
    position: absolute;
    top: 45vw;
    width: 122%;
    font-family: sans-serif;
}

.box5 h1{
    text-align: center;
    color: #fff;
    font-size: 5vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

/* footer */

footer{
    background-image: url(src/footer.jpg);
    background-size: contain;
    height: 3vw;
}

.footername{
    user-select: none;
    cursor: default;
    position: relative;
    font-family: sans-serif;
    font-size: 2vw;
    bottom: 2.7vw;
    width: 13%;
    padding: 0.5% 0 0 1%;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

footer .endbar{
    border-bottom: 2px solid #ede74b;
    width: 90%;
    margin: 0 5%; 0 5%;
    bottom: 10vw;
    position: relative;
    display: flex;
    left: 0;
    border-radius: 50%;
}

.instagram{
    font-size: 2.3vw;
    color: #fff;
    position: relative;
    text-decoration: none;
    left: 96%;
    z-index: 100;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 5px #000)
            drop-shadow(0px 0px 5px #000);
}

.instagram:hover{
    color: #000;
    filter: drop-shadow(0px 0px 7px #7cffaf)
            drop-shadow(0px 0px 7px #7cffaf);
}

footer h1{
    user-select: none;
    color: #fff;
    font-size: 1.3vw;
    width: 33%;
    position: relative;
    left: 14%;
    bottom: 4.5vw;
    font-family: sans-serif;
    cursor: default;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

footer h2{
    user-select: none;
    color: #fff;
    font-size: 1.3vw;
    position: relative;
    left: 48%;
    width: 25%;
    bottom: 6vw;
    font-family: sans-serif;
    cursor: default;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

footer h4{
    user-select: all;
    color: #fff;
    font-size: 1.3vw;
    position: relative;
    left: 74%;
    width: 22%;
    bottom: 7.5vw;
    font-family: sans-serif;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

/* comments */

.comment{
    position: absolute;
    width: 55%;
    top: 55vw;
    font-family: sans-serif;
}

.comment h1{
    color: #fff;
    padding: 4% 0 0 15%;
    position: inherit;
    width: 75%;
    font-weight: 200;
    font-size: 2.5vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.comment h3{
    color: #fff;
    padding: 2.5% 0 0 15%;
    position: inherit;
    width: 55%;
    top: 5vw;
    font-weight: 200;
    font-size: 1.3vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.comment .bar{
    border-right: 2px solid #ede74b;
    height: 14vw;
    position: absolute;
    left: 12%;
    top: 1vw;
    border-radius: 50%;
}

.comment1{
    position: absolute;
    width: 55%;
    top: 55vw;
    font-family: sans-serif;
}

.comment1 h1{
    color: #fff;
    padding: 4% 0 0 15%;
    position: inherit;
    width: 75%;
    left: 73%;
    font-weight: 200;
    font-size: 2.5vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.comment1 h3{
    color: #fff;
    padding: 2.5% 0 0 15%;
    position: inherit;
    width: 55%;
    top: 5vw;
    left: 73%;
    font-weight: 200;
    font-size: 1.3vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}
    
.comment1 .bar1{
    border-right: 2px solid #ede74b;
    height: 14vw;
    position: absolute;
    left: 85%;
    top: 1vw;
    border-radius: 50%;
}

/* buttons */

.box1 .btn1{
    position: inherit;
    left: 15%;
    top: 195%;
    width: 35%;
    text-align: center;
    filter: drop-shadow(0px 0px 4px #ede74b);
}

.box2 .btn2{
    position: inherit;
    left: 25%;
    top: 49vw;
    width: 43%;
    text-align: center;
    filter: drop-shadow(0px 0px 4px #ede74b);
}

.box3 .btn3{
    position: inherit;
    right: 40vw;
    left: 33vw;
    width: 28%;
    text-align: center;
    top: 44vw;
    filter: drop-shadow(0px 0px 4px #ede74b);
}

.box5 .btn5{
    position: inherit;
    right: 46vw;
    left: 33vw;
    width: 29%;
    text-align: center;
    top: 32vw;
    filter: drop-shadow(0px 0px 4px #ede74b);
}

.container a{
    position: relative;
    background: #444;
    color: #fff;
    text-decoration: none;
    font-size: 2.5vw;
    letter-spacing: 0.1em;
    padding: 10px 30px;
    transition: 0.4s ease-in-out;
}

.container a:hover{
    background: var(--clr);
    color: var(--clr);
    box-shadow: 0 0 35px var(--clr);
    letter-spacing: 0.25em;
}

.container a::before{
    content: '';
    position: absolute;
    inset: 2px;
    background: #27282c;
}

.container span{
    position: relative;
    z-index: 1;
}

.container a i{
    position: absolute;
    inset: 0;
    display: block;
}

.container a i::before{
    content: '';
    position: absolute;
    top: -1.25vw;
    left: 80%;
    width: 1vw;
    height: 1vw;
    border: 0.4vw solid var(--clr);
    border-radius: 50%;
    background: #27282c;
    transform: translateX(-50%);
    transition: 0.4s;
}

.container a:hover i::before{
    width: 20px;
    left: 20%;
}

.container a i::after{
    content: '';
    position: absolute;
    bottom: -1.25vw;
    left: 20%;
    width: 1vw;
    height: 1vw;
    border: 0.4vw solid var(--clr);
    border-radius: 50%;
    background: #27282c;
    transform: translateX(-50%);
    transition: 0.4s;
}

.container a:hover i::after{
    width: 20px;
    left: 80%;
}

@media (max-width:720px){
    html, body{
        height: 445vw;
    }
    
    .menu-list{
    display: contents;
    }
    
    .container a i::after{
        bottom: -2.25vw;
        width: 2vw;
        height: 2vw;
        border: 0.8vw solid var(--clr);
    }
    
    .container a i::before{
        top: -2.25vw;
        width: 2vw;
        height: 2vw;
        border: 0.8vw solid var(--clr);
    }
    
    .box1{
        width: 90%;
        left: 5%;
        right: 5%;
        top: auto;
    }

    .box1 h1{
        font-size: 7.2vw;
    }

    .box1 h3{
        width: 80%;
        right: 10%;
        text-align: center;
        font-size: 3.5vw;
        font-weight: 600;
    }
    
    .box1 .btn1{
        left: 8%;
        top: 50vw;
        width: 40%;
        padding: 4%;
        font-size: 3.5vw;
    }
    
    .box2{
        width: 94%;
        top: 145vw;
        left: 3%;
        right: 3%;
        text-align: center;
    }

    .box2 h1{
        font-size: 6.8vw;
    }

    .box2 h3{
        padding: 4% 0 0 25%;
        width: 80%;
        right: 10%;
        font-size: 3.5vw;
        font-weight: 600;
    }
    
    .box2 .btn2{
        left: 24%;
        top: 58vw;
        width: 45%;
        padding: 4%;
        font-size: 3.5vw;
    }

    .box3{
        top: 230vw;
    }

    .box3 h1{
        font-size: 5.8vw;
        width: 100vw;
        margin: 0 0 0 0;
    }

    .box3 h3{
        margin: 0 4% 0 4%;
        font-size: 3.5vw;
        font-weight: 600;
    }
    
    .box3 .btn3{
        left: 24%;
        width: 45%;
        top: 50vw;
        padding: 4%;
        font-size: 3.5vw;
    }

    .box4{
        top: 305vw;
        width: 80%;
        left: 10%;
        right: 10%;
    }

    .box4 h1{
        width: 120%;
        right: 10%;
        font-size: 8.7vw;
    }

    .box4 h3{
        font-weight: 600;
        text-align: center;
        margin: 0 0 0 0;
        padding: 4% 0 0 0;
        font-size: 3.5vw;
    }

    .box5{
        padding: 10% 0 0 0;
        top: 62vw;
        width: 100%;
        margin: 0 0 0 0;
        font-family: sans-serif;
    }

    .box5 h1{
        text-align: center;
        font-size: 5.4vw;
        margin: 0 0 0 0;
    }
    
    .box5 .btn5{
        left: 24%;
        top: 52vw;
        width: 45%;
        padding: 4%;
        font-size: 3.5vw;
    }
    
    .container a:active i::after{
    }
    
    .container a:active i::before{
    }
    
    .container a:active{
    }
    
    .logo{
        width: 30%;
        top: 70vw;
        left: 63%;
        filter: drop-shadow(0px 0px 2px #7cffaf)
               drop-shadow(0px 0px 2px #7cffaf);
    }

    .logo:hover{
        filter: drop-shadow(0px 0px 3px #7cffaf)
                drop-shadow(0px 0px 4px #7cffaf);
    }

    .comment1{
        top: 95vw;
        left: 6vw;
    }
    
    .comment1 h1{
        padding: 8% 0 0 4%;
        width: 88%;
        left: 78%;
        font-size: 4.7vw;
        font-weight: 600;
    }

    .comment1 h3{
        padding: 6% 0 0 0;
        width: 83%;
        top: 8vw;
        left: 82%;
        font-size: 2.6vw;
        font-weight: 600;
    }

    .comment1 .bar1{
        top: 4vw;
        left: 43.5vw;
        height: 33vw;
        border-right: 3px solid #ede74b;
    }
    
    .comment{
        top: 95vw;
    }
    
    .comment h1{
        left: 3vw;
        padding: 8% 0 0 0;
        width: 98%;
        font-size: 4.6vw;
        font-weight: 600;
    }

    .comment h3{
        padding: 6% 0 0 0;
        width: 83%;
        top: 8vw;
        left: 3vw;
        font-size: 2.8vw;
        font-weight: 600;
    }

    .comment .bar{
        top: 4vw;
        left: 1.5vw;
        height: 33.5vw;
        border-right: 3px solid #ede74b;
    }
    
    footer{
        background-image: url(src/footer.jpg);
        background-size: contain;
        height: 11vw;
    }
    
    .footername{
        top: -6.8vw;
        padding: 0 0 0 0.8%;
        font-size: 4vw;
        width: 27%;
    }

    footer .endbar{
        border-bottom: 3px solid #ede74b;
        top: -22vw;
    }

    .instagram{
        font-size: 7vw;
        left: 92.5%;
        top: 1.5vw;
    }

    footer h1{
        font-size: 1.88vw;
        left:1%;
        top: -5.5vw;
        width: 48%;
    }

    footer h2{
        font-size: 3.35vw;
        left: 29%;
        top: -13.1vw;
        width: 63%;
    }

    footer h4{
        font-size: 2.7vw;
        left: 48%;
        top: -12.3vw;
        width: 45%;
    }
    
    .img1{
        height: 90vw;
        width: 90vw;
        top: 93vw;
        left: 5%;
    }
    
    .img2{
        height: 90vw;
        width: 90vw;
        top: 256vw;
        left: 5%;
    }  

    nav ul li{
        font-family: monospace;
        font-weight: 550;
        margin: 0 0 0 2vw;
    }

    nav ul li .name{
        margin: 0 2vw 0 -1.8vw;
        font-size: 150%;
        cursor: default;
        filter: drop-shadow(0px 0px 2px #ede74b)
                drop-shadow(0px 0px 2px #7cffaf)
                drop-shadow(0px 0px 2px #ede74b);  
    }

    nav ul li a{
        color: #4b93c5;
        transition: 0.2s ease-in-out;
    }

    nav ul li a:hover{
        filter: drop-shadow(0px 0px 2px #ede74b)
                drop-shadow(0px 0px 2px #ede74b)
                drop-shadow(0px 0px 2px #ede74b)
                drop-shadow(0px 0px 2px #ede74b);
    }

    nav ul li h1{
        user-select: all;
        font-size: 120%;
        color: #fff;
        position: absolute;
        width: 28%;
        top: 0.18vw;
        right: 0;
        filter: drop-shadow(0px -1px 2px #000)
                drop-shadow(0px -1px 2px #000);
    }

    #whatsapp{
        position: relative;
        top: 0.15vw;
        font-size: 110%;
        color: #4fc95d;
        margin: 0 6% 0 0;
    }
    
    #email{
        font-size: 140%;
        top: 20vw;
        left:  0;
    }
    
    .bars{
        display: contents;
    }
    
    /* header */
    
    nav ul li a{
        display: none;
    }
    
    nav li h1{
        display: none;
    }
    
    #whatsapp{
        display: none;
    }
    
    nav ul li .name{
        font-size: 9vw;
        padding: 0 0 0 3%;
        width: 105%;
        filter: drop-shadow(0px 0px 1.5px #ede74b)
                drop-shadow(0px 0px 1.5px #7cffaf)
                drop-shadow(0px 0px 1.5px #ede74b);  
    }

    #menu {
        display: none;
    }

    input:checked ~ .menu{
        height: 100%;
        width: 100%;
    }

    .menu-list a{
        position: relative;
        display: block;
        text-align: center;
        font-size: 8vw;
        top: 10vw;
        width: 98%;
        height: 18vw;
        margin: 0 0 3% 0;
        border-radius: 6%;
    }
    
    .menu-list h1{
        position: relative;
        display: block; 
        font-size: 5vw;
        top: -10vw;
        left: 10vw;
        width: 62.6%;
        border-radius: 6%;
        padding: 0 0 0 15%;
        margin: 0 0 10% 0;
        transition: 0.1s ease-in;
    }

    .menu{
        background-color: rgba(47, 2, 2, 0.49);
        overflow: hidden;
        position:fixed;
        display: grid;
        align-content: center;
        width: 0;
        height: 0;
        top: 0;
        left: vw;
        border-radius: 2%;
        z-index: 110;
        transition: 0.3s ease-in-out;
    }

    #whatsapp-menu{
        position: relative;
        font-size: 120%;
        color: #4fc95d;
        margin: 0 6% 0 0;
    }
    
    .menu-logo{
        display: none;
        /*z-index: 300;
        display: none;
        position: absolute;
        width: 20%;
        top: 1%;
        left: 7%;
        filter: drop-shadow(0px 0px 2px #7cffaf)
                drop-shadow(0px 0px 3px #7cffaf);*/
    }
    
    .menu-list label:hover, 
    .menu-list label:active{
        z-index: 400;
        cursor: pointer;
    }
    
    .up{
        width: 6%;
        bottom: 13vw;
        position: absolute;
        display: flex;
        justify-content: center;
        left: 76.5vw;
        height: 1%;
        font-size: 10vw;
        color: #4b93c5;
        transition: .5s;
        z-index: 300;
        filter: drop-shadow(0px 0px 1.5px #ede74b)
                drop-shadow(0px 0px 1.5px #7cffaf)
                drop-shadow(0px 0px 1.5px #ede74b);  
    }

    .middle{
        width: 6%;
        position: absolute;
        display: flex;
        bottom: 9.9vw;
        left: 78vw;
        justify-content: center;
        height: 1%;
        font-size: 10vw;
        color: #514587;
        transition: .3s;
        z-index: 300;
        filter: drop-shadow(0px 0px 3px #7cffaf)
                drop-shadow(0px 0px 4px #7cffaf)
                drop-shadow(0px 0px 3px #7cffaf);   
    }

    .bottom{
        width: 6%;
        position: absolute;
        display: flex;
        bottom: 7vw;
        left: 75vw;
        height: 1%;
        font-size: 10vw;
        color: #4b93c5;
        transition: .5s;
        z-index: 300;
        filter: drop-shadow(0px 0px 1.5px #ede74b)
                drop-shadow(0px 0px 1.5px #7cffaf)
                drop-shadow(0px 0px 1.5px #ede74b);  
    }

    input:checked ~ .up{
        color: red;
        transform: rotate(45deg) translate(135%);
        filter: none;
    }

    input:checked ~ .middle{
        transform: translateX(100%);
        color: transparent;
        /*filter: none;*/
    }

    input:checked ~ .bottom{
        color: red;
        transform: rotate(-45deg) translate(-18%);
        filter: none;
    }
}