/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Imports */
@import "_variables.css";
@import "_components.css";

/* Reset basics */
* {
    /*box-sizing: border-box;*/
    margin: 0;
    padding: 0;
}

/* Layout */
.layout-container {
    width: calc(270px + 1000px + 270px + 2 * (10px));
    margin: 1rem auto;
}

.three-column-layout {
    display: grid;
    grid-template-columns: 270px 1000px 270px;
    gap: 3px 10px;
}

.column {
    border-right: none;
    min-width: 0;
    overflow: hidden;
}

.column-left {
    border-left: none;
}

.column-left,
.column-right {
    font-size: 16px;
    text-align: center;
}

/* Body */
body {
    background-color: var(--clr-surface-a0);
    color: var(--clr-primary-a60);
    font-family: var(--font-main);
    font-size: 24px;
    line-height: 1.2;
}

h1 {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    font-size: 72px;
    color: var(--clr-primary-a60);
    margin: 15px;
}

.site-title {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.site-title h1 {
    margin-block: 2rem;
}

h2 {
    text-align: center;
    color: var(--clr-primary-a60);
    margin: 0;
}

hr {
    height: 1px;
    border-width: 0px;
    color: var(--clr-primary-a60);
    background-color: var(--clr-primary-a60);
    margin-top: 5px;
    margin-bottom: 5px;
}

nav {
    grid-column-start: 1;
    grid-column-end: 4;
    font-size: 16px;
    margin-bottom: 3px;
}

nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--clr-surface-a0);
    justify-content: center;
    border: 10px solid var(--clr-primary-a0);
    border-radius: 5px;
}

nav ul li {
    float: left;
    text-align: center;
}

nav ul li a {
    display: grid;
    color: var(--clr-primary-a60);
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    margin-left: 3px;
    margin-right: 3px;
}

ul li a:hover {
    background-color: var(--clr-primary-a0);
}

.en-jp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
}

.section,
.en-jp div {
    padding: 10px;
    background-color: var(--clr-surface-a0);
    border: 10px solid var(--clr-primary-a0);
    border-radius: 5px;
    margin-bottom: 3px;
}

.section button {
    padding: 10px;
    border: none;
    background: none;
}

.diary-list {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.diary-content {
    text-align: center;
    p {
        margin-block: 1rem;
    }
}

#statuscafe {
    padding: 10px;
    background-color: var(--clr-surface-a0);
    border: 10px solid var(--clr-primary-a0);
    border-radius: 5px;
    margin-bottom: 3px;
}

#statuscafe-username {
    margin-bottom: 0.5em;
}
#statuscafe-content {
    margin: 0;
}

.changelog > table {
    width: 100%;
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    border: 10px solid var(--clr-surface-a0);
}

.changelog > table a {
    color: inherit;
    text-decoration: none;
}

textarea {
    height: 110px;
    width: 200px;
    resize: none;
}

th,
tr,
td {
    padding: 6px;
    border: 1px solid var(--clr-primary-a60);
    border-radius: 5px;
}

td ul {
    margin-top: 1px;
    margin-bottom: 1px;
    padding-inline-start: 40px;
}

div.book-scroll {
    width: 100%;
    overflow: scroll;
    white-space: nowrap;
}

div.book-scroll img {
    padding: 6px;
    max-width: 150px;
    max-height: 220px;
}

.music-player {
    text-align: left;
}

div.music-scroll {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    overflow-y: auto;
}

div.music-scroll img {
    padding: 0px;
    border: 3px solid var(--clr-primary-a0);
    border-radius: 5px;
    margin: 0px 3px 6px;
    max-width: 100px;
    max-height: 100px;
    aspect-ratio: 1;
}

.cdr-widget {
    color: var(--clr-primary-a60);
    font-family: var(--font-main) !important;
    font-size: 16px;
    text-transform: lowercase;
}

.monitoring {
    background-image: url(https://ddnikki.moe/monitoring/widget3.png) !important;

}

/* alternate logo for widget3.png: */
.monitoringtext {
    content: url(https://ddnikki.moe/monitoring/friendlogomini.png) !important;
}

a.monitoringlink, a.monitoringlink:hover {
  font-family: "Cafe24 Dongdong", "Mamelon", "Brush Script MT", cursive;
}