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

body {
    margin: 0;
    line-height: 1.5em;
    -webkit-font-smoothing: antialiased;
}
h1 {
    line-height: 1.5em;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

details {
    margin-bottom: 0.3em;
}



/*
 * Color rename
 */
:root {
    --color-syntax-str: var(--color-red1);
    --color-command: var(--color-green1);
    --color-command2: var(--color-yellow1);
    --color-path: var(--color-blue1);
    --color-syntax-var: var(--color-magenta1);
    --color-prompt: var(--color-cyan1);
    --color-command-error: var(--color-red2);
    --color-exec: var(--color-green2);
    --color-folder: var(--color-blue2);
    --color-text: var(--color-foreground);
}



/*
    Accessibility related styles
 */
a[rel~="external"]:after {
    content: "↗";
}

details {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 16px;
}

details[open] {
    margin-bottom: 32px;
}

details > :not(summary) {
    padding-left: 1.5em;
}

details > summary {
    cursor: pointer;
}

section:target {
	animation: highlight 5s;
}
@media (prefers-reduced-motion: reduce) {
    section:target {
        animation-timing-function: steps(1);
    }
}
@keyframes highlight {
	0% {
		background: var(--color-background);
		outline: 4px var(--color-cursor) solid;
	}
	100% {
		background: none;
		outline: 2px transparent solid;
	}
}



/*
 * base.html styles
 */
:root {
    font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
    :root { font-family: 'InterVariable', sans-serif; }
}


body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    height: 100vh;
    max-width: 1200px;
    padding-top: 1rem;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

#navbar,#friend-list {
    display: flex;
    list-style: none;
    row-gap: 1em;
    gap: 1ch;
    padding-left: 0;
    margin-top: 0.1em;
    flex-wrap: wrap;
}

#navbar {
    .legal{
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
    }
}

#friend-list {
    justify-content: start;
}

@media(min-width: 1260px) {
    #bottom-toast {
        position: fixed;
        bottom: 2vw;
        right: 2vw;
        margin: 0;
        max-width: 512px;
        cursor: pointer;
        user-select: none;

        border: none;
        padding: 10px 16px;
        box-shadow: var(--color-foreground) 0.8ch 0.8em;
        color: var(--color-white1);
        background-color: var(--color-black2);
    }
}
@media(max-width: 1260px) {
    #bottom-toast {
        display: none;
    }
}


main {
    flex-grow: 1;
}



/*
 * Common Styles
 */

h2 {
    margin-top: 1em;
    margin-bottom: 0.3em;
}

section {
    margin-bottom: 4em;
}
section:last-child {
    margin-bottom: 1em;
}

a {
    padding: 0.1em 0.1ch;
    color: var(--color-blue1);
    &:hover {
        text-decoration: none;
        background-color: var(--color-blue1);
        color: var(--color-background);
    }
}
a:visited {
    color: var(--color-magenta1);
    &:hover {
        background-color: var(--color-magenta1);
        color: var(--color-background);
    }
}

.trans-underline {
    text-decoration: none;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, #5bcefa 20%, #f5a9b8 20%, #f5a9b8 40%, #ffffff 40%, #ffffff 60%, #f5a9b8 60%, #f5a9b8 80%, #5bcefa 80%, #5bcefa 100%) 1;

}

.cmdline {
    .caret {
        color: var(--color-prompt);
        margin-right: 1ch;
    }
    .cmd {
        color: var(--color-command);
        margin-right: 1ch;
    }
    .args {
        color: var(--color-command2);
    }
}
@media (min-width: 600px) {
    .cmd-result {
        margin-left: 2ch;
    }
}

.centered-link-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    gap: 3ch;
}