@import url("https://use.typekit.net/qqr1jnt.css");

@media(prefers-contrast: more) {
    :root {
        --link-color: #0000FF;
    }
}

@media(prefers-contrast: no-preference) {
    :root {
        --link-color: #31A5BC;
    }
}

@media(prefers-color-scheme: dark) {
    :root {
        --bg-color: #424242;
        --fg-color: #222222;
        --text-color: #DDDDDD;
        --link-color: #31A5BC;
    }
}

@media(prefers-color-scheme: light) {
    :root {
        --bg-color: lightgrey;
        --fg-color: #FFFFFF;
        --text-color: #000000;
        --link-color: #31A5BC;
    }
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    font-family: proxima-nova, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-weight: bold;
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

.container {
    display: flex;
    flex-direction: column;
    padding: 0.5em 5%;
}

.container .container {
    padding: 0 2.5%;
}

.container:first-child {
    padding-left: 0;
}

.container:last-child {
    padding-right: 0;
}

.window {
    margin: 0.5em 0;
    box-shadow: 1px 1px 3px #111;
    padding: 1em;
    background: var(--fg-color);
    height: fit-content;
}

.window div {
    margin: 1em;
}

.window li {
    padding: 0.25em;
}

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

#title {
    background: #4F2170;
    color: white;
    padding: 2% 5%;
}

#title h1 {
    margin: 0;
    padding-bottom: 0.5%;
}

#title h2 {
    margin: 0;
    font-size: medium;
}

.alert label {
    height: fit-content;
    width: fit-content;
}

.alert label::after {
    content: url(../images/close.svg);
    width: 1em;
    height: 1em;
    display: block;
    border-radius: 10px;
    padding: 0 1px 2px 1px;
}

.alert label:hover::after {
    background: #0005;
    
}

.alert label::after {
    transition: background calc(var(--def-anim-time) * 0.5) ease;
}

input.alert,
#dismiss-alert1:checked ~ #alert1 {
    display: none;
}

.alert p {
    margin: 0.5em 0.20em 0.5em 0;
}

.alert {
    display: flex;
    padding: 0.2em 0.1em 0.2em 0.5em;
    background: #FF8080;
    border-radius: 5px;
    border: 3px solid #ce4848;
    width: fit-content;
    color: black;
}

.table {
    background: var(--fg-color);
    padding-right: 1em;
    padding-left: 1em;
    padding-bottom: 0.5em;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead {
    font-size: 1.2em;
}

.table thead tr th {
    padding: 0.5em;
}

.table-contents tr td {
    padding: 0.5em;
    border-top: 1px solid #333;
}