@font-face { font-family: Silkscreen; src: url("fonts/Silkscreen-Regular.ttf"); }
@font-face { font-family: Sono; font-weight: normal; src: url("fonts/Sono-Regular.ttf"); }
@font-face { font-family: Sono; font-weight: bold; src: url("fonts/Sono-Bold.ttf")}
/*@font-face { font-family: Sono; font-weight: lighter; src: url("fonts/Sono-Light.ttf")}*/

body {
    background-color: #2A5380;
    color: white;
    font-family: Sono;
}

.bg-darkest { background-color: #1E3C5C; }
.bg-dark { background-color: #2A5380;}
.bg-lightest { background-color: #54A7FF;}

/* old fashioned center column */
.wrapper {
    width: 18cm;
    margin: 0 auto;
    padding: 2em;
}

a {
    color: white;
}
b, .text-shadow {
    text-shadow: .2em .2em #132538;
}
img {
    margin: 2em;
}
h1 {
    font-size: 50pt;
}

.whitespace {
    white-space: pre;
}

.shadow {
    box-shadow: .5em .5em 2em #132538;
}

.img-small {
    max-height: 8em;
}
img.maxwidth {
    max-width: 100%;
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.relative {
    position: relative;
}
.column {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.overlay-parent {
    position: relative;
    width: 100%;
    height: 14em;
    pointer-events: none;
}
.overlay-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.left { justify-content: flex-start; }
.right { justify-content: flex-end; }
.center { justify-content: center; }
.center-align {align-items: center;}
.space-around { justify-content: space-around;}
.no-margins { margin: 0; padding: 0; }

.smalltext {
    font-size: xx-small;
}

#face {
    position: relative;
    top:1em;
    height: 14em;
}

iframe {
    background-color: #1E3C5C;
}

@media screen and (max-width: 22cm) {
    .wrapper {
        width: auto; /* Full width on small screens */
        padding: 10px; /* Add some padding */
    }
    .row {
        flex-direction: column;
    }
    #face{
        height:8em;
        left:30%;
    }
}