*{
    margin:0px;
    padding:0px;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, rgb(28, 28, 28) 70%, black);
    height: 100vh;
    flex-direction: column;
    width: 100vw;
}

header{
    height: 10vh;
    display: flex;
    justify-content: center;
    text-align: center;
}
#headerTitle{
    margin-top: 0.5vw;
    color: white;
    font-size: 3vw;
}

.title{
    text-align: center;
    position: relative;
}
.title h1{
    position: absolute;
    left: 27.8vw;
    top: 14vh; /* You can adjust this value for vertical positioning */
    transform: translate(-53%); /* Translate to center horizontally */
    color: rgb(255, 255, 255);
    animation: zoom-in 1.8s cubic-bezier(1, 0, 0, 1) forwards;
}

.arrowLeft, .arrowRight, .mainButton{
    position: absolute;
    text-align: center;
    color:white;
}
.arrowLeft{
    left:18.5vw;
    top:38vh;
}
.arrowRight{
    left:79.5vw;
    top:38vh;
}
.arrowLeft:hover, .arrowRight:hover{
    cursor: pointer;
}
.arrowLeft p, .arrowRight p{
    font-size: 3vw;
}

.mainButton{
    left: 24.5vw;
    top: 14vh;
    width:2.7vw;
    height: 3vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: 0.1vw;
    cursor: pointer;
}

#block1, #block2, #block3, #block4{
    width: 0.9vw;
    height: 0.9vw;
    background: white;
    border: 0.2vw solid black;
    border-radius: 50vw;
    margin: 0vw;
    padding:0vw;
}

main{
    height: 60vh;
}
main img{
    box-shadow: 0px 0px 3vw black;
    border-radius: 4vw;
    width: 54.6vw;
}

footer{
    height: 10vw;
    background-color: rgb(55, 55, 55);
    margin-bottom: 10vh;
    margin-left: 0.1vh;
    width: 54.6vw;
    display: flex;
    justify-content: space-evenly;
    color: white;
    box-shadow: 0px 0px 4vw black;
}
footer div{
    margin:2vw 0px 0px;
    text-align: center;
}

h2{
    font-size:1vw;
    margin: 0px 0px 0.5vw 0px;
}
#theCreatorTitle{
    margin-bottom: 0px;
}

p{
    font-size: 0.7vw;
}

#creator{
    border: 0px solid transparent;
    border-radius: 4vw;
    width: 4vw;
}


@keyframes zoom-in{
    0%{
        font-size: 0.1vw;
    }
    100%{
        font-size: 2.5vw;
    }
}