:root {
    --small: 13px;
    --medium: 25px;
    --big: 60px;
}

html {
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    background-image: linear-gradient(180deg, #2865FF 0%, #2C134B 100%);
    background-color:#2C134B;
    background-repeat: no-repeat;
}

body {
    
    padding: var(--medium);
    display: flex;
    flex-basis: 100%;
    gap: 10px;
    margin: 0;

    /* Basic Text */
    color: #FFF;
    font-family: "DM Serif Text";
    font-size: var(--small);
    font-style: italic;
    font-weight: 400;
    line-height: 150%;
}

@media screen and (max-width: 750px) {
    body{
        flex-direction: column;
    }
}



h1{
    font-family: Gloock;
    font-size: var(--big);
    font-style: normal;
    font-weight: 400;
    line-height: 60%;
    hyphens: manual;
    margin: 0;
    color: transparent;
    background-clip: text;
    background-image: linear-gradient(rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 1) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-bottom: 10px;
}

h2{
    font-family: "Sofia Sans Extra Condensed";
    font-size: var(--medium);
    font-style: normal;
    font-weight: 200;
    line-height: 150%;
    margin: 0;
}


header {
    display: flex;
    width: 175px;
    padding: var(--small);
    flex-direction: column;
    align-items: flex-end;
    gap: var(--small);
    flex-shrink: 0;
    align-self: stretch;
    text-align: right;
    margin: 0;
}

    header p{
        margin: 0;
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
    }

@media screen and (max-width: 750px) {
    .header{
        flex-direction: column;
        flex-wrap: wrap;
        width: auto;
        padding: var(--medium);
        text-align: center;
        align-items: center;
    }
}


main {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--small);
    flex-shrink: 0;
    align-self: stretch;
    flex-grow: 2;
}

.sidebar{
    display: flex;
    margin: 9px 0px;
    align-self: stretch;
    width: var(--small);
}

    .sidebar.left{
        border-radius: var(--small) 0 0 var(--small);
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
        border-left: 1px solid #FFF;
    }

    .sidebar.right{
        border-radius: 0 var(--small) var(--small) 0;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
        border-right: 1px solid #FFF;
    }

.stage{
    display: flex;
    flex-direction: column;
    align-self: stretch;
    flex-grow: 2;
}

    .stage div{
        display: flex;
        flex-direction: row;
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
        align-items: center;
        gap: var(--small);
        
    }

    .stage span{
        display: flex;
    }

    .stage hr{
        display: flex;
        flex-grow: 1;
        height: 1px;
        background-color: white;
        border: 0;
    }

    @media screen and (max-width: 1028px) {
        .stage div.bottombar{
            align-items: end;
        }

        .stage .poem{
            max-width: 50dvw;
            white-space: initial;
        }

        .bottombar hr{
            flex-grow: 1;
            margin-bottom: 8px;
        }
    
    }

    @media screen and (max-width: 750px) {
        .stage .poem{
            max-width: 90dvw;
            white-space: initial;
        }

        .bottombar hr{
            display: none;
        }
    }

    #content{
        flex-grow: 2;
        background-image: url(../img/stage-bg.png);
        background-size: 10px;
        margin: var(--small) 0;
        align-items: center;
        flex-direction: column;
    }

        #content canvas{
            max-width: 60dvw;
            overflow: hidden;
        }

        @media screen and (max-width: 750px) {
            #content canvas{
                max-width: 70dvw;
                max-height: 50dvh;
            }
        }