/*
←       U+2190
↑       U+2191
→       U+2192
↓       U+2193
*/

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body:has(:popover-open) :is(button, a) {
    pointer-events: none;
    scrollbar-width: none;

}
* {
    margin: 0;
    padding: 0;

    font-family: Offbit Dot;
    color: var(--text);

    scrollbar-color: var(--text) rgba(0,0,0,0);
    scrollbar-width: thin;
}
[data-theme=dark] {
    --bg: black;
    --contrast: white;
    --text: steelblue;
    --shadow: rgba(42, 37, 67, 0.5);

    --blend: screen;

    --switch: "light";
}
[data-theme=light] {
    --bg: white;
    --contrast: black;
    --text: steelblue;
    --shadow: rgba(42, 42, 73, 0.5);

    --blend: multiply;

    --switch: "dark";
}

@font-face {
    src: url("../fonts/OffBit-Dot.ttf");
    font-family: "OffBit Dot";
    color: steelblue;
}
@font-face {
    src: url("../fonts/OffBit-DotBold.ttf");
    font-family: "OffBit Dot Bold";
}
@font-face {
    src: url("../fonts/OffBit-DotBold.ttf");
    font-family: title;
}
@font-face {
    src: url("../fonts/Junicode.ttf");
    font-family: subtitle;
}
@font-face {
    src: url("../fonts/Junicode.ttf");
    font-family: type;
}

body {
    background: var(--bg);

    min-height: 100%;
    max-height: 100vh;
    max-width: 100vw;
}

header, main, footer {
    display: block;
    margin: 0 auto;
}

header {
    height: 100vh;
    align-content: space-evenly;
}

main {
    width: 90vw;
    margin: 0 auto;
    padding: 15px;

    border: 7px dotted var(--text);
    border-radius: 25px;
}

footer {
    align-content: space-evenly;

    text-align: center;
}

#nextImg {
    position: absolute;
    top: 0; right: 7%;

    appearance: none;
    border: none;
    background: transparent;
    color: var(--contrast);

    font-family: subtitle;
    font-size: 13em;
}

#mid-1 {
    position: relative;
    display: block;

    width: 100%; height: 100%;

    margin: 75px auto;
}
#mid-2 {
    margin: 75px auto;
}

/*##############################################################################    HEADER*/

.my-grid {
    width: 100%; height: 100%;

    display: grid;
    grid-template-columns: repeat(15, minmax(0px, 1fr));
    grid-template-rows: repeat(15, minmax(0px, 1fr));
}

#header-bg {
    background-color: var(--contrast);

    grid-column: 1 / 16; grid-row: 1 / 14;
    align-content: end;
}

#my-numbers {
    padding-left: 2vw;
    padding-bottom: 1vw;

    display: grid;
    grid-auto-flow: row;
}

#my-numbers > * {
    font-size: 5cqi;
    color: var(--bg);
    filter: opacity(0.15);
}

#my-theme {
    width: 100%; height: 100%;
    container-type: size;

    grid-column: 1 / 2;
    grid-row: 14 / 16;
}

#my-switch {
    background-color: transparent;
    width: 100%; height: 100%;

    border: none;
    color: var(--contrast);

    font-family: title;
    font-size: 42cqi;
    filter: opacity(0.5);
    transition: font-size 0.15s, filter 0.15s;
}
#my-switch:hover {
    font-size: 37cqi;
    filter: opacity(1);
}


.my-picture {
    grid-column: 2 / 16;
    grid-row: 2 / 16;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    box-shadow: inset -3px -3px 15px 1px var(--shadow);
    border-top-left-radius: 150px;
    border-bottom: 3px solid var(--contrast);
    box-shadow: 25px 25px 0px 0px var(--contrast);
    overflow: hidden;
}

.my-title {
    container-type: size;

    grid-column: 3 / 13;
    grid-row: 6 / 8;

    align-content: center;
}
#my-title {
    color: rgb(175, 175, 175);
    text-shadow: 5px 5px rgb(15, 15, 15);
    -webkit-text-stroke: 1px rgb(142, 142, 142);
    mix-blend-mode: color-burn;

    font-family: title;
    font-size: 37cqmax;

    width: fit-content;
    background: transparent;
    transition: color 0.5s, text-shadow 0.5s, mix-blend-mode 0.5s;
}
#my-title:hover {
    color: white;
    text-shadow: 9px 9px royalblue;
    mix-blend-mode: difference;
}

.my-subtitle {
    container-type: size;

    grid-column: 5 / 15;
    grid-row: 13 / 14;

    display: flex;
    float: right;
    justify-content: right;

}
#my-subtitle {
    font-family: subtitle;

    color: var(--contrast);
    background-color: var(--bg);

    display: inline-block;
    max-width: fit-content;
    height: fit-content;
    font-size: 7cqmax;

    /*typewriter effect*/
    overflow: hidden;
    white-space: preserve nowrap;
    text-align: right;
    padding: 5px 10px;

    border-right: 3px solid var(--text);
    animation: typing 3s steps(19) forwards,
        blink 1.25s step-end infinite;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 50% { border-color: transparent; } }

#nav-0, #nav-1, #nav-2 {
    background: transparent;
    border: none;

    width: fit-content; height: fit-content;
    transition: filter 0.3s;

    align-self: center;
}

.my-nav {
    container-type: size;
    display: contents;
}

#title-img-nav {

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    grid-column: 12 / 13;
    grid-row: 3 / 4;
}

#nav-0:hover, #nav-1:hover, #nav-2:hover { transition: filter 0.3s; filter: invert(1); }

#nav-0 > a, #nav-1 > a {
    font-family: subtitle;
    font-size: 7em;

    text-decoration: none;
    background-color: var(--bg);
    color: var(--contrast);

    display: block;
    line-height: 50px;
    padding-bottom: 3px;
}
#nav-0 > a {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    padding-left: 10px;
}
#nav-1 > a {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-right: 10px;
}

#nav-2 {
    grid-column: 14 / 15;
    grid-row: 11 / 12;
}
#nav-2 > a {
    font-family: subtitle;
    font-size: 7em;

    text-decoration: none;
    background-color: var(--bg);
    color: var(--contrast);

    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-bottom: 10px;
}
/*##############################################################################    GALLERY*/

div.my-popover {
    display: flex;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.25em;

    margin: 0px auto;
}

.container {
    position: relative;
    width: 100%; height: 100%;
    aspect-ratio: 1 / 1;
}

.item {
    display: block;
    width: 100%; height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.overlay {
    display: none;

    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 100%;

    align-content: center;
}

.popBtn {
    background: rgba(0,0,0,0);
    width: 100%; height: 100%;

    border: none;

    color: white;
    font-size: 2em;
    text-align: center;
    text-shadow: 1px 1px 2px var(--shadow);

    padding-top: 7px;
}
.popBtn:hover {
    animation: arrow 0.15s ease-in-out;
    padding-top: 0px;
}

[popover] {
    border: none;

    max-width: 97%;
    max-height: 97%;

    object-fit: contain;

    animation: fadeIn 0.1s normal;
}

[popover]:popover-open {
    position: fixed;

    align-self: center;
    justify-self: center;
}

[popover]::backdrop {
    background: rgba(0,0,0,0.85);
    filter: blur(3px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}






/*##############################################################################    FOOTER*/

#my-footer {
    display: grid;
    grid-template-columns: 5fr 0.5fr 1fr 1.5fr;
}

#footer-main {
    background: var(--contrast);
    container-type: size;

    height: 50vmin;
    margin-bottom: 50px;

    border-top-right-radius: 120px;
    border-bottom-right-radius: 120px;

    align-content: space-evenly;
    justify-content: space-evenly;
}

#footer-main > * {
    display: inline;
    margin: 0 2cqi;
}

#my-name {
    font-family: title;
    font-size: 5cqi;
}

#switch::before {
    content: var(--switch);
}
#switch, #earth, #art {
    font-family: subtitle;
    font-size: 5cqi;

    appearance: none;
    border: none;

    background-color: var(--text);
    color: var(--contrast);

    width: fit-content; height: fit-content;
    padding: 7px;

    transition: background-color 0.3s;
}

#earth > a, #art > a {
    font-family: subtitle;
    font-size: 5cqi;

    text-decoration: none;
    color: var(--contrast);
}

#switch:hover, #earth:hover, #art:hover {
    background-color: var(--bg);
}

#back-to-top {
    background: var(--text);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;

    width: fit-content;
    height: fit-content;
}

#arrow {
    appearance: none;
    border: none;

    background: var(--contrast);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;

    width: fit-content;
    height: 109px;
    font-size: 7em;

    align-self: flex-end;
    justify-self: flex-end;

    padding-top: 5px;
    transition: padding-top 0.15s;
}
#arrow:hover { padding-top: 0px; }

#arrow > a {
    color: var(--bg);
}