@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
    --text-main-color: #F05941;
    --text-nav-color: #ffa192;
    --background-color: #22092C;
}

html {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

body {
    color: #872341;
    background-color: var(--background-color); 
    margin: 0px;
    height: 100vh; /* 1x viewport height for now (TODO: 200vh for scroll content later) */
}

fieldset {
    border: 5px dotted #BE3144;
}

.main {
    margin: 0%;
    min-height: 100vh;
    position: static;
    
    display: flex;
    justify-content: center;
}
.scrollFade {
    opacity: calc(var(--iscroll) * 5);
}

.wchr {
    color: var(--text-main-color);
    font-family: 'Michroma', Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-size: 4vw;
    transition: all 0.25s;
    text-shadow: 0.1vw 0.1vw #BE3144;
    transition: color 0.5s ease-out, opacity 2s ease-out;
    cursor: pointer;
}
@media (min-height: 1200px)
{
    .wchr { font-size: 8vw; }
}
.wchr:hover {
    color: #fff7e8;
    transition: color 0.25s ease-out;
}
a:has(.wave):hover {
    font-style: oblique;
}
.spc {
    min-width: .5em;
}

@keyframes textWave {
    0%      { transform: translateY(0.8vw)  rotate(0deg); }
    20%     { transform: translateY(0.0vw)  rotate(7deg); }
    50%     { transform: translateY(-0.8vw) rotate(0deg); }
    70%     { transform: translateY(0.0vw)  rotate(-7deg); }
    100%    { transform: translateY(0.8vw)  rotate(0deg); }
}
@keyframes fadeText {
    0%      { opacity: 0; }
    80%     { opacity: 0; }
    100%    { opacity: 1; }
}
.wchr:not(.small,.wave) {
    opacity: 0;
}
.wave {
    display: inline-block;
    animation: textWave 700ms linear infinite, fadeText 1.1s linear normal forwards;
    opacity: 0;
}

.small {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 1.5vw;
    text-shadow: 1vw 1vw #87234100;
    font-weight: 300;
}
nav .small {
    color: var(--text-nav-color);
}

.fadein {
    animation: fadeText 1s linear normal forwards;
}
.also {
    display: flex;
    justify-content: space-around;
}
a, button.cta {
    border: none;
    color: var(--text-main-color);
    text-decoration: none;
    background-color: transparent;
}
a:focus, button.cta:focus {
    transform: translateY(0.2vw);
}
a:hover, button.cta:hover {
    text-shadow: 0.1vw 0.1vw #BE3144;
}
a::before, button.cta::before {
    content: '■';
    color: var(--text-main-color);
    display: inline-block;
    transform: rotateX(90deg) rotate(45deg);
    opacity: 0;
    transition: all 0.25s ease-out;
}
a:hover::before, button.cta:hover::before {
    color: white;
    transform: rotateX(0deg) rotate(45deg);
    opacity: 1;
}
div#footer {
    margin: 1vw 0vw;
    position: fixed;
    bottom: 0%;
    text-align: center;
    width: 100%;
    opacity: calc((var(--iscroll) - 0.5) * 5);
}

div#footer:var

::selection {
    background-color: #872341;
}

input[type="text"], input[type="password"] {
    font-weight: 600;
    border-color: transparent;
    border-radius: 2vh;
    padding: 0.1em 1em;
    outline: #FFEB62 solid 0em;
    transition: outline 0.1s;
    background-color: white;
    font-family: inherit;
}
input[type="text"]::selection, input[type="password"]::selection {
    background-color: var(--text-main-color);
}
input[type="text"]:focus, input[type="password"] { 
    outline: var(--text-main-color) solid 0.4em;
}

/* tk display */

header {
    margin-top: 20px;
    margin-bottom: 20px;
}
nav {
    background-color: #872341;
    border-bottom: solid #521729 6px;
    color: #FF735C;
    padding: 0px 8px;
}
header .wchr {
    font-family: inherit;
}
div.blog {
    display: flex;
    min-width: 900px;
    align-items: stretch;
}
section {
    background-color: #BE3144;
    color: #FFEB62;
    flex-grow: 1;
    padding: 8px;
    max-width: 700px;
}
aside {
    float: right;
    background-color: #872341;
    color: #FFEB62;
    width: 256px;
    min-height: 100%;
    padding: 8px;
}
.tile {
    margin: 8px;
    padding: 1px 8px;
    box-shadow: 0px 8px 20px -4px rgba(0, 0, 0, 0.678);
    background-color: #f03b44;
    color: #111111;
    border-top: #FF735C 6px solid;
    font-family: "Nunito Sans", sans-serif;
}
.tile>h2 {
    margin: 0px;
    font-weight: bold;
}
.tile>h2>a {
    color: #111111;
    cursor: pointer;
}
.tile footer {
    width: 100%;
    text-align: right;
    font-style: italic;
    font-size: 0.8em;
}

/* Temporary until I find my highlighter again... famous last words */

pre.code-hilight::before {
    pointer-events: all;
    cursor: pointer;
    content: '📋';
    float: right;
    position: relative;
    background-color: #521729;
    border-radius: 3px;
    padding: 4px;
}
pre.code-hilight:hover::before {
    background-color: #872341;
}
pre.code-hilight:active::before {
    content: '✔️';
}
pre.code-hilight {
    cursor: text;
    pointer-events: none;
    background-color: #22092C;
    border: solid #16030e 4px;
    border-radius: 4px;
    color: #AAAAAA;
    padding: 8px;
    display: block;
    tab-size: 4ch;
    font-size: 14px;
    font-family: 'Cascadia Code', 'Courier New', Courier, monospace;
}