html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #1E1F1C;
    color: #75715E;
}

.hidden {
    display: none !important;
}

.content-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    align-content: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    max-width: 1280px;
    padding: 32px 16px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
}

.content-container {

    h1,
    p {
        width: 100%;
        text-align: center;
    }

    a {
        color: #F9273C;
    }

    a:hover {
        color: #66D9EF;
    }
}

.site-info:not(.hidden) {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    padding: 16px;
}

.site-info .site {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(50% - 10px);
    background: #75715E;
    color: #1E1F1C;
    padding: 16px;
}

.site-info a {
    text-decoration: none;
    transition: all 300ms;
}

.site-info a:hover {
    color: #F9273C;
    background: #272822;
    scale: 1.1;
    transition: all 300ms;
}

.dot {
    opacity: 0;
    animation: blink 1.5s infinite;
}

.dot-one {
    animation-delay: 0s;
}

.dot-two {
    animation-delay: 0.3s;
}

.dot-three {
    animation-delay: 0.6s;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}