@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700&family=Josefin+Slab:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600;1,700&family=Mulish:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&display=swap');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css);

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

.root{
    --font-primary: "Baloo Da 2", serif;
    --font-secondary:"Josefin Slab", serif;
    --font-action: "Mulish", serif;

}

.hamburger{
    /*background-color: red; */
    width: 2rem;
    height: 2rem;
    position: fixed;
    z-index: 100;
    right: 2rem;
    top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer;
    display: block;
}

.hamburger button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    animation: moveBanner 1s 1.1s forwards;
}

.line{
    width: 100%;
    height: .1rem;
    background-color: #fff;
    box-shadow: 0.1rem 0.1rem 1px #000;


}

header{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;

}

.img-wrapper{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}
.img-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    animation: zoom 20s;

}

.banner{
    position: absolute;
    top:30%;
    left:15%;
}
.banner h1{
    color: #ffffff;
    font-size: 3.5rem;
    font-family: var(--font-primary);
    font-weight: 200;
    text-shadow: .3 rem .4rem 2px rgba(0,0,0,.4);
    line-height: 3.5rem;
    margin-bottom: 2rem;
    opacity:0;
    animation: moveBanner 1s 0.5s forwards;
}

.banner p{
    font-family: var(--font-secondary);
    color: #fff;
    font-size: 2rem;
    text-shadow: .2rem .2rem rgba(0,0,0, .4);
    margin-bottom: 2rem;
    animation: moveBanner 1s 0.7s forwards;

}

.banner button{
    font-family: var(--font-action);
    color: #ffffff;
    text-transform:uppercase;
    letter-spacing: .1rem;
    background: #FF0099;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #493240, #FF0099);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #493240, #FF0099); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 1rem 3rem;
    border: none;
    border-radius: 5px;
    cursor:pointer;
    animation: moveBanner 1s 0.9s forwards;
}

.banner button:hover{
    opacity: 0.8;
    color:black;
}

@keyframes zoom{
    0%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes moveBanner{
    0%{
        transform: translateY(10rem) rotateY(-30deg);
    }
    100%{
        opacity: 1;
        transform: translateY(0) rotateY(0);
    }
}

.sidebar{
    width: 18.5rem;
    height: 100vh;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    right: 0;
    display: none;
}


.menu{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu-item{
    text-align: center;
    margin-bottom: .4rem;
}

.menu-link{
    font-family: var(--font-action);
    font-size: 2rem;
    color: #000000;
    transition: color 1s;
}

.menu-link:hover{
    color: rgb(102, 9, 121);

}

.social-media{
    position: absolute;
    bottom: 2rem;
    width:100%;
    display: flex;
    justify-content: space-evenly;
}

.social-media i{
    color:rgb(102, 9, 121);
    height: 2.5rem;
    width: 2.5rem;
}

.open{
    display: block;
}