.bg {
    background: url("../img/Backgrounds/Shadowgame_BG.png") no-repeat;
    background-size: cover;
    background-position: 0% 33%;
    height: 50vh;
}

main {
    color: black;
}

main p a {
    color: black;
}

main img {
    width: 30%;
    height: auto;
    float: right;
}

main h2 {
    font-size: 3em;
    margin: 2em 0 .7em 1em;
}

main p {
    font-size: 2em;
    margin-left: 1.6em;
}

#introduction {
    margin-top: 5%;
}

.content ol {
    font-family: "Lato Normal";
    font-size: 1.6em;
    margin-left: 1.6em;
}

.content ol li {
    margin: 1%;
    letter-spacing: 1px;
}

#spacer {
    padding: 2rem;
}

#cyan {
color: #00aeef;
}

#green {
    color: #7ac143;
}

#magenta {
    color: #ec008c;
}

#orange {
    color: #f47b20;
}

#darkblue {
    color: #2e3192;
}

@media screen and (max-width: 900px){
    .bg {
       background-position: 20% 80%;
       background-position-y: 30%;
    }
}

@media screen and (max-width: 820px){
    .bg {
        background: url(../img/Backgrounds/Tablet_Shadowgame_BG.png) no-repeat;
        background-position: 1% 99%;
       background-position-y: 80%;
    }
}

@media screen and (max-width: 800px){
    .bg {
       background: url(../img/Backgrounds/Tablet_Shadowgame_BG.png) no-repeat;
       background-position: 1% 99%;
       background-position-y: 65%;
    }
}


@media screen and (max-width: 600px){
    .bg {
       background-position: 7% 93%;
       background-position-y: 65%;
    }
}

@media screen and (max-width: 520px){
    .bg {
       background: url(../img/Backgrounds/Tablet_Shadowgame_BG.png) no-repeat;
       background-position: 10% 90%;
       background-position-y: 65%;
    }
}
@media screen and (max-width: 480px){
    .bg {
       background: url(../img/Backgrounds/Mobile_Shadowgame_BG.png) no-repeat;
       background-position: 10% 90%;
       background-position-y: 58%;
    }
}

@media screen and (max-width: 420px){
    .bg {
       background: url(../img/Backgrounds/Mobile_Shadowgame_BG.png) no-repeat;
       background-position: 12% 88%;
       background-position-y: 58%;
    }
}

@media screen and (max-width: 380px){
    .bg {
       background: url(../img/Backgrounds/Mobile_Shadowgame_BG.png) no-repeat;
       background-position: 13% 87%;
       background-position-y: 58%;
    }
}