html {
    font-family: helvetica, arial, sans-serif;
    color: #FFFFFF;
}
body {
    background-color: #202125;
}
#wrapper {
    max-width: 900px;
    margin: auto;
    min-width: 360px;
}
header {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}
header img {
    height: 150px;
}
a {
    color: #FFFFFF;
    text-decoration: none;
}
nav {
    font-weight: bold;
    text-align: center;
    padding: 1px;
    border-radius: 10px;
    margin-top: 10px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
nav li a {
    display: block;
    text-align: center;
    background-color: #c0c0c0;
    color: #41444a; 
    border-bottom: 4px solid #757575;
    border-top: 4px solid #e7e7e7;
    padding: 8px 16px;
    margin: 4px;
    border-radius: 8px;
  }
nav li a:hover {
    color: #ffffff;
    background-color: #41444a;
    border-top: 4px solid #000000;
    border-bottom: 4px solid #575757;

}
nav li a:active {
    background-color: #4069c2;
    color: #ffffff; 
    border-bottom: 4px solid #2a4185;
    border-top: 4px solid #6e9adb;
}

section {
    text-align: center;
    max-width: 710px;
    border-radius: 10px;
    background-color: #333333;
    border-bottom: 4px solid #000000;
    border-top: 4px solid #575757;
    margin-bottom:10px;
    margin-top:10px;
}
#textbox {
    border-radius: 8px;
    margin: 10px;
    padding: 8px 16px;
    background-color: #414141;
    border-top: 4px solid #000000;
    border-bottom: 4px solid #575757;
}
#closed {
    text-align: center;
    border-radius: 8px;
    margin: 8px;
    padding: 8px 16px;
    background-color: #c75a68;
    border-top: 4px solid #ad4755;
    border-bottom: 4px solid #e47281;
}
#open {
    text-align: center;
    border-radius: 8px;
    margin: 8px;
    padding: 8px 16px;
    background-color: #2e8c66;
    border-top: 4px solid #1f6b4d;
    border-bottom: 4px solid #41b184;
}
h2 {
        display: block;
    text-align: center;
    background-color: #c0c0c0;
    color: #41444a; 
    border-bottom: 4px solid #757575;
    border-top: 4px solid #e7e7e7;
    padding: 8px 16px;
    margin: 8px;
    border-radius: 8px;
}
footer {
    margin-top: 10px;
    border-radius: 10px;
    background-color: #333333;
    border-bottom: 4px solid #000000;
    border-top: 4px solid #575757;
    text-align: center;
    padding: 10px;
    font-size: 75%;
}
p   {
    font-size: 110%;
    padding-left: 10px;
    padding-right: 10px;
}
#imagedesc {
    text-align: center;
    border-radius: 8px;
    margin: 8px;
    padding: 8px;
    background-color: #202125;
    border-top: 4px solid #000000;
    border-bottom: 4px solid #575757;
}
#scene1 {
    background-image: url("https://i.imgur.com/98JXe3S.gif");
    aspect-ratio: 16/9;
    background-size: 100% 100%;
    border-radius: 8px;
}
#scene3 {
    background-image: url("https://i.imgur.com/ToeQsrf.gif");
    aspect-ratio: 76/50;
    background-size: 100% 100%;
    border-radius: 8px;
}
#scene2 {
    background-image: url("https://i.imgur.com/m5Zj8Qv.gif");
    aspect-ratio: 16/9;
    background-size: 100% 100%;
    border-radius: 8px;
}
iframe {
    aspect-ratio: 16/9;
    width: 100%;
}
#char1 {
    background-image: url("https://i.imgur.com/vb5bGre.gif");
    aspect-ratio: 944 / 856;
    background-size: 100% 100%;
    border-radius: 8px;
}
#char2 {
    background-image: url("https://i.imgur.com/ldkigi2.gif");
    aspect-ratio: 1160/880;
    background-size: 100% 100%;
    border-radius: 8px;
}
#char3 {
    background-image: url("https://i.imgur.com/MowKFOV.gif");
    aspect-ratio: 1064/832;
    background-size: 100% 100%;
    border-radius: 8px;
}
#icon1 {
    background-image: url("https://i.imgur.com/QUt8RzB.gif");
    aspect-ratio: 990/900;
    background-size: 100% 100%;
    border-radius: 8px;
}
#icon2 {
    background-image: url("https://i.imgur.com/ULyHAMA.gif");
    aspect-ratio: 1616/1200;
    background-size: 100% 100%;
    border-radius: 8px;
}
#icon3 {
    background-image: url("https://i.imgur.com/3Vyr2jh.png");
    aspect-ratio: 808/592;
    background-size: 100% 100%;
    border-radius: 8px;
}
#base {
    text-align: right;
}
#price {
    text-align: left;
}
form { 
    margin: 8px;
    padding: 8px;
    background-color: #202125;
    border-top: 4px solid #000000;
    border-bottom: 4px solid #575757;
} 
input{
    min-width:98%;
    max-width:98%;
}
label[for="name"],label[for="email"],label[for="references"],label[for="description"] {
    float: left;
    margin-left: 5px;
}
#tos{
    min-width: 0%;
    max-width: 10%;
    clear: both;
}
textarea    {
    min-width:98%;
    max-width:98%;
    height: 50px;
    margin-bottom: 20px;
}
@media (min-width: 636px) {
    nav {
        max-width: 710px;
        margin: auto;
    }
    section {
        margin-left: auto;
        margin-right: auto;
    }
    footer {
        max-width: 690px;
        margin-left: auto;
        margin-right: auto;
    }
    nav ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    nav li a {
        display: flex;
        flex: auto;
    }
}