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

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

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

.img{
    display: none;
}

.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;
}

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

.contact{
    position: absolute;
    top: 15vw;
    left: 15%;
    right: 15%;
    width:70%;
}

.form-group{
    margin-bottom:4vh;
    transition:all .3s;
}

.form-label{
    font-size:5vw;
    color:var(--font-color);
    display:block;
    opacity:0;
    transition: all .3s;
    color: #fff;
}

.form-control{
    border-radius: 5px;
    border:2.5px solid #ede74b;
    border-style: none none solid;
    width:100%;
    font-size:2.2vw;
    transition:all .6s;
    background-color: rgba(255, 255, 255, 0);
}

.form-control::placeholder{
    color:#fff;
}

.form-control:focus{
    box-shadow:none;
    border-color:var(--font-hover-color);
    outline:none;
}

.form-group:focus-within{
    transform:scale(1.1,1.1);
    color: #fff;    
}

.form-control:invalid:focus{
    border-color:#ede74b;
}

.form-control:valid:focus{
    border-color:#08ef08;
}

.focused > .form-label{
    opacity:1;
    color: #fff;
    transform:translateX(0px);
}

/* 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); 
}

/* buttons */ 

.button .btn1{
    border: none;
    position: absolute;
    cursor: pointer;
    left: 32.5%;
    right: 32.5%;
    width: 35%;
    text-align: center;
    filter: drop-shadow(0px 0px 4px #ede74b);
}

.container button{
    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 button:hover{
    background: var(--clr);
    color: var(--clr);
    box-shadow: 0 0 35px var(--clr);
    letter-spacing: 0.25em;
}

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

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

.container button .btn{
    position: absolute;
    inset: 0;
    display: block;
}

.container button .btn::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 button:hover .btn::before{
    width: 20px;
    left: 20%;
}

.container button .btn::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 button:hover .btn::after{
    width: 20px;
    left: 80%;
}

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

.container button 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 button:hover i::before{
    width: 20px;
    left: 20%;
}

.container button 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 button:hover i::after{
    width: 20px;
    left: 80%;
}

/* footer */

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

.footername{
    bottom: 2.7vw;
    user-select: none;
    cursor: default;
    position: relative;
    font-family: sans-serif;
    font-size: 2vw;
    padding: 0.5% 0 0 0.2%;
    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%;
    top: 0;
    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{
    width: 35%;
    user-select: none;
    color: #fff;
    font-size: 1.3vw;
    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{
    width: 26%;
    user-select: none;
    color: #fff;
    font-size: 1.3vw;
    position: relative;
    left: 48%;
    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{
    width: 23%;
    user-select: all;
    color: #fff;
    font-size: 1.3vw;
    position: relative;
    left: 74%;
    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);
}

@media (max-width:720px){
    
    html, body{
        height: 320vw;
    }
    
    .menu-list{
        display: contents;
    }

    .logo{
        width: 22%;
        top: 19vw;
        left: 10%;
    }
    
    .img{
        display: flex;
    }
    
    .img{
        position: absolute;
        width: 90%;
        left: 5%;
        top: 218vw;
        transition: 0.3s ease-in-out;
        filter: drop-shadow(0px 0px 3px #7cffaf)
                drop-shadow(0px 0px 3px #7cffaf);
    }

    .img:hover,
    .img:active{
        filter: drop-shadow(0px 0px 7px #7cffaf)
                drop-shadow(0px 0px 7px #7cffaf);
    }

    .contact{
        top: 35vw;
        left: 5%;
        width:90%;
    }

    .form-label{
        font-size:9.5vw;
    }

    .form-control{
        font-size:5.5vw;
    }
    
    .button .btn1{
        top: 101%;
        left: 22%;
        width: 55%;
        padding: 9%;
        font-size: 7vw;
    }
    
    .container button i::after{
        bottom: -2.25vw;
        width: 2vw;
        height: 2vw;
        border: 0.8vw solid var(--clr);
    }
    
    .container button i::before{
        top: -2.25vw;
        width: 2vw;
        height: 2vw;
        border: 0.8vw solid var(--clr);
    }

    /* header */
    
    nav ul li a{
        display: none;
    }
    
    nav li h1{
        display: none;
    }
    
    #whatsapp{
        display: none;
    }
    
    #email{
        position: relative;
        font-size: 140%;
        left: 0;
        top: 15vw;
    }
    
    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;
        width: 98%;
        top: 5vw;
        height: 11vw;
        padding: 6% 0 0 0;
        margin: 0 0 2% 0;
        border-radius: 6%;
    }
    
    .menu-list h1{
        position: relative;
        display: block; 
        font-size: 5vw;
        width: 62.6%;
        left: 10vw;
        top: -13vw;
        border-radius: 6%;
        padding: 0 0 0 15%;
        margin: 5% 0 5% 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;
        border-radius: 2%;
        z-index: 110;
        transition: 0.3s ease-in-out;
    }

    #whatsapp-menu{
        position: relative;
        top: 0.15vw;
        font-size: 120%;
        color: #4fc95d;
        margin: 0 6% 0 0;
    }
    
    .menu-logo{
        display: none;
        /*z-index: 300;
        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;
    }
    
    /* footer */

     footer{
        height: 11vw;
    }
    
    .footername{
        top: -7vw;
        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:  1vw;
    }

    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%;
    }
}