h1 {
    font-size: 10vw;
    text-align: center;
    font-family: 'Comfortaa', cursive;
    margin-top: 16vh;
    color: #ececec;
    text-shadow: 0vw 0vw 0.7vw #1919c3;
    position: relative;
    z-index: 2;
}

body {
    background-image: url('https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMDkyMnwwfDF8c2VhcmNofDI0fHxncmFkaWVudHxlbnwwfHx8fDE2MzM5MDU2OTg&ixlib=rb-1.2.1&q=80&w=1080');
    background-size: cover;
    overflow: hidden;
}

.particle {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background-image: radial-gradient(circle at right, rgb(86, 118, 172) 0%, rgb(28, 52, 174) 100%);
    position: absolute;
}

.intro-cover {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0vh;
    z-index: 3;
    left: 0vw;
    background-image: linear-gradient(90deg, #5433FF, #20BDFF, #A5FECB);
    opacity: 0;
}

h2 {
    font-family: 'Comfortaa', cursive;
    color: #ececec;
    font-size: 7vw;
    text-align: center;
    margin-top: 12vh;
}

p {
    font-family: 'Assistant', sans-serif;
    font-size: 4vw;
    color: #1c1c1c;
    font-weight: 700;
    text-align: center;
}

.solid-state-cover {
    position: absolute;
    left: 0vw;
    top: 0vh;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    background-image: linear-gradient(90deg, #0052D4, #4364F7, #6FB1FC);
    opacity: 0;
}

.solid-state-particle-holder {
    width: 30vw;
    height: 24vw;
    margin-left: 50%;
    left: -15vw;
    position: absolute;
}

.solid-state-particle {
    width: 6vw;
    height: 6vw;
    background-image: radial-gradient(circle at right, rgb(86, 118, 172) 0%, rgb(28, 52, 174) 100%);
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.particle-holder {
}

.liquid-state-cover {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0vh;
    left: 0vw;
    background-image: linear-gradient(90deg, #5433FF, #20BDFF, #A5FECB);
    z-index: 3;
    opacity: 0;
}