/* COLOR */

:root[data-theme="light"] {
    --text: black;
    --bg-color: #e5d7ba;
    --page: white;
    --link: darkblue;
    --border: black;
    --bg: url(/media/backgrounds/light.png);
    --list: url(/media/list/light.png);
}

:root[data-theme="dark"] {
    --text: white;
    --bg-color: black;
    --page: black;
    --link: pink;
    --border: gray;
    --bg: url(/media/backgrounds/dark.png);
    --list: url(/media/list/dark.png);
}

/* GENERAL */

body {
    font-size: 90%;
    font-family: Garamond, serif;
    color: var(--text);
    max-width: 45rem;
    margin: 0 auto;
    padding: 1rem;
    text-align: justify;
    hyphens: auto;
    line-height: 175%;
    background-image: var(--bg);
    background-color: var(--bg-color);
}

h1, h2, h3 {
    text-align: center;
    font-size: 100%;
}

h2, h3 {
    padding: 0;
}

a {
    text-decoration: underline;
    color: var(--link);

    &:hover {
        background-color: var(--link);
        color: var(--page);
    }
}

img {
    image-rendering: optimizeSpeed;
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border: 1px solid;
    border-color: var(--border);
}

tr {
    border: none;
}

td, th {
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--border);
    padding: 10px;
    text-align: left;
}

button {
    background-color: var(--page);
    color: var(--text);
    border: 1px solid var(--text);
    &:active {
        transform: translateY(2px) translateX(2px);
    }
}

ul, ol {
    list-style-image: var(--list);
    padding-inline-start: 1rem;
}

/* CLASSES */

.box {
    background-color: var(--page);
    border: 1px solid var(--border);
    padding: 4rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    position: relative;
    box-shadow: 1px 1px var(--border);
}

.details {
    font-size: 90%;
}

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

.foot {
    text-align: center;
    padding: 1rem;
    opacity: 75%;
    font-size: 80%;

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

.ss {
    padding: 0;
    width: 15%;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rss {
    position: absolute;
    top: 15px;
    left: 20px;
}

.buttons {
    text-align: center;
}

.links {
    display: flex;
    flex-wrap: nowrap;

    & > div {
        flex: 1;
        text-align: center;
    }
}

.note {
    text-decoration: underline;
    text-decoration-style: dotted;
    display: inline-block;
}

.note-content {
    position: relative;
    visibility: hidden;
    position: absolute;
    padding: 10px;

    font-style: italic;
    align-items: right;
    background-color: var(--page);
    border: 1px solid var(--border);
    box-shadow: 1px 1px;
}

.note:hover .note-content {
    visibility: visible;
    opacity: 1;
}

.mobile {
    display: none;
}

.asterisks {
    text-align: center;
    margin: 2rem;
    color: gray;
}

.guestbook {
    text-align: center;
    a {
        animation: rainbow 10s infinite; 
    }
    a:hover {
        color: var(--page);
        animation: rainbow-bg 10s infinite; 
    }
}

@keyframes rainbow {
    0%{color: orange;} 10%{color: purple;} 20%{color: red;} 30%{color: CadetBlue;}
    40%{color: yellow;} 50%{color: coral;} 60%{color: green;} 70%{color: cyan;}
    80%{color: DeepPink;} 90%{color: DodgerBlue;} 100%{color: orange;}
}
@keyframes rainbow-bg {
    0%{background-color: orange;} 10%{background-color: purple;} 20%{background-color: red;}
    30%{cbackground-olor: CadetBlue;} 40%{background-color: yellow;} 50%{background-color: coral;}
    60%{background-color: green;} 70%{background-color: cyan;} 80%{background-color: DeepPink;}
    90%{background-color: DodgerBlue;} 100%{background-color: orange;}
}

#theme {
    text-align: right;
    position: absolute;
    top: 15px;
    right: 15px;
}

.fatass {
    width: 20%;
    cursor: url("/media/sillies/teto.png"), auto;
}

.john {
    margin-left:auto;
    display:block;
    margin-right:auto;
    max-width:732px;
    width:100%;
    height:94px;
    border:none
}

/* LANGUAGES */

@font-face {
    font-family: "nasin-nanpa";
    src: url("/fonts/nasin-nanpa-4.0.2.otf") format("opentype");
}

.tp, .eo, .es, .en {
    line-height: 180%;

    h1, h2, h3 {
        font-weight: normal;
    }
}

.eo, .es {
    h1 {
        text-transform: uppercase;
    }

    h2 {
        font-style: italic;
    }
}

.sp {
    font-family: nasin-nanpa, sans-serif;
    text-align: left;
    
    p {
        margin-bottom: 5%;
    }

    h1 {
        font-size: 120%;
    }

    h1, h2 {
        font-weight: normal;
    }

    b, em {
        color: gray;
        font-style: normal;
    }

    ul {
        margin-top: -2rem;
        padding-inline-start: 1.8rem;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    body {
        padding: 0;
        font-size: 80%;
    }
    video {
        width: 50%;
    }
    .sp {
        ul { margin-top: -1rem; }
    }
    .box {
        padding: 1rem;
        border-left: 0;
        border-right: 0;
        box-shadow: 0 0;
    }
    .ss {width: 30%;}
    .mobile {display: block;}
    .table {text-align: left;}
}

/* cursr */

* {
    cursor: url(/media/cursor.cur), auto;
}