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

body {
    font-family: "Poppins", sans-serif;
}

main {
    height: 100vh;
    width: 100vw;
    margin:10px;
}

.hero {
    background-color: skyblue;
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    max-width: 1250px;
    max-height: 700px;
    margin-left: auto;
    margin-right: auto;
}

.centered {
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
    color: #222021;
    margin:10px;
}

.parallax{
    pointer-events: none;
    transition: 0.45s cubic-bezier(0.2, 0.49, 0.32, 0.99);    
}

.bg-top{
    position:absolute;
    width: 1500px;
    top:  calc(50% - 250px);
    left: calc(50% - 0px);
    z-index: 0;
    transform: translate(-50%, -50%);
}


 .bg-bottom{
    position:absolute;
    width: 1500px;
    top:  calc(50% + 186px);
    left: calc(50% - 0px);
    z-index: 1;
    transform: translate(-50%, -50%);
}


.right-1{
    position:absolute;
    width: 1200px;
    top:  calc(50% + 125px);
    left: calc(50% - 0px);
    z-index: 2;
    transform: translate(-50%, -50%);
}

.right-2{
    position:absolute;
    width: 403px;
    top:  calc(50% + 77px);
    left: calc(50% + 270px);
    z-index: 2;
    transform: translate(-50%, -50%);
}


.left-3{
    position:absolute;
    width: 368px;
    top:  calc(50% + 268px);
    left: calc(50% - 415px);
    z-index: 4;
    transform: translate(-50%, -50%);
}

.right-3{
    position:absolute;
    width: 178px;
    top:  calc(50% + 34px);
    left: calc(50% + 153px);
    z-index: 4;
    transform: translate(-50%, -50%);
}

.left-4{
    position:absolute;
    width: 75px;
    top:  calc(50% + 253px);
    left: calc(50% - 231px);
    z-index: 6;
    transform: translate(-50%, -50%);
}

.right-4{
    position:absolute;
    width: 268px;
    top:  calc(50% + 306px);
    left: calc(50% + 466px);
    z-index: 6;
    transform: translate(-50%, -50%);
}

.left-5{
    position:absolute;
    width: 550px;
    top:  calc(50% + 246px);
    left: calc(50% - 194px);
    z-index: 7;
    transform: translate(-50%, -50%);
}


.right-5{
    position:absolute;
    width: 52px;
    top:  calc(50% + 263px);
    left: calc(50% + 624px);
    z-index: 7;
    transform: translate(-50%, -50%);
}

.left-6{
    position:absolute;
    width: 169px;
    top:  calc(50% + 246px);
    left: calc(50% - 20px);
    z-index: 8;
    transform: translate(-50%, -50%);
}

.right-6{
    position:absolute;
    width: 282px;
    top:  calc(50% + 293px);
    left: calc(50% + 510px);
    z-index: 8;
    transform: translate(-50%, -50%);
}

.left-7{
    position:absolute;
    width: 58px;
    top:  calc(50% + 210px);
    left: calc(50% - 50px);
    z-index: 9;
    transform: translate(-50%, -50%);
}

.right-7{
    position:absolute;
    width: 239px;
    top:  calc(50% + 320px);
    left: calc(50% + 198px);
    z-index: 9;
    transform: translate(-50%, -50%);
}

.left-8{
    position:absolute;
    width: 194px;
    top:  calc(50% + 68px);
    left: calc(50% - 544px);
    z-index: 10;
    transform: translate(-50%, -50%);
}

.text {
    position:absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
    text-align: center;
    color: white; 
    text-shadow: 2px 2px 8px black;
    pointer-events: auto;
}

.text h1 {
    font-weight: 900;
    font-size: 9.4rem;
    line-height: 90%;
}

.text h2 {
    font-weight: 900;
    font-size: 12rem;
    line-height: 90%;
} 

/* .vignette {
    position: absolute;
    z-index: 100;
    width: 1200px;
    height: 900%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 65%, rgba(0, 48, 71, 0.7));
} */