* {
    padding: 0;
    margin: 0;
    color: white;
}

/* toki pona font support */

@font-face {
    font-family: "linjapona";
    src: url("../fonts/linja-pona-4.9.otf") format('opentype'),
}

.tp {
    font-size: 36px;
    font-family: "linjapona";
}

/* Nagivation */

:is(nav, footer) {
    background-color: #121214;
    border: 8px solid black;
    border-radius: 8px;
    padding: 8px;
}

nav {
    border-top: none;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    height: 96px;
    display: flex;
    padding: 16px;
    gap: 8px;
}

nav a {
    font-family: monospace;
    border-radius: 16px;
    padding-inline: 32px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bolder;
}

nav a:hover {
    background-color: white;
    color: black;
}

/* Logo hue shifting animation */

@keyframes hueRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

#logo {
    animation: hueRotate 4s linear infinite;
    border: 4px solid black;
    border-radius: 25%;
}

/* Page content */


html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background-color: #1a1a1e;
    font-size: 24px;
    margin: 0 auto;
    width: 75%;
}

#title {
    text-align: center;
    font-size: 128px;

    /* Is there an easier way to get a good drop shadow? */
    text-shadow:
        2px 2px 4px black,
        -2px -2px 4px black,
        2px -2px 4px black,
        -2px 2px 4px black,
        2px 2px 4px black,
        -2px -2px 4px black,
        2px -2px 4px black,
        -2px 2px 4px black,
        2px 2px 4px black,
        -2px -2px 4px black,
        2px -2px 4px black,
        -2px 2px 4px black,
        2px 2px 4px black,
        -2px -2px 4px black,
        2px -2px 4px black,
        -2px 2px 4px black;
}

main {
    margin: 64px 0;
    gap: 64px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

:is(#eng_text, #tp_text) {
    background-color: #242429;
    border: 4px dashed black;
    padding: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Grid layout of webpage */

#grid {
    width: 75vmin;
    margin: 0 auto;
    gap: 16px;

    display: grid;
    grid-template-columns: 3fr 2fr 3fr;
    grid-template-rows: 1fr 1fr;
    justify-content: space-evenly;
}

#eng_text {
    grid-area: 1 / 1 / 2 / 3;
}

#image_one {
    grid-area: 1 / 3 / 2 / 4;
}

#image_two {
    grid-area: 2 / 1 / 3 / 2;
}

#tp_text {
    grid-area: 2 / 2 / 3 / 4;
}

:is(#image_one, #image_two) {
    margin: 0 auto;
    align-self: center;
}

/* Phone number input slider */

#slider_container * {
    margin: 8px auto;
}

#phone_number {
    width: 100%;
    cursor: pointer;
}

/* Footer */

footer {
    border-bottom: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}