/*
@media (max-width: 799px) {
    .container {
        width: 100%;
    }
}
*/

@font-face {
    font-family: SourceSansPro;
    src: local("Source Sans Pro SemiBold"),
            url(img/SourceSansPro-SemiBold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: OptimusPrinceps;
    src: local("OptimusPrincepsSemiBold"),
            url(img/OptimusPrincepsSemiBold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: akaPotsley;
    src: local("akaPotsley"),
            url(img/akaPotsley.ttf);
    font-weight: bold;
}

#topbar {
    position: relative;
    z-index: 1;
    background-image: url("img/NavBG.png");
    background-size: 100% 100%;
    margin-bottom: 0px;
    align-items: center;
    padding-top: 0.75rem;
    box-shadow: 0 2px 8px black;
}

#topbar img {
    max-height: 4em;
    width: auto;
}

#topbar .column {
    text-align: center;
}

#main-menu a {
    background-image: url("img/Navbutton.png");
    background-size: 100% 100%;
    padding: 5px 15px;
    color: black;
    font-family: "OptimusPrinceps";
    font-size: 1.5em;
    margin: 0 5px;
}

#slideshow img {
    width: 100%;
    box-shadow: 0 3px 5px black;
}

#download::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 200px;
    background-image: url("img/Badges_Background.png");
    background-size: 100% 100%; 
    box-shadow: 0 3px 5px black;
}

#slideshowbarseparator {
    position:absolute;
    width:100%;
    height:30px;
    z-index:2;
    margin-top:-10px;
}

/*
#download {
    background-image: url("img/Badges_Background.png");
    background-size: 100% 100%; 
}
*/

#badges {
    width: 100%;
    height: 120px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
}

#badges div {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    margin: auto;
}

#badges img {
    position: relative;
    width: calc(50% - 60px);
    max-width: 200px;
    height: auto;
    margin: 15px;
}

@media (max-width: 400px) {
    #badges img {
        margin: 5px;
        width: calc(50% - 20px);
    }
}

.container {
    width: 800px;
    max-width: 100%;
    background-image: url("img/ContentOuterBackground.png");
    background-size: 100% 100%;
    padding: 0.5em;
    color: white;
    font-family: "SourceSansPro";
}

#content {
    background-image: url("img/ContentInnerBackground.png");
    background-size: 100% 100%;
    padding: 4em;
}

@media (max-width: 800px) {
    #content {
        padding: 5%;
    }
}

#content h2 {
    font-family: "akaPotsley";
    font-size: 2em;
    color: gold;
}

#content h3 {
    font-family: "akaPotsley";
    font-size: 1.5em;
    color: gold;
}

#content .image-column {
    max-width: 200px;
    text-align: center
}
@media screen and (max-width: 769px) {
    #content .image-column {
        max-width: 100%;
    }
    #content .image-column img {
        width: 200px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
}

#cloud-bg {
    background-image: url("img/CloudsBG.jpg");
    background-repeat: repeat;
}

@media (min-width: 900px) {
    #cloud-bg {
        padding-bottom: 5em;
    }
}

.content strong {
    color: white;
    font-family: "OptimusPrinceps";
    text-decoration: underline;
    text-transform: uppercase;
}

#content a {
    color: #58a7e0;
}
#content a:hover {
    color: #488fc2;
}

footer {
    padding: 2em;
    font-family: "OptimusPrinceps";
}

footer a {
    text-decoration: underline;
    color: white;
}
footer a:hover {
    color: #ccc
}

@media screen and (max-width: 769px) {
    .reverse-column-order {
        display: flex;
        flex-direction: column-reverse;
    }
}

.is-vertical-center {
    display: flex;
    align-items: center;
  }

#content .toc a {
    color: white;
    text-decoration: underline;
}

#content .toc a:hover {
    color: #ccc;
}

.content h4 {
    color: white;
}

.content h5 {
    color: white;
}

.portrait {
    border-radius: 50%;
}