/* ----- */
/* FONTS */
/* ----- */

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    src: url("/fonts/Figtree-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Figtree";
    font-style: italic;
    font-weight: normal;
    font-stretch: normal;
    src: url("/fonts/Figtree-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    src: url("/fonts/Figtree-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Figtree";
    font-style: italic;
    font-weight: bold;
    font-stretch: normal;
    src: url("/fonts/Figtree-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    src: url("/fonts/RobotoMono-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto Mono";
    font-style: italic;
    font-weight: normal;
    font-stretch: normal;
    src: url("/fonts/RobotoMono-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    src: url("/fonts/RobotoMono-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto Mono";
    font-style: italic;
    font-weight: bold;
    font-stretch: normal;
    src: url("/fonts/RobotoMono-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 500;
    src: url("/fonts/RobotoMono-Medium.ttf") format("truetype");
}


/* -------------- */
/* MAIN VARIABLES */
/* -------------- */

:root {
    --primary-font: "Figtree", sans-serif;
    --secondary-font: "Roboto Mono", monospace;
    --main-text-color: #333;
    --secondary-text-color: #646464;
    --menu-color: #525252;
    --primary-background-color: #dee0e4;
    --secondary-background-color: #f8f9fb;
    --primary-accent-color: #96B9FF;
    --secondary-accent-color: #C6A2FF;
    --dropshadow: #BCBCBD;
    --svg: brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(14%) hue-rotate(202deg) brightness(89%) contrast(95%);
    --content-width: 750px;
}


/* ---------------- */
/* GENERAL STYLINGS */
/* ---------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
    background-color: var(--primary-background-color);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.two-column ul {
    list-style: square;
}

p, input, li {
    font-family: var(--primary-font);
    font-size: 1.15rem;
    color: var(--main-text-color);
    line-height: 1.4em;
}

p a, li a {
    font-weight: bold;
    color: var(--secondary-text-color);
    text-decoration: none;
    border-bottom: 4px dotted var(--primary-accent-color);
}

p a:hover, li a:hover {
    border-bottom: 4px dashed var(--secondary-accent-color);
}

.external-link::after {
    /*content: "\2B67";*/
    /*content: "⭧";*/
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/images/arrow-square-out.svg") no-repeat center / contain;
    background-size: contain;
    background-repeat: no-repeat;
    filter: var(--svg);
    margin-left: 3px;
}
svg {
    width: 16px;
    height: auto;
}

small, .small {
    font-family: var(--secondary-font);
    font-size: .85em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--secondary-font);
    color: var(--main-text-color);
}

hr {
    border: 0;
}

.hr-blue {
    border-top: 4px dotted var(--primary-accent-color);
}

.hr-purple {
    border-top: 4px dotted var(--secondary-accent-color);
}

.hr-grey {
    border-top: 4px dotted var(--primary-background-color);
}

.image-right {
    float: right;
    padding: 0.25em 0em 0.25em 0.75em;
}

.image-left {
    float: left;
    padding: 0.25em 0.75em 0.25em 0em;
}

.text-right {
    text-align: right;
}

details {
    line-height: 1.5em;
    margin-block-end: 1em
}

details summary {
    font-family: var(--secondary-font);
    font-size: .90em;
    font-weight: 500;
    color: var(--menu-color);
    padding-bottom: .75em;
    border-bottom: 4px dotted var(--primary-background-color);
}

details p, details ul {
    font-family: var(--primary-font);
    font-size: 1.1em;
    line-height: 1.3em;
    color: var(--main-text-color)
}

.center-align {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding-bottom: 1em;
    padding-top: .5em;
}

.kaomoji {
    font-size: .9em;
}

.fancy-bold {
    font-family: var(--secondary-font);
    font-size: 1.1rem;
    color: var(--main-text-color);
    line-height: 1.4em;
    font-weight: bold;
    filter: drop-shadow(1px 1px 1px var(--secondary-accent-color))

}

span {
    min-width: max-content;
    white-space: nowrap;
}


/* ---------------- */
/* SPLASH MAIN PAGE */
/* ---------------- */

.splash-layout {
    display: grid;
    grid-template-rows: auto;
}

.splash-top {
    display: grid;
    grid-template-columns: 1fr var(--content-width) 1fr;
    margin-top: 8em;
    gap: 2em;
}

.splash-logo {
    grid-column: 2;
    justify-self: center;
    max-width: 300px;
    height: auto;
}

.splash-bottom {
    display: grid;
    grid-template-columns: 1fr var(--content-width) 1fr;
    gap: 2em;
    margin-top: 1em;
}

.splash-menu {
    max-width: 200px;
    justify-self: end;
    align-self: start;
    margin-block-start: 5em;
}

.splash-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.splash-nav a {
    font-family: var(--secondary-font);
    color: var(--menu-color);
    font-weight: 500;
    text-align: center;
    display: block;
    padding: 0.75em 1em;
    border-radius: 12px;
    text-decoration: none;
    border-bottom: 0px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background: linear-gradient(135deg, #b8e0ff 0%, #c8b8ff 50%, #ffb8e8 100%);
    border: 1px solid var(--dropshadow);
}

.splash-nav a:hover {
    transform: translateY(-3px);
    filter: drop-shadow(4px 4px 1px var(--dropshadow));
    border-bottom: 0px;
}

.splash-content {
    background-color: var(--secondary-background-color);
    border-radius: 30px;
    padding: 1em;
    filter: drop-shadow(4px 4px 1px var(--dropshadow));
}

.splash-updates {
   color: var(--menu-color)
}

.splash-details {
    margin: 1em 1em;
}


/* ------------------ */
/* MAIN SITE STYLINGS */
/* ------------------ */

.site-header {
    background-color: var(--primary-background-color);
    margin: 2em;
}

.site-header-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: var(--content-width);
    margin: 0 auto;
    gap: 0.75em;
}

.site-nav ul {
    display: flex;
    gap: 1.3em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    font-family: var(--secondary-font);
    font-weight: 500;
    color: var(--menu-color);
    text-decoration: none;
    border-bottom: none;
}

.site-nav a:hover {
    border-bottom: 4px dotted var(--secondary-text-color);
}

.site-submenu {
    min-width: 230px;
    justify-self: end;
}

.site-submenu-header, .site-submenu-header a {
    font-family: var(--secondary-font);
    text-align: right;
    text-decoration: none;
}

.site-submenu ul, .site-submenu li {
    font-family: var(--secondary-font);
    list-style: none;
    line-height: 2em;
}

.site-submenu a {
    font-weight: 500;
    text-decoration: none;
    color: var(--main-text-color);
    border-bottom: none;  
}

.site-submenu [aria-current="page"] {
    border-bottom: 4px dotted var(--secondary-text-color);
}

.site-submenu a:hover {
    border-bottom: 4px dotted;
}

.site-submenu-subitem {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--menu-color)
}

.site-layout {
    display: grid;
    grid-template-columns: 1fr var(--content-width) 1fr;
    flex: 1;
    gap: 2em;
    background: linear-gradient(135deg, #b8e0ff 0%, #c8b8ff 50%, #ffc6ed 100%);
}

.site-content {
    background-color: var(--secondary-background-color);
    min-height: 100%;
    padding: 0 2em 2em;
}

.site-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    border-radius: 30px;
}

.site-content figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1.5em 0.25em;
}

.site-content figcaption {
    font-family: var(--secondary-font);
    font-size: 0.75em;
    text-align: center;
    padding: 1em;
    
}

.site-content figcaption a {
    font-weight: bold;
    color: var(--secondary-text-color);
}

.now-page ul {
    list-style-type: square;
}

.now-image {
    margin: 1.5em;
}


/* ------------- */
/* FOOTER STYLES */
/* ------------- */

.copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em;
}

.copyright-symbol {
    font-family: var(--primary-font);
}

.copyright-text {
    font-size: 0.8em;
    font-family: var(--secondary-font);
}


/* -------------------- */
/* SCROLL TO TOP BUTTON */
/* -------------------- */

.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--menu-color);
    color: #fff;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.scroll-top-arrow {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/images/caret-up-bold.svg") no-repeat center / contain;
    background-size: contain;
    background-repeat: no-repeat;
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}


/* ------------- */
/* FORM STYLINGS */
/* ------------- */

input, text, textarea {
    border: 4px solid var(--primary-background-color);
    border-radius: 12px;
    width: 100%;
    padding: .5em;
    font-family: var(--primary-font);
    font-size: 0.9em
}

textarea {
    height: 10em;
}

.contact-label {
    font-family: var(--secondary-font);
    font-size: .85em;
    font-weight: 700;
    color: var(---menu-color);
}

.submit-button {
    font-family: var(--secondary-font);
    font-size: 1em;
    font-weight: 500;
    color: var(--menu-color);
    background: linear-gradient(135deg, #b8e0ff 0%, #c8b8ff 50%, #ffb8e8 100%);
    border: 1px solid var(--dropshadow);
    padding: 0.75em 1em;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.submit-button:hover {
    transform: translateY(-3px);
    filter: drop-shadow(4px 4px 1px var(--dropshadow));
}


/* ------------------ */
/* GUESTBOOK STYLINGS */
/* ------------------ */

.guestbook {
    margin: 2em auto;
}
.guestbooks___input-container {
    margin-bottom: 1.25em;
}

.guestbook-message {
    background-color: var(--primary-background-color);
    padding: 1em 1.25em 2em 1.25em;
    border-radius: 15px;
    margin-bottom: 1.5em;
}

.guestbook-message-reply {
    display: flex;
    flex-direction: column;
    justify-self: end;
    border: 4px dashed var(--primary-background-color);
    width: 80%;
    background-color: var(--secondary-background-color);
}

.guestbook-message p, .guestbook-message blockquote {
    font-family: var(--primary-font);
    font-size: 1.15rem;
    color: var(--main-text-color);
    line-height: 1.4em;
}

.guestbook-message blockquote {
    margin: 0px;
}



/* -------------- */
/* RESPONSIVENESS */
/* -------------- */

@media screen and (max-width: 980px) {
    .splash-layout {
        display: flex;
        flex-direction: column;
    }

    .splash-top {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5em;
    }

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

    .splash-menu, .site-submenu {
        max-width: 100%;
        margin: 1.5em auto 0;
    }

    .splash-nav ul, .site-nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: inherit;
        justify-content: center;
        max-width: 100%;
    }

    .splash-nav a {
        white-space: nowrap;
    }

    .nav-item {
        flex: 0 1 auto;
    }

    .site-layout {
        display: flex;
        flex-direction: column;
    }

    .site-submenu-header {
        text-align: center;
    }

    .image-right {
        float: none;
    }

    .guestbook-message-reply {
        width: 100%;
    }
}