@font-face {
    font-family: 'Unifont';
    src: url('assets/unifont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --background: white;
    --text: black;
    --link: black;
    --hover: rgba(21, 15, 15, 0.2);
    --subtext: rgba(0, 0, 0, 0.5);
}

body {
    margin: 0;

    background-color: var(--background);
    background-repeat: repeat;
    background-attachment: fixed;

    color: var(--text);
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;

    transition:
        background-color 0.15s,
        color 0.15s;
}

/* Dark mode */

body.dark {
    --background: #111111;
    --text: #eeeeee;
    --link: #eeeeee;
    --hover: rgba(255, 255, 255, 0.15);
    --subtext: rgba(255, 255, 255, 0.5);
}

/* Unifont */

body.unifont {
    font-family: 'Unifont', monospace;
    font-size: 18px;
}

/* Page */

html,
body {
    cursor: url('assets/cursor.png'), auto;
    height: 100%;
    margin: 0;
}

h1 {
    font-size: 28px;
    padding: 20px;
    margin: 0;
}

#home-link {
    text-decoration: none;
}

/* Layout */

#container {
    display: flex;
}

#sidebar {
    width: 200px;
    padding: 20px;
}

#sidebar a {
    text-decoration: none;
}

#sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

article {
    flex: 1;
    padding: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Links */

a {
    color: var(--link);
}

a:hover {
    background-color: var(--hover);
    font-style: italic;
}

a .active {
    font-style: italic;
}

details > summary {
    font-style: italic;
}

/* Rice */

#rice img {
    width: 50%;
    height: auto;
}

/* Photos */

#photos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.photo-entry {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.photo-entry img {
    width: 25%;
    height: auto;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
}

.photo-entry img:hover {
    transform: scale(1.02);
}

.photo-text {
    max-width: 600px;
}

.photo-text h3 {
    margin-top: 0;
    margin-bottom: 5px;
}

.photo-text p {
    margin-top: 0;
}

/* Image modal */

#image-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#image-modal img {
    max-width: 90vw;
    max-height: 90vh;
}

/* Subtext */

.subtext {
    font-size: 16px;
    color: var(--subtext);
}

/* Bottom-right settings */

#settings {
    position: fixed;
    right: 20px;
    bottom: 20px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    z-index: 9998;
}

#settings button {
    width: 38px;
    height: 38px;

    padding: 0;

    font-family: inherit;
    font-size: 20px;
    line-height: 1;

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

    border: 1px solid var(--text);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

#settings button:hover {
    background-color: var(--hover);
    font-style: normal;
}