@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
    user-select: none;

    &:focus {
        outline: none;
    }
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100vh;
    padding: 0;
    margin: 0;

    background-color: #000000;
}

@keyframes static {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -5%);
    }

    20% {
        transform: translate(-10%, 5%);
    }

    30% {
        transform: translate(5%, -10%);
    }

    40% {
        transform: translate(-5%, 15%);
    }

    50% {
        transform: translate(-10%, 5%);
    }

    60% {
        transform: translate(15%, 0);
    }

    70% {
        transform: translate(0, 10%);
    }

    80% {
        transform: translate(-15%, 0);
    }

    90% {
        transform: translate(10%, 5%);
    }

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

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

    100% {
        transform: translateY(0);
    }
}

@keyframes flicker {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

.scalediv {
    height: fit-content;
    position: relative;

    transition: transform 0.15s ease-in-out;
    &:hover {
        transform: scale(1.05);
    }
}

.domain {
    position: absolute;
    top: 46%;
    left: 40%;
    z-index: 2;

    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;

    font-size: 1.5rem;
    font-family: "Space Mono", monospace;
    /* background: #000000;
    padding: 0 0.5rem; */
    color: white;

    transform: translate(-50%, -50%);

    .e {
        color: gray;
    }
}

.tv-container {
    display: block;
    height: 250px;
    position: relative;

    background: none;
    border: none;
    cursor: pointer;

    transition: transform 0.3s ease-in-out;
    animation: float 3s ease-in-out infinite;

    &:hover {
        .tv-static .static-anim {
            background-color: black;

            /* animation:
                static 0.5s infinite,
                flicker 0.5s infinite; */
        }

        .domain {
            opacity: 1;
        }
    }
}

.tv-static {
    overflow: hidden;
    position: absolute;
    top: 3;
    left: 3%;
    right: 20%;
    bottom: 10%;
}

.static-anim {
    position: relative;
    top: -250%;
    left: -250%;
    width: 500%;
    height: 500%;
    background: #0f0f0f url("https://pre1ude.dev/img/noise.png") repeat 0 0;
    background-repeat: repeat;
    animation: static 0.5s infinite;
    opacity: 0.9;
    transition: background-color 0.3s ease-out;
}

.tv {
    position: relative;
    height: 100%;
    z-index: 1;
}