@font-face {
    font-family: "JetBrains Mono";
    src: url("./assets/font.ttf");
}

:root {
    --text: #CDD6F4;
    --text-unfocused: #A6ADC8;
    --bg: #1E1E2E;
    --border: #45475A;
    --border-unfocused: #313244;
    --tab-focused: #181825;
    --section-focused: #11111b;
    --border-size: 2pt;
}

* {
    font-family: 'JetBrains Mono', monospace;
}

.wrapper {
    display: flex;
    justify-content: center;
}

.content {
    width: 75%;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

html, body, .wrapper {
    height: 100%;
}

body {
    background-color: var(--bg);
    margin: 0;
    padding: 30px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

header {
    height: 100px;
    padding: 0 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

nav {
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: var(--text) !important;
    text-decoration: none;
    gap: 10px
}

p, li {
    text-shadow: 4px 4px 6px #45475A;
}

h2 {
    font-size: 14pt;
    margin-bottom: 2pt;
}

ul {
    margin: 0pt;
}

#rights {
    color: var(--text);
    text-decoration: underline;
}

.count {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#count {
    height: fit-content;
    flex-grow: 0;
}

.ascii {
    color: var(--text);
    font-weight: bolder;
    margin: 0%;
    font-family: 'JetBrains Mono';
    font-variant-ligatures: none;
    position: relative;
    top: -35%;
    user-select: none;
}

.nav-tab {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
    min-width: fit-content;
    width: 8%;
    background-color: transparent;
    border-color: transparent;
    border: var(--border-size) solid var(--border-unfocused);
    font-size: 13pt;
    color: var(--text-unfocused);
    user-select: none;
}

.nav-tab:hover {
    cursor: pointer;
    border: var(--border-size) solid var(--border);
    color: var(--text);
}

#home {
    border: transparent;
    background-color: var(--tab-focused);
    color: var(--text);
}

.img-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.tabs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 100%;
    width: 100%;
}

.panel {
    box-sizing: border-box;
    border: var(--border-size) dashed var(--border-unfocused);
    border-bottom: none;
    flex-grow: 1;
    flex-basis: 50px;
    display: flex;
    flex-direction: column;
    overflow: scroll;
}

.panel:hover {
    border-color: var(--border);
    border-style: solid;
    color: var(--text);
    background-color: var(--tab-focused);
}

#main {
    flex-grow: 3;
}

section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-bottom: var(--border-size) dashed var(--border-unfocused);
    color: var(--text-unfocused);
    width: auto;
    padding: 20px;
    gap: 15px;
}

section:hover {
    border-color: var(--border);
    border-bottom-style: solid;
    color: var(--text);
    background-color: var(--section-focused);
}

.section-title {
    font-size: 16pt;
    margin: 0px;
}

#blinkies {
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
}

#links {
    flex-grow: 3;
}

#frame {
    display: flex;
    width: fit-content;
    height: 200px;
    justify-content: center;
    border: var(--border-size) dashed var(--border-unfocused);
}

#pfp {
    object-fit: contain;
    width: 80%;
}

.info {
    display: flex;
    height: fit-content;
    flex-flow: column wrap;
    gap: 5px;
    padding-inline: 5px;
    text-shadow: 4px 4px 6px #45475A;
}

.info-text {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 10px;
    color: var(--text-unfocused);
    fill: var(--text-unfocused);
}

.info-text svg {
    width: 24px;
    height: 24px;
}

#bluesky {
    width: 18px;
    height: 18px;
    padding-inline: 3px;
}

.info-text:hover {
    fill: var(--text);
    color: var(--text);
}

.info-text .link {
    cursor: pointer;
}

.info-text p, .info-text a {
    font-size: 12pt;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
    margin: 0px;
}


#main .section-title {
    align-self: center;
}

#front {
    flex-grow: 8;
}

#main p {
    text-align: center;
    line-height: 25pt;
}