:root {
    --g1: rgb(0, 234, 144);
    --g2: rgb(3, 88, 255);
}

@keyframes background-pan {
    from {
        background-position: 0% center;
    }

    to {
        background-position: -200% center;
    }
}

body {
    animation: background-pan 10s linear infinite;
    background: linear-gradient(
            to right,
            var(--g1),
            var(--g2),
            var(--g1)
    );
    background-size: 200%;
    height: 100vh;
    overflow: hidden;
    margin: 0px;
}

body.toggled {
    animation: none;
}

body.toggled > #title {
    opacity: 0;
}

body.toggled > #title2 {
    opacity: 1;
}

body.toggled > #tiles > .tile:hover {
    opacity: 0.1 !important;
}

.centered {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

#tiles {
    height: calc(100vh - 1px);
    width: calc(100vw - 1px);
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
}

.tile {
    cursor: pointer;
    position: relative;
}

.tile:hover:before {
    background-color: rgb(30, 30, 30);
}

.tile:before {
    background-color: rgb(15, 15, 15);
    content: "";
    inset: 0.5px;
    position: absolute;
}

#title, #title2 {
    color: white;
    font-family: "Rubik", sans-serif;
    font-size: 6vw;
    margin: 0px;
    pointer-events: none;
    transition: opacity 1200ms ease;
    width: 50vw;
}

#title {
    z-index: 3;
}

#title2 {
    opacity: 0;
    z-index: 1;
}