@media only screen and (max-width: 1000px) {
    .Apps-main img, .Games-main img, .Novels-main img, .story-body img, .logo {
        float: none !important;
        width: 20em !important;
        padding: 2em 15% !important;
    }

    .AppsCont, .Apps, .GamesCont, .GamesCont2, .NovelsCont, .home-text, .mail, .whatsapp, .right, .left, .center, .datinput, .datoutput {
        float: none !important;
        width: 90% !important;
        padding: 2em !important;
    }

    .nav-urls a {
        padding: 1em!important;
    }

    nav ul {
        float: none;
        margin: 4em 0;
        width: 100%;
    }

    nav li {
        display: block!important;
        padding: 1em;
    }

    .sitemap {
        padding: 1em!important;
    }

    .calc {
        margin: 10%!important;
    }

    footer {
        max-width: 98%;
    }
}

@media only screen and (max-width: 600px) {
    .Games-main img, .Novels-main img, .logo {
        float: none !important;
        width: 10em !important;
        padding: 2em 25% !important;
    }

    .GamesCont, .NovelsCont, .home-text, .mail, .whatsapp {
        float: none !important;
        width: 90% !important;
        padding: 2em !important;
    }

    .header h1 {
        font-size: 4em;
        padding: 30% 2% 10%!important;
    }

    .calc {
        margin: 0!important;
    }

    .resText {
        width: 90%!important;
    }

    .calc input {
        font-size: 0.8em!important;
    }
}

/* Keyframes Animations */
@keyframes navbar-open {
    from { height: 4.4em; }
    to { height: 100%; }
}

@keyframes navbar-close {
    from { height: 100%  } 
    to { height: 4.4em; }
}

/* Navbar */
nav {
    position: fixed;
    width: 100%;
    background-color: black;
    height: 4.4em;
    margin: 0;
}

nav .name-div {
    float: left;
    padding: 0.8em;
}

nav .name-div img {
    height: 2.5em;
    width: 1.5em;
}

nav h1 {
    font-family: "Cabin Sketch", sans-serif;
    color: #578FCA;
    font-size: 2em;
    display: inline;
    padding: 0 1em;
    float: right;
    margin: 0;
}

nav .name-div a {
    text-decoration: none;
}

nav ul {
    float: right;
    margin: 0;
    padding: 1em 0;
    min-width: 55%;
}

nav li {
    list-style: none;
    display: inline;
    font-size: 1.25em;
}

.nav-urls a {
    color: darkcyan;
    text-decoration: none;
    padding: 1em 4%;
}

.nav-urls a:hover {
    color: #A0C878;
}

.nav-btns {
    float: right;
    padding: 0.75em;
}

nav button {
    background-color: transparent;
    border: 0;
}

nav button img {
    height: 2em;
    padding: 0.5em;
}

.btn-clicked-open {
    height: 100%;
    animation-name: navbar-open;
    animation-duration: 1s;
}

.btn-clicked-close {
    height: 4.4em;
    animation-name: navbar-close;
    animation-duration: 1s;
}

#close {
    padding: 0 1em;
}

.show {
    display: block;
}

.hide {
    display: none;
}

/* Header */
.header {
    min-height: 15em;
    background-image: linear-gradient(to bottom right, #034C53, #3F7D58);
}

.header h1 {
    font-size: 5em;
    font-family: "Cabin Sketch", sans-serif;
    color: white;
    text-align: center;
    margin: 0;
    padding: 10% 20% 5%;
}

/* Content Body */
body {
    margin: 0;
    font-family: "Delius", cursive;
    background-color: #ACD3A8;
    min-height: 100vh;
}

/* Home Page */
.logo {
    width: 10%;
    padding: 7% 5%;
}

.home-text {
    width: 80%;
    float: right;
}

.home-text h1, .sitemap h1 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 3em;
    text-align: center;
}

.sitemap, .Novels {
    padding: 4em!important;
}

.sitemap td {
    padding: 1em;
    font-size: 1.5em;
    width: 25%;
    border: 0.05em solid green;
}

.sitemap a {
    text-decoration: none;
    color: #0000FF;
}

.sitemap a:hover {
    color: #008B8B;
}

/** Scientific Facts **/
.SciCont {
    padding: 3em;
}

.SciCont h1 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 3em;
    text-align: center;
}

.SciCont h2 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 2em;
}

.SciCont h3 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
}

/*Novels*/
.Novels-main{
    padding: 2em;
}

.Novels {
    padding: 15em 2em 2em;
}

.Novels ul {
    list-style-type: none;
}

.Novels a {
    text-decoration: none;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 1.5em;
    color: #A62C2C;
}

.bold {
    color: #27445D;
    display: inline;
}

.Novels a:hover {
    color: #113F67;
}

.Novels h2, .Novels-main h2 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 3em;
    text-align: center;
}

.Novels-main img {
    width: 20%;
    float: right;
    padding: 2em;
}

.NovelsCont {
    width: 70%;
    float: left;
    padding: 2em;
}

.story-body {
    padding: 2em;
}

.story-body hr {
    border-top: 2px solid #333;
}

.left {
    padding: 2em;
    width: 45%;
    float: left;
}

.right {
    padding: 2em;
    float: right;
    width: 45%;
}

.center {
    padding: 1em 33%;
}

/** Games **/
.Games-main {
    padding: 2em;
    min-height: 8em;
}

.Games-main h2 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 3em;
    text-align: center;
}

.Games-main img {
    width: 20%;
    float: right;
    padding: 2em;
}

.GamesCont {
    width: 70%;
    float: left;
    padding: 2em;
}

.GamesCont2 {
    padding: 31% 2em 2em 2em;
}

.gamMinHead {
    font-family: "Cabin Sketch", sans-serif;
    color: #A62C2C;
}

/** Apps **/

.AppsCont {
    width: 70%;
    float: left;
    padding: 2em;
}

.Apps-main{
    padding: 2em;
}

.Apps {
    padding: 10em 2em 2em;
}

.Apps ul {
    list-style-type: none;
}

.Apps a {
    text-decoration: none;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 1.5em;
    color: #A62C2C;
}

.Apps a:hover {
    color: #113F67;
}

.Apps-main img {
    width: 20%;
    float: right;
    padding: 2em;
}

.calc {
    padding: 2em;
    margin: 0 0 0 35%;
}

.calc input {
    width: 2em;
    height: 2em;
    border-radius: 0.2em;
    font-size: 1.5em;
    margin: 0.2em;
    color: #F0F0F0;
    background-color: #346751;
    border-style: none;
}

.calspl {
    background-color: #4477CE!important;
}

.calspl2 {
    background-color: #35374B!important;
}

.calspl3 {
    background-color: #FF5733!important
}

.calc .input:hover {
    background-color: #124E66;
    color: #D3D9D4;
    cursor: pointer;
}

.resText {
    width: 17.1em!important;
    height: 3em!important;
}

.datinput {
    width: 10%;
    margin: 0 7em;
    float: left;
    padding: 7em 0 5em 10em;
}

.date {
    outline: none;
    border: 0;
    border-radius: 3em;
    color: #ffffff;
    font-family: "Delius", cursive;
    background-color: #333333;
    height: 2em;
    width: 10em;
    padding: 0.3em;
}

.datoutput {
    width: 60%;
    float: right;
    padding: 5em 3em 5em 0;
}

.checkDates {
    border: 0;
    border-radius: 3em;
    color: #ffffff;
    font-family: "Delius", cursive;
    background-color: #3C467B;
    height: 2em;
    width: 10em;
    padding: 0.3em;
    margin: 1em 0;
}

.datoutput h4, .datoutput p {
    display: inline;
}

/** About Us **/
.about-div {
    padding: 2em;
}

.about-div h1 {
    font-family: "Cabin Sketch", sans-serif;
    font-size: 3em;
    color: #27445D;
}

.about-div h3 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 2em;
}

/** Privacy Policy **/
.policyDiv {
    padding: 2em;
}

.policyDiv h1 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 3em;
    text-align: center;
}

.policyDiv h3 {
    color: #27445D;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 2em;
}

/* Footer */
footer {
    background-color: #1F3A3B;
    color: #F0F0F0;
    padding: 0.5em;
    text-align: center;
}


.contacts-div {
    padding: 2em;
}

    .contacts-div h3 {
        font-family: "Cabin Sketch", sans-serif;
        font-size: 1.5em;
        color: #ACD3A8;
    }

.mail {
    width: 47%;
    float: left;
}

.whatsapp {
    width: 47%;
    float: right;
}

    .mail li, .whatsapp li {
        list-style: none;
        padding: 0.5em;
        font-size: 1.25em;
    }

.copyright a {
    text-decoration: none;
    color: #F0F0F0;
}

.copyright a:hover {
        color: #ACD3A8;
}