@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

:root{
    --teal: #066B65;
    --light-teal: #d5ebe9;
    --vibrant-teal: #09978e;
    --darker-teal: #022c29;
}

body{
    background: conic-gradient(#fff 25%, #066B6570 0 50%, #fff 0 75%, #0292a570 0) 0 0/150px 150px;
}
a{
    color: var(--teal)
}
.container{
    width: 90%;
    margin: auto;
    padding: 1em;
    display: flex;
    font-family: 'arial';
    height: 94vh;
}
.aside, .continued{
    background-color: #ffffffcc;
    width: 40%;
    padding: 0.5em 1em;
    font-size: 1.25em;
    height: 95.3vh
}
.aside{
    border-radius: 15px 0px 0px 15px;
}
.continued{
    border-radius: 0px 15px 15px 0px;
    overflow-y: scroll;
    font-size: 1.15em;
}
.image-holder{
    margin: auto;
    text-align: center;
    background-color: #ffffffaa;
}
.image-holder > img{
    width: 55%;
}
.continued{
    justify-content: flex-end;
}
h1{
    font-family: fredoka;
}
h1 > p{
    margin: 0.2em 0;
    font-size: 0.6em;
    font-family: arial;
}
table{
    font-family: 'Fredoka';
    margin: auto;
    width: 95%;
    font-size: 1em;
}
td{
    padding: 0.35em;
}
td:nth-child(even){
    background-color: var(--light-teal);
    width: 65%;
}
td:nth-child(odd){
    background-color: var(--teal);
    color: var(--light-teal);
    font-weight: bold;
    width: 35%;
    font-size: 1.0em;
}
#bio{
    width: 95%;
    margin: 1em auto;
    font-family: fredoka;
    font-size: 1em
}
#stories li::marker{
    content: '\2710';
    color: var(--orangey);
}
@media only screen and (max-width: 430px) {
    .container{
        width: auto;
        margin: auto;
        padding: 0;
        display: block;
        font-family: 'arial';
    }
    h1{
        text-align: center;
    }
    .aside, .continued{
        background-color: #ffffffcc;
        width: auto;
        font-size: 1.25em;
        height: auto;
    }
    .aside{
        border-radius: 15px 15px 0px 0px;
    }
    .continued{
        border-radius:  0px 0px 15px 15px;
        overflow-y:visible;
    }
    .continued ul, .continued p{
        font-size: 0.75em
    }
    table{
        font-family: 'Fredoka';
        margin: auto;
        width: 90%;
        font-size: 0.75em;
    }
    td{
        padding: 0.35em;
    }
    td:nth-child(even){
        background-color: var(--light-teal);
        width: 65%;
    }
    td:nth-child(odd){
        background-color: var(--teal);
        color: var(--light-teal);
        font-weight: bold;
        width: 35%;
        font-size: 1.0em;
    }
    #bio{
        width: 95%;
        margin: 1em auto;
        font-family: fredoka;
        font-size: 0.8em
    }
}