* {
    animation-duration: 1.5s !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
    animation-direction: alternate !important;
    animation-delay: 0s !important;
    animation-timing-function: ease-in-out;
}

body {
    background: black;
    font-family: 'Roboto Mono';
    font-size: 1rem;
}

* {
    max-width: 100vw;
    overflow-x: hidden !important;
    overflow-y: visible;
}

.text {
    background: black;
    height: auto;
    width: 70vw;
    max-width: fit-content;
    margin: auto;
    z-index: 20;
    margin-bottom: 20px;
    color: white;
    font-size: 1.4rem !important;
}

.pexelsDisclaimer {
    color: white;
    margin: auto;
    margin-bottom: 500px;
    text-align: center;
    font-size: 0.9rem;
}

a {
    color: white;
    font-size: 1.4rem;
}

@keyframes rollIn {
    from {
        -webkit-transform: translateX(-300px)rotateZ(-90deg);
        transform: translateX(-300px)rotateZ(-90deg);
        background: black;
    }

    30% {
        -webkit-transform: translateX(-150px)rotateZ(-50deg);
        transform: translateX(-150px)rotateZ(-50deg);
        background: rgb(11, 41, 35);
    }

    60% {
        -webkit-transform: translateX(0px)rotateZ(0deg);
        transform: translateX(0px)rotateZ(0deg);
        background: rgb(254, 254, 254);
    }
}

@keyframes rollInRight {
    from {
        -webkit-transform: translateX(300px)rotateZ(90deg);
        transform: translateX(300px)rotateZ(90deg);
        background: black;
    }

    30% {
        -webkit-transform: translateX(150px)rotateZ(50deg);
        transform: translateX(150px)rotateZ(50deg);
        background: rgb(11, 41, 35);
    }

    60% {
        -webkit-transform: translateX(0px)rotateZ(0deg);
        transform: translateX(0px)rotateZ(0deg);
        background: rgb(255, 255, 255);
    }

}

.shape {
    width: 100px;
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    animation-name: rollIn;
    margin: auto;
    background: rgb(255, 255, 255);
    margin-bottom: 400px;
}

.right {
    animation-name: rollInRight;
}

@keyframes titles {
    00% {

        font-size: 15pt;
        opacity: 0.3;
        color: black;
        font-weight: 100;
    }

    60% {

        font-size: 20pt;
        opacity: 1;
        color: white;
        font-weight: 400;
    }

    100% {

        font-size: 20pt;
        opacity: 1;
        color: white;
        font-weight: 400;
    }
}

h2 {
    animation-name: titles;
    color: white;
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 12pt;
}


.extraSpace {
    height: 500px;
    width: 200px;
    margin: auto;
}

/* From and to are not necessary, only for the demonstration without script*/
@keyframes blur {
    from {
        filter: blur(10px)saturate(20%);
        opacity: 0.5;
        /* border: 2px solid white; */
    }

    20% {
        filter: blur(10px)saturate(20%);
        opacity: 0.5;
        /* border: 2px solid white; */
    }

    40% {
        filter: blur(0px);
        opacity: 1;
        /* border: 2px solid grey; */
    }

    to {
        filter: blur(0px);
        opacity: 1;
        /* border: 2px solid grey; */
    }
}

/* From and to are not necessary, only for the demonstration without script*/
@keyframes flip-horizontal {
    from {
        transform: rotateX(90deg);
        border-width: 3px;
        border-color: blue;
    }

    20% {
        transform: rotateX(90deg);
        border-width: 3px;
        border-color: blue;
    }

    30% {
        transform: rotateX(40deg);
        border-width: 5px;
        border-color: blue;
    }

    60% {
        transform: rotateX(0deg);
        border-width: 3px;
        border-color: rgb(255, 25, 0);
    }

    to {
        transform: rotateX(0deg);
        border-width: 3px;
        border-color: rgb(255, 25, 0);
    }
}

/* From and to are not necessary, only for turning the script off */
@keyframes flip-vertical {
    from {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }

    20% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }

    30% {
        -webkit-transform: rotateY(40deg);
        transform: rotateY(40deg);
    }

    60% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

}

.cards {
    max-width: 1200px;
    height: fit-content;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit,
            minmax(200px, 1fr));
    margin-bottom: 100px;
    grid-auto-flow: dense;
}

.card {
    position: relative;
    background-color: dodgerblue;
    color: white;
    padding: 0px;
    height: 8rem;
    width: auto;
    border-radius: 10px;
    animation: blur 2s;
    animation-fill-mode: forwards;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    object-fit: cover;
}

.beach,
.turtle {
    overflow: hidden;
    position: relative;
    max-width: 100vw;
    max-width: calc(min(100vw, 800px));
    margin: auto;
    height: fit-content;
}

.beach {
    animation-name: clipPath;
}

.beach img,
.turtle img {
    min-height: 100%;
    max-width: 100vw;
    max-width: calc(min(100vw, 800px));

}

.turtle {
    animation-name: clipPath2;
}


.credits {
    height: fit-content;
    background: none;
    font-family: sans-serif;
    position: absolute;
    margin: auto;
    left: 0px;
    text-align: center;
    bottom: 0px;
    padding-top: 1px;
    padding-bottom: 2px;
    font-size: 0.8rem;
    width: 100%;
    background: rgba(21, 46, 61, 0.362);
    backdrop-filter: blur(0.5vw)brightness(100%);
    /* -webkit-mask-image: linear-gradient(transparent, black);
    mask-image: linear-gradient(transparent, black 30%); */
    word-wrap: wrap;
    word-break: break-all;
    color: rgba(255, 255, 255, 0.914);
    mix-blend-mode: luminosity;
}

.credits a {
    background: none;
    font-family: sans-serif;
    color: rgba(255, 255, 255, 0.611);
    font-size: 0.5rem;
    font-weight: 500;
}


.wideCard {
    grid-column: span 2;
    animation-name: flip-horizontal;
}

.highCard {
    grid-row: span 2;
    height: 17rem;
    animation-name: flip-vertical;
}

/* From and to are not necessary, only for turning the script off */
@keyframes clipPath {
    0% {
        clip-path: circle(20%);
        /* clip-path: ellipse(30% 40% at 10% 50%); */
        /* clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); */
    }

    20% {
        clip-path: circle(20%);
        /* clip-path: ellipse(30% 40% at 10% 50%); */
        /* clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); */
    }

    50% {
        clip-path: circle(40%);
        /* clip-path: ellipse(30% 40% at 40% 50%); */
        /* clip-path: polygon(20% 0, 100% 50%, 50% 100%, 0 50%); */
    }

    80% {
        clip-path: circle(100%);
        /* clip-path: ellipse(90% 90% at 50% 50%); */
        /* clip-path: polygon(0% 0, 100% 50%, 50% 100%, 0 50%); */
    }

    100% {
        clip-path: circle(100%);
        /* clip-path: ellipse(90% 90% at 50% 50%); */
        /* clip-path: polygon(0% 0, 100% 50%, 50% 100%, 0 50%); */
    }
}

/* From and to are not necessary, only for turning the script off */
@keyframes clipPath2 {
    from {
        clip-path: polygon(50% 0%, 50% 0%, 70% 50%, 30% 50%);
    }

    10% {
        clip-path: polygon(50% 0%, 50% 0%, 70% 50%, 30% 50%);
    }

    40% {
        clip-path: polygon(45% 0%, 55% 0%, 80% 60%, 20% 60%);
    }

    60% {
        clip-path: polygon(00% 0%, 100% 0%, 100% 100%, 0% 100%);

    }

    to {
        clip-path: polygon(00% 0%, 100% 0%, 100% 100%, 0% 100%);

    }

}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: 0s !important;
    }
}