@font-face {
    font-family: 'Fenton Black';
    src: url(fontsrc/Fenton-Black.otf);
    font-weight: bold;
}

@font-face {
    font-family: 'Dolce Vita';
    src: url(fontsrc/Dolce\ Vita.ttf);
}

@font-face {
    font-family: 'Caviar Dreams';
    src: url(fontsrc/CaviarDreams_BoldItalic.ttf);
    font-weight: bold;
}

:root {
    --img-wood: url("https://acevalkyrie.dev/imgsrc/wood.png");
    --img-minifeathers: url("https://acevalkyrie.dev/imgsrc/minifeathers.png");
    --img-subtlefeathers: url("https://acevalkyrie.dev/imgsrc/subtlewhitefeathers.png");
    --img-metal: url("https://acevalkyrie.dev/imgsrc/scratchedmetal.png");

    --clr-primary: #85dce6ab;
    --clr-headerbg: #91def8bf;
    --clr-titletext: #ffffff;
    --clr-titleshadow: #0a2833ab;
    --clr-titleborder: #000000ab;
    
    --clr-background: #1d2f38;
    --clr-text: #c0cfd1;

    --clr-navbox: #000000d9;
    --clr-navtopborder: #000000;
    --clr-navbottomborder: #ffffffab;
    --clr-navcurrentbox: #092e4966;
    --clr-navcurrenttext: #d1ecfa;
    --clr-navcurrentshadow: #0a81a9bf;
    --clr-navlinkbox: #07527e26;
    --clr-navlinktext: #85dce6;
    --clr-navlinkshadow: #85dce680;
    --clr-navlinkhoverbox: #acc1cd66;
    --clr-navlinkhovertext: #002b4d;
    --clr-navlinkhovershadow: #0086b3cc;

    --clr-scrollbar: #000000;
    --clr-scrollthumb: #85dce6;

    --clr-sectionbg: #00000080;
    --clr-sectionborder: #85dce6ab;
    --clr-sectionshadow: #ffffff80;
    --clr-h2: #ffffff;
    --clr-h2shadow: #ffffffab;
    --clr-h3: #1d2f38;

    --clr-quickinfoborder: #00000060;
    --clr-quickinfobutton: #301a03ab;
    --clr-quickinfobuttonshadow: #000000ab;
    --clr-quickinfobuttonhover: #80614054;
    --clr-quickinfohovershadow: #ffffff80;

    --clr-deetbox: #b4dadfab;
    --clr-deetboxtext: #041724;
    --clr-deetbutton: #d0e5e7;
    --clr-deetbuttonborder: #1d2f38;
    --clr-deetbuttonhover: #70b4c2;
    --clr-deetbtnlink: #07527e;
    --clr-deetbtntext: #70bcc5;
    --clr-deetbtnhover: #004070;
    --clr-deetbtnshadow: #ffffff;

    --clr-about-bg: #85dce6ab;
}

:root:has(#lightmode:checked) {
    --img-wood: url("https://acevalkyrie.dev/imgsrc/lightwood.png");
    --img-minifeathers: url("https://acevalkyrie.dev/imgsrc/lightminifeathers.png");

    --clr-background: #e8f6fc;
    --clr-text: #041724;

    --clr-navbox: #ffffffd9;
    --clr-navtopborder: #ffffff;
    --clr-navbottomborder: #000000ab;
    --clr-navcurrentbox: #c9d8e4cc;
    --clr-navcurrenttext: #1c4654;
    --clr-navcurrentshadow: #00ace699;
    --clr-navlinkbox: #dadfe199;
    --clr-navlinktext: #1084a8;
    --clr-navlinkshadow: #0a81a9bf;
    --clr-navlinkhoverbox: #d3e9ee99;
    --clr-navlinkhovershadow: #1acdff;

    --clr-scrollbar: #ffffff;

    --clr-sectionbg: #ffffff80;
    --clr-sectionshadow: #00000040;
    --clr-h2: #314757;
    --clr-h2shadow: #314757ab;

    --clr-quickinfobutton: #dcd6d099;
    --clr-quickinfobuttonshadow: #2b120040;
    --clr-quickinfobuttonhover: #e5e0dc73;

    --clr-deetbox: #ffffffab;
    --clr-deetbutton: #cccac499;
    --clr-deetbuttonhover: #c8e4e7;
    --clr-deetbtnlink: #177da6;
    --clr-deetbtnhover: #095d8b;

    --clr-about-bg: #84dce655;
}

:root:has(#darkmode:checked) {
    --img-wood: url("https://acevalkyrie.dev/imgsrc/darkwood.png");

    --clr-headerbg: #000d1abf;
    --clr-titletext: #041724;
    --clr-titleshadow: hsla(196, 33%, 88%, 0.671);
    
    --clr-background: #000000;
    --clr-text: #97babf;

    --clr-h2: #afc3c5;
    --clr-h2shadow: #afc3c5ab;

    --clr-quickinfoborder: #ffffff60;
    --clr-quickinfobutton: #402d19ab;
    --clr-quickinfobuttonshadow: #000000;
    --clr-quickinfobuttonhover: #8c6f4f54;

    --clr-deetbox: #2d4e53ab;
    --clr-deetboxtext: #e7ebef;
    --clr-deetbutton: #2d7786;
    --clr-deetbuttonborder: #b6ddf1;
    --clr-deetbuttonhover: #72bec5;

    --clr-about-bg: #005c66ab;
}

/**** scrollbar adjustments ****/
html {
    font-size: 125%;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--clr-scrollthumb) var(--clr-scrollbar);
    transition: color 0.44s, background-color 0.44s, border-color 0.44s;
}

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background-color: var(--clr-scrollbar);
}

::-webkit-scrollbar-thumb {
    background-color: var(--clr-scrollthumb);
    height: 25px;
}

body {
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr 8.3rem;
    grid-template-rows: max-content 1fr;
    grid-template-areas:
    "header nav"
    "main   nav";
    font-family: Helvetica, sans-serif;
    font-size: 0.8rem;
    background-color: var(--clr-background);
    background-image: var(--img-subtlefeathers);
    color: var(--clr-text);
}

h1, h2, h3 { margin: 0; }

a { text-decoration: none; }

header {
    grid-area: header;
    background-image: var(--img-minifeathers);
    padding-block: 0.25rem 0.5rem;
    padding-inline: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-bottom: 0.115rem double var(--clr-text);
}

h1 {
    margin-inline: calc(2rem + 8vw);
    font-family: 'Dolce Vita', 'Brush Script MT', Garamond, serif;
    font-size: 2rem;
    font-weight: bolder;
    font-style: oblique;
    letter-spacing: 0.05rem;
    stroke: 0.1rem var(--clr-primary);
    -webkit-text-stroke: 0.1rem var(--clr-primary);
    color: var(--clr-primary);
}

body:has(#lightmode:checked) h1 { filter: brightness(0.74) saturate(2); }

header form {
    margin-inline: calc(2rem + 4vw);
}

hr {
    margin: 0.15rem 0;
    border-color: var(--clr-primary);
}

header fieldset {
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Fenton Black';
    opacity: 0.75;
}

nav {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    row-gap: 0.15rem;
    width: 8.3rem;
    height: 100lvh;
    padding-inline: 1rem;
    padding-block-end: 4rem;
    background-image: var(--img-wood);
    box-sizing: border-box;
}

nav {
    border-left: 0.25rem double var(--clr-quickinfobutton);
}

nav a, nav fieldset {
    padding: 0.2rem 1rem;
    background-image: linear-gradient(to right, transparent, var(--clr-deetbutton) 20%, var(--clr-deetbutton) 80%, transparent);
    font-family: 'Fenton Black';
    color: var(--clr-deetbtnlink);
    border-block: 0.1rem solid var(--clr-deetbtnlink);
    border-inline: none;
    transition: letter-spacing 0.44s ease, margin 0.44s ease, border 0.44s ease;
}

body:has(#darkmode:checked) nav a, body:has(#darkmode:checked) nav fieldset { filter: contrast(1.75) brightness(1.1) hue-rotate(-10deg); }

nav a.current {
    stroke: 0.025rem var(--clr-navlinktext);
    -webkit-text-stroke: 0.025rem var(--clr-navlinktext);
    text-decoration: underline;
}

nav a:hover, nav fieldset:hover {
    color: var(--clr-deetbtntext);
    border-block: 0.1rem solid var(--clr-deetbtntext);
}

nav a:hover {
    letter-spacing: 0.1rem;
    margin-inline-start: 0.1rem;
}

nav fieldset input[type="radio"] {
    appearance: none;
    margin-right: 0.16rem;
    width: 0.65rem;
    height: 0.65rem;
    border: 0.05rem solid transparent;
    outline: 0.09rem solid var(--clr-radiocolor);
    outline-offset: 0.12rem;
    box-shadow: 0.1rem 0.1rem 0.3rem var(--clr-titleshadow);
    border-radius: 50%;
}

nav fieldset input[type="radio"]:checked {
    background-color: var(--clr-radiocolor);
    border-color: hsl(from var(--clr-radiocolor) h calc(s + 20) calc(l - 15));
}

input#lightmode {
    --clr-radiocolor: #e8f6fc;
}

input#darkmode {
    --clr-radiocolor: #000000;
}

input#personal {
    --clr-radiocolor: var(--clr-deetbtntext);
}

main {
    grid-area: main;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 1rem;
    padding: 1rem 2rem;
}

h2 {
    margin-bottom: 0.25rem;
    font-family: 'Fenton Black';
    color: var(--clr-h3);
    font-weight: bolder;
    background: var(--img-metal);
    background-position-y: -28px;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    h2 {
        background-clip: text;
        color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.cardholder {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-inline: 1rem;
}

.card {
    display: grid;
    grid-template-areas: 
    "title     title"
    "thumbnail  desc";
    grid-template-columns: 55% 45%;
    width: clamp(30ch, calc(8rem + 15vw), 40ch);
    background-color: var(--clr-sectionbg);
    border: 0.125rem double var(--clr-sectionbg);
    border-radius: 0.5rem;
    box-shadow: 0px 0px 16px var(--clr-sectionshadow);
    contain: paint;
    overflow: hidden;
}

.card h3 {
    grid-area: title;
    padding-block: 0.25rem;
    text-align: center;
    background-image: var(--img-wood);
    font-family: Consolas, "Courier New", Courier, monospace;
    font-weight: lighter;
    color: var(--clr-h2);
    text-shadow: -1.5px -1.5px 1px var(--clr-h2shadow);
}

.card a { color: var(--clr-navlinktext); }
.card h3 a { stroke: 0.015rem var(--clr-navlinktext); -webkit-text-stroke: 0.015rem var(--clr-navlinktext); }
.card a:hover { color: var(--clr-navlinkhovertext); }
.card h3 a:hover { stroke: 0.005rem var(--clr-navlinkhovertext); -webkit-text-stroke: 0.005rem var(--clr-navlinkhovertext); }

.card .image {
    grid-area: thumbnail;
    margin: 0;
    width: auto;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 1.5 / 1;
    contain: paint;
    overflow: hidden;
}

.image img {
    margin-bottom: -0.19rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    transition: scale 0.44s ease;
}

img.right-fit {
    object-position: right;
}

img.center-fit {
    object-position: top;
}

.card:hover .image img {
    scale: 1.04;
}

.card:hover .image:hover img {
    scale: 1.08;
}

.card .desc {
    grid-area: desc;
    max-height: 100%;
    padding: 0.5rem;
    font-size: 0.8em;
    color: var(--clr-text);
    overflow: auto;
}

@media screen and (max-width: 641px) {

    body {
        grid-template-columns: 1fr 0;
    }

    header { padding: 0.25rem; margin-top: 3.5rem }
    h1 { padding: 0; margin: 0; }

    nav {
        width: 100lvw;
        padding-block: 0.25rem;
        height: min-content;
        max-height: 4rem;
        flex-flow: row wrap;
        column-gap: 1rem;
    }
}