/*
   Many of the things here were created with the help of using FrankenUI and seeing
   what styles it applied in the browser. FrankenUI is not used directly so as to make
   the website smaller. If something here looks like it came from FrankenUI, it's because
   it was so all kudos to FrankenUI.
*/

@font-face {
    font-family: logo-font;
    src: url(fonts/Tourney-Regular.woff);
}

br,
H1,
p,
hr,
div {
    margin: 0;
    border: None;
}

br {
    line-height: 21px;
}

html {
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    margin: 0;
}

.dark-bg {
    background-color: rgb(12, 10, 9);
    color: rgb(250, 250, 249);
}

.flex {
    display: flex;
}

.center {
    align-items: center;
    justify-content: center;
}

.no-margin {
    margin: 0;
}

.header-logo {
    margin-top: 64px;
    text-align: center;
    font-family: logo-font;
    font-weight: normal;
    font-size: 60px;
    line-height: 62px;
}

@keyframes headerLogoColor {
    0% {
        color: rgb(250, 250, 249);
    }

    66% {
        color: rgb(250, 250, 249);
    }

    67% {
        color: rgb(217, 147, 247);
    }

    99% {
        color: rgb(217, 147, 247);
    }

    100% {
        color: rgb(250, 250, 249);
    }
}

.hw1 {
    animation-delay: -2s;
    animation-name: headerLogoColor;
    animation-duration: 3s;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;

}

.hw2 {
    animation-delay: -1s;
    animation-name: headerLogoColor;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.hw3 {
    animation-delay: 0s;
    animation-name: headerLogoColor;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.header-subtitle {
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    color: rgb(186, 186, 186);
    line-height: 1.75rem;

}

.ps {
    white-space-collapse: preserve-spaces;
}

.body-main {
    margin-top: 100px;
}

.body-text {
    font-size: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif
}

.footer-hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.footer-logo::after {
    left: calc(50% + 1.75rem);
    width: 100%;
}

.footer-logo::before {
    right: calc(50% + 1.75rem);
    width: 100%;
}

.footer-logo::before,
.footer-logo::after {
    content: "";
    position: absolute;
    top: 50%;
    max-width: calc(50% - 1.75rem);
    border-bottom: 1px solid;
    border-color: hsl(12 6.5% 15.1%);
}

.footer-logo {
    --uk-divider-icon-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23292524%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
    position: relative;
    height: 1.25rem;
    background-image: var(--uk-divider-icon-image);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.footer-main {
    margin-top: 30px;
}

.footer-text {
    font-size: 16px;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.container-large {
    max-width: 700px;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-left: auto;
    margin-right: auto;
    display: flow-root;
    box-sizing: content-box;
}

.container-large>p {
    line-height: 35px;
}