:root {
    background-color: #000;
    color: #FFF;
    font-family: shit;
}

body {
    margin: 0;
}

@font-face {
    font-family: dip;
    src: url(/MeninBlue.ttf);
}

@font-face {
    font-family: shit;
    src: url(/NimbusMonoPS-Regular.otf);
}

.title-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    
.title-section {
    text-align: center;
    color: #6100FF;
    margin: 2em;
}

.title-section h1 {
    animation: flicker_on_1 4s cubic-bezier(.69,-0.16,0,1.19);
    font-size: 3em;
    font-family: dip;
}

.subtitle {
    animation: hide_for 4s;
}

/* noscript steals attributes but can't be selected in css. curse you w3! */
.subtitle > *, .noscript-subtitle {
    display: inline;
    font-size: 2rem;
}

.blinking-cursor {
    animation: blink 1s steps(1) 5.5s infinite;
}

#taglinepadding {
    color: #0000;
}

.title-section img {
    animation: flicker_on_1 3s steps(100);
    width: 20em;
    height: 20em;
}

.primary-bg {
    animation: flicker_on_2 3s;
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(
        256deg, 
        #0000 0%,
        #0000 50%,
        #6100FF69 69%, 
        #0000 100%
    );
}

.secondary-bg {
    position: absolute;
    min-width: 100%;
    min-height: 100vh;
    background: linear-gradient(
        170deg, 
        #0000 0%,
        #0000 20%,
        #6100FF20 40%,
        #6100FF69 69%, 
        #0000 90%
    );
}

/* pushing the limits of css here lmao */
#actual_body {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;
    padding: 3em;
}

#actual_body h2 {
    font-size: 2em;
}

a {
    color: #DEADBEEF;
    text-decoration: none;
}

table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;
    margin-bottom: 4em;
}


td, th {
    border-style: solid;
    border-color: #0002;
    border-width: .3em;
    background-color: #6100FF42;
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .25em;
    padding-bottom: .25em;
}

thead {
    border-bottom-style: solid;
    border-bottom-width: 1em;
}

th {
    text-align: start;
}

tbody {
    font-size: 1em;
    margin-bottom: 1em;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

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

@keyframes hide_for {
    0% {opacity: 0%}
    99% {opacity: 0%}
    100% {opacity: 100%}
}

@keyframes flicker_on_1 { 
    0% {opacity: 0%} 
    9% {opacity: 0%}

    10% {opacity: 100%}

    11% {opacity: 0%}
    26% {opacity: 0%}

    27% {opacity: 100%}

    28% {opacity: 0%}
    59% {opacity: 0%}

    60% {opacity: 100%}
    61% {opacity: 100%}

    62% {opacity: 0%}
    67% {opacity: 0%}

    68% {opacity: 100%}
    69% {opacity: 100%}

    70% {opacity: 0%}
    72% {opacity: 0%}

    73% {opacity: 100%}
    76% {opacity: 100%}

    77% {opacity: 0%}
    80% {opacity: 0%}

    81% {opacity: 100%}
    88% {opacity: 100%}

    89% {opacity: 0%}
    90% {opacity: 0%}

    91% {opacity: 100%}
    98% {opacity: 100%}

    99% {opacity: 0%}

    100% {opacity: 100%}
}

@keyframes flicker_on_2 {
    0% {opacity: 0%}
    30% {opacity: 0%}

    31% {opacity: 100%}

    32% {opacity: 0%}
    66% {opacity: 0%}

    69% {opacity: 100%}
    90% {opacity: 100%}
    
    91% {opacity: 0%}
    92% {opacity: 100%}
}


@media (max-width: 23em) {
    .title-container {
        align-items: start;
    }
    
    .title-section {
        text-align: left;
    }

    .title-section h1 {
        font-size: 2em;
    }

    .subtitle > *, .noscript-subtitle {
        font-size: 1em;
    }

    .title-section img {
        width: 13em;
        height: 13em;
    }

}

@media (max-width: 56em) {
    #services_table thead {
        display: none;
    }
    
    #services_table tbody {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex-wrap: wrap;
        gap: .5em;
    }

    #services_table tr {
        flex-grow: 1;
        flex-basis: 14em;
        display: grid;
        grid-template-rows: auto auto auto auto;
    }

    #services_table .icon {
        width: 2em;
        height: 2em;
    }

}