/*
    TODO:
 */

* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;

     list-style: none;
     text-decoration: none;

     font-family: Tahoma, Arial, sans-serif;
     color: #373D44;
 }

 :root {
     --padding-v: 0.5em;
     --padding-h: 0.5em;
 }

body {
    display: flex;
    justify-content: center;

    padding: var(--padding-v) var(--padding-h);

    background-color: #B7C9E2;
}

main {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

main > ul {
    display: flex;
    flex-direction: column;
    gap: 1em;

    flex-shrink: 1;
}

main > ul > li {
    background-color: #DEE6F2;

    border: 0.1em solid #5C6571;
}

.sheader {
    padding: 0.5em;

    background-color: white;
    color: #5C6571;

    border-bottom: 0.1em solid #5C6571;
}

.sbody {
    padding: 0.5em;
}

a {
    color: #3776CD;
}

 a span {
     overflow: hidden;
     display: inline-block;
     vertical-align: bottom;
     width: 3em;
 }

 a span::after {
     display: inline-block;

     content: "...";
     white-space: nowrap;

     border-right: 0.7em solid transparent;

     transform: translateX(calc(-100% + 0.7em));
     transform-origin: left;

     transition: transform 0.75s steps(3);
 }

 a:hover span::after {
     transform: translateX(0%);
     transition-duration: 2.25s;
     animation: blink 0.75s step-end infinite;
 }

 @keyframes blink {
     from, to {
         border-color: currentColor;
     }
     50% {
         border-color: transparent;
     }
 }

 .bold {
     font-weight: 800;
 }

.semibold {
    font-weight: 600;
}

.itext {
    display: flex;
    align-items: center;

    margin: -1em 0 -1em -0.6em;
}

.itext img {
    width: 2.5em;
    height: 2.5em;
}

.itext p {
    text-wrap: nowrap;
}

.video iframe {
    width: min(calc(30vw + 10em), calc(100vw - 2em));
    height: clamp(15em, 25vw, 20em);
}

.music .sbody {
    display: grid;
    gap: 0.25em;
}

.cover img {
    width: 15em;
    height: 15em;

    border: 0.1em solid #5C6571;
}