header, div.mainhead p{
    color: var(--white);
    font-size: calc(1rem + 3vw);
    text-shadow: 0 0 5px var(--gold),
                 0 0 7px var(--gold),
                 0 0 10px var(--gold),
                 0 0 12px var(--gold),
                 0 0 16px var(--gold),
                 0 0 50px var(--gold),
                 0 0 70px var(--gold);
    padding-bottom: 0;
}

header.mainhead{
    margin: 5vh 0;
    width: 100%;
    height: 30vw;
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    background-size: 100%, 50%, 50%;
    background-position-x: center, left, right;
    background-repeat: no-repeat, no-repeat, no-repeat;
    box-shadow: var(--white_glow);
}

header.mainhead#tales{
    background-image: linear-gradient(45deg, transparent, var(--black) 40%, var(--black) 60%, transparent), url(../media/bookwriting.jpg), url(../media/code.jpg); 
}

header.mainhead#skills{
    background-image: linear-gradient(45deg, transparent, var(--black) 40%, var(--black) 60%, transparent), url(../media/code2.jpg), url(../media/database.png); 
}

header.mainhead#progress{
    background-image: linear-gradient(45deg, transparent, var(--black) 40%, var(--black) 60%, transparent), url(../media/scroll.jpg), url(../media/cliff.jpg); 
}

div.mainhead{
    display: grid;
    width: 60%;
    height: 95%;
    place-self: center;
    place-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:"one . . ."
                        ". two . ."
                        ". . three ."
                        ". . . four";
}

#mainhead p{
    padding: 0;
    text-align: center;
}


p#one{
    grid-area: one;
}

p#two{
    grid-area: two;
}

p#three{
    grid-area: three;
}

p#four{
    grid-area: four;
}

section{
    align-self: center;
    width: 60%;
    color: var(--white);
    padding: 0 0 30vh 0;
}

section > header{
    column-span: all;
    text-align: center;
    font-size: 40pt;
    text-decoration: white dashed overline underline;
    margin: 1em 0;
}

article{
    display: block;
    min-width: 300px;
    column-width: 50ch;
    column-count: 3;
}

article *{
    line-height: 200%;
}

figure{
    column-span: all;
    box-shadow: var(--white_glow);
    max-width: 40%;
    min-width: 290px;
    margin: 50px auto;
}

figure img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

figure iframe{
    aspect-ratio: 16/9;
    height: 100%;
    width: 100%;
}

figcaption{
    font-size: 14pt;
    text-align: center;
    padding: 10px;
    color: var(--black);
    background-color: var(--white);
}

p{
    padding: 0 0 10px 0;
    font-size: 16pt;
    break-inside: avoid;
}

p#right{
    text-align: right;
}

ul{
    list-style-type: "\2666";
    list-style-position: inside;
    font-size: 16pt;
}

li{
    padding: 3px;
}

table{
    box-shadow: var(--white_glow);
    margin: 10vh;
    width: 95%;
    align-self: center;
    background-color: var(--white);
    table-layout: fixed;
}

table tr{
    height: 40px;
}

table th, table td{
    border: 1px solid var(--black);
}

table td{
    color: var(--black);
    font-size: 14pt;
    
}

col#java{
    background-color: #e79497;
}

col#c{
    background-color: #5e798d;
}

col#python{
    background-color: #faefc5;
}

col#html{
    background-color: #ecc7b7;
}

col#php{
    background-color: #AEB2D5;
}

col#unity{
    background-color: #797979;
}

thead > tr > th{
    font-size: 20pt;
    background-color: var(--white);
    border: none;
}

td > p{
    text-align: center;
    font-weight: bold;
}

td > ol{
    font-size: 12pt;
    padding-left: 10px;
    margin-left: 15px;
}

ol > ol{
    font-size: 10pt;
    padding-left: 15px;
    margin-left: 20px;
}

ol > li, ol > ol > li{
    list-style-position: outside;
}

ol > li{
    list-style: upper-roman;
}

ol > ol > li{
    list-style: lower-roman;
}

.redirects.entries{
    display: flex;
    flex-direction: column;
    height: 50vh;
    width: 90%;
    box-shadow: var(--white_glow);
    align-self: center;
    margin: 15vh;
    border-radius: 20px;
    background-repeat: no-repeat;
}

.redirects.entries > header{
    height: 20%;
    font-size: calc(1em + 2.5vw);
    text-align: center;
    color: var(--black);
}

#soon{
    background-image: linear-gradient(to bottom, var(--white) 20%, var(--gold) 40%)
}

#nov2023{
    background-image: linear-gradient(to bottom, var(--white) 20%, transparent 40%), url(../media/osu.jpg);
    background-size: cover, cover;
    background-position: top;
}

#oct2023{
    background-image: linear-gradient(to bottom, var(--white) 20%, transparent 40%), url(../media/college.jpeg);
    background-size: cover, cover;
    background-position: top;
}

body#article{
    background-image: url(../media/oldpaper.jpg);
}

section.article{
    width: 80%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff7e;
    margin: 5vh 0;
    padding: 5%;
    border-radius: 0 50px 0 0;
}

section.article p{
    font-size: calc(1em + 0.4vw);
    color: var(--black);
}

header.articlehead{
    background-image: linear-gradient(to right, var(--gold) 10%, transparent);
    padding: 5vh 5vh 5vh 5vw;
    display: grid;
    grid-template-columns: 1fr 2fr;

}

header > header{
    display: inline;
    width: 100%;
}

header > blockquote{
    text-align: right;
    font-style: italic;
    text-shadow: white;
    display: inline;
    margin: auto;
    width: 100%;
    font-size: calc(1rem + 1vw);
    font-family: 'Playfair Display', serif;
}

header.articlehead *{
    color: var(--black);
    text-shadow: var(--white_glow);
}

#talesform{
    width: 40%;
    align-self: center;
    border-radius: 50px;
}


@media screen and (max-width: 820px){
    header.mainhead#tales{
        background-image: linear-gradient(45deg, var(--gold), var(--black) 30%, var(--black) 70%, var(--gold)); 
    }

    div.mainhead{
        height: 90%;
    }

    section{
        column-count: 1;
    }

    section > header{
        text-decoration: none;
    }

    p#right{
        text-align: left;
    }

    .redirects.entries{
        height: 25vh;
        margin: 5vh;
    }

    form#talesform{
        width: 90%;
    }
}