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


body{
    background-color: #858CD4;
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sansita Swashed', sans-serif;
    font-size: 2em;
    color: #E8E1BA;
    text-align: center;
}

p{
    font-family: 'Arimo', 'Arial', sans-serif;
    font-size: 1em;
    color: #E5EEB1;
    text-align: left;
    text-wrap: wrap;
}

p + ul{
    font-family: 'Arimo', 'Arial', sans-serif;
    text-align: left;
    list-style-type: square;
    list-style-position: inside;
    margin-top: -.5em;
    margin-bottom: -.5em;
    color: #E5EEB1
}

article{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}



table.collapsible{
    margin: .5em;
    width: 80%;
}

.collapsible{
    font-family: 'Arimo', 'Arial', sans-serif;
    color: #9BC1BD;
    border: 1px solid #434555;
    border-collapse: collapse;
    padding: .5em;
}

.vertical-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em
}

.horizontal-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    wrap-option: wrap;
    padding: 1em
}


#banner{
    width: 100%;
    margin-top:10%;
    flex-grow: 1;
}

#frame {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #434555;
}

#moving-object {
    position: absolute;
    width: 1%;
    height: 1%;
    background-color: #EDEDED;
    top: 50%;
    right: 50%;
}