/* general */

/* text */

html {
    font-size: 16px;
}

body { /*"Saira Condensed" "Syne Mono"*/
    font-family: monospace;
    opacity: 1;
    text-align: center;
}

h1 {
    color: var(--color-titles, #000);
    font-size: 4rem;
    margin: 1% 0;
}

h2 {
    color: var(--color-titles, #000);
    font-size: 2rem;
    margin: 1% 0;
}

p {
    color: var(--color-text, #000);
    margin: 1% 0;
}


p.legend {
    font-size: 0.8rem;
}

p.poem {
    white-space: pre-line;
}

p.letter {
    margin: 10% 10%;
    white-space: pre-line;
    font-size: 0.8rem;
    text-align: justify;
}

/* colors */

:root { 
    --color-1: #fcf7eb; /* background */
    --color-2: #62515f; /* hover */
    --color-text: #333333;
    --color-titles: #4f90f0;
}

.bg-color {
    background-color: var(--color-1);
    /* background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"); */
    background-repeat: repeat;
}

.bandcamp-color {
    color: #0cacd7;
}

.soundcloud-color {
    color: #ff5500;
}

.instagram-color {
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tiktok-color {
    background: linear-gradient(45deg, #01f2eb, #ff004e);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.twitch-color {
    color: #9147ff;
}

/* header */

/* sections */

section {
    min-height: 20vh; /* set to 90vh for pdf */
    padding: 2rem 4rem;
    text-align: center;
}

section * {
    text-align: center;
}

/* media */

img {
    max-width: 50%;
    display: block;
    margin: 2% auto;
}

.img-cc {
    width: 70%;
    display: block; 
    margin: 1% auto;
    vertical-align: top;
}

.img-pm {
    width: 75%;
}

.img-ml {
    width: 35%;
    display: inline-block; 
    margin: 2% 1%; /* vertical horizontal */
    vertical-align: top;
}

.img-mi {
    width: 30%;
    min-width: 100px;
    display: inline-block; 
    margin: 2% 1%; /* vertical horizontal */
    vertical-align: top;
    font-size: 1rem; /* restore font size */
}

video {
    width: 50%;
}

/* lists */

li {
    color: var(--color-text, #000);
    margin: 1% 0;
    text-align: left;
}

.nolist {
    list-style-type: none;
}

.inline {
    display: inline;
}

/* links */

a {
    text-decoration: none;
    color: #4f90f0;
}

a:hover {
    color: var(--color-2);
}

/* footer */

/* mobile mode */

@media screen and (max-width: 640px) {
    html {
        font-size: 20px;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    section {
        padding: 1rem 2rem;
        min-height: auto;
    }

    img, video {
        max-width: 100%;
    }

    video, .img-cc, .img-pm, .img-ml, .img-mi {
        width: 90%;
        display: block;
        margin: 2% auto;
    }

    p.letter {
        margin: 5% 5%;
    }

}