:root {
    --orchid-mist: rgb(193, 100, 222);
    --twilight-indigo: rgb(36, 54, 115);
    --onyx: rgb(14, 10, 18);
    --periwinkle: rgb(216, 202, 245);
}

@media only screen and (max-width: 650px) {
    .container div.sidebar {
        display: none;
    }
    .container {
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (min-width: 650px) {
    .container {
        display: grid;
        grid-template-areas:
            "header header"
            "sidebar topnav"
            "sidebar content"
            "footer footer";
        grid-template-columns: 1fr 3fr;
        flex-direction: column;
        /*align-items: start;*/
    }
}

@font-face{
    font-family: "Alegreya";
    src: url("../fonts/Alegreya-Regular.ttf")

}



body {
    background-image: url("../images/sparklebackground_slow.gif");
    width: 100%;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    color: var(--periwinkle);
    font-family: "Alegreya"
}

.container {
    width:80%
}

.header {
    grid-area: header;
    text-align: center;
    background-color: rgb(from var(--orchid-mist) r g b / 0.7);
    border: 5px solid var(--twilight-indigo);

}

.topnav {
    width: 75%;
    grid-area: topnav;
    text-align: center;
    display: flex;
    justify-content: space-between;
    border: 5px solid var(--twilight-indigo);
    padding: 1rem 1rem 1rem 1rem;
    margin: 1rem 1rem 1rem 1rem;
    background-color: rgb(from var(--orchid-mist) r g b / 0.7);
}

.sidebar li::marker {
    color: var(--onyx);
    content: "\2765";
}

.sidebar {
    border: 5px solid var(--twilight-indigo);
    margin: 1rem 1rem 1rem 1rem;
    grid-area: sidebar;
    text-align: left;
    background-color: rgb(from var(--orchid-mist) r g b / 0.7);
    display:flex;
    flex-direction: column;
    /*line-height: 2rem;*/
    /*align-items: start;*/

}

.sidebar-content{
    border: 3px dotted var(--twilight-indigo);
    margin: .7rem .7rem .7rem .7rem;
    padding: .3rem .3rem .3rem .3rem;
}


.sidebar-content h3, .sidebar-content ul{
    margin: .3rem 0 .3rem 0;
}

.content {
    width: 75%;
    border: 5px solid var(--twilight-indigo);
    grid-area: content;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 1rem 1rem;
    margin: 1rem 1rem 1rem 1rem;
    background-color: rgb(from var(--orchid-mist) r g b / 0.7);
}

.content section{
    flex: 1;
}

a {
    color: var(--periwinkle);
}
.footer {
    display:flex;
    flex-direction: column;
    grid-area: footer;
    border: 5px solid var(--twilight-indigo);
    background-color: rgb(from var(--orchid-mist) r g b / 0.7);
    align-items: center;
}