@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.orb {
    animation: float 4s ease-in-out infinite;
}

.letter-spacing {
    letter-spacing: 0.04em;
}

.glow {
    text-shadow:
        0 0 10px #00eaff4f,
        0 0 20px #00eaff62;
}

.media-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 3px;
    margin-bottom: 32px;
    gap: 24px;

    box-shadow: 0 0 30px rgba(0, 234, 255, 0.08);

    .media-image {
        position: relative;
        min-width: 50%;

        .media-screenshot {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 3px;
        }
    }
    p {
        padding: 24px;
        font-size: clamp(16px, 2dvw, 22px);
        color: #d8d8e6;
        text-align: left;
    }
}

.media-container.reverse {
    flex-direction: row-reverse;
    h3 {
        text-align: right;
    }
    p {
        text-align: right;
    }
}

.media-container.color-bullet {
    border: solid 1px #c9004378;
    transition: transform 0.2s ease;
    div h3 {
        color: #c90043;
        text-shadow:
            0 0 10px #ff00004f,
            0 0 20px #ff000062;
    }
}

.media-container.color-bullet:hover {
    border: solid 1px #c90043c6;
    transform: scale(1.005);
}

.media-container.color-explosion {
    border: solid 1px #f54d2b5b;
    transition: transform 0.2s ease;
    div h3 {
        color: #f54b2b;
        text-shadow:
            0 0 10px #ff7b004f,
            0 0 20px #ff7b0062;
    }
}

.media-container.color-explosion:hover {
    border: solid 1px #f54d2bcd;
    transform: scale(1.005);
}

.media-container.color-laser {
    border: solid 1px #5f9aff5a;
    transition: transform 0.2s ease;
    div h3 {
        color: #5f9aff;
        text-shadow:
            0 0 10px #00a6ff4f,
            0 0 20px #00bfff62;
    }
}

.media-container.color-laser:hover {
    border: solid 1px #5f9affc7;
    transform: scale(1.005);
}

.media-image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    background: linear-gradient(to right, rgba(1, 0, 22, 0), rgba(1, 0, 22, 1));
}

.media-container.reverse .media-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 150px;
    background: linear-gradient(to right, rgba(1, 0, 22, 1), rgba(1, 0, 22, 0));
}

/* tablet */
@media (max-width: 930px) {
    .media-container {
        flex-direction: column;
        align-items: center;
        h3 {
            margin: 0 16px;
        }
        p {
            padding: 16px;
        }
    }

    .media-container.reverse {
        flex-direction: column;
        h3 {
            margin: 0 16px;
        }
        p {
            padding: 16px;
        }
    }
}

/* mobile */
@media (max-width: 767px) {
}