Styles.css

/* GENERAL/INDEX START */
* {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3 {
    font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
}

body {
    width: 100%;
    margin: auto;
    background-image: linear-gradient(to bottom right, hsl(191, 67%, 83%), hsl(187, 92%, 76%), hsl(179, 67%, 58%));
}

.nav {
    background-color: whitesmoke;
    float: left;
    width: 200px;
    line-height: 90px;
    min-height: 600px;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    box-sizing: border-box;
}

.nav li {
    list-style: none;
}

.header, .footer {
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 64px;
    color: whitesmoke;
    text-shadow: 4px 4px 8px black;
    background-image: linear-gradient(to right, rgb(0,0,0), rgb(0, 136, 255), rgb(22, 188, 22), rgb(125, 113, 36), rgb(252, 92, 0));
    overflow: hidden;
}

.content {
    background-color: whitesmoke;
    min-height: 600px;
}

.content2 {
    background-color: black;
    min-height: 600px;
    color: whitesmoke;
}

.info {
    text-align: center;
    border-bottom: 5px solid black;
    padding: 10px 0px;
}

.info2 {
    background-color: black;
    color: whitesmoke;
    text-align: center;
    border-bottom: 5px solid black;
    padding: 10px 0px;
}

#intro {
    line-height: 40px;
    text-align: left;
    text-indent: 50px;
    padding: 10px;
    font-size: 24px;
}

#intro a {
    line-height: 40px;
    font-size: 24px;
}

#intro a:hover {
    font-size: 26px;
}

#thanks {
    text-align: center;
}

h2 {
    text-align: center;
    font-size: 40px;
}
/* GENERAL/INDEX END */

/* VIKINGS START */
#cardholder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

h3 {font-size: 28px;}

.bold {
    font-weight: bold;
    font-size: 24px;
}

.humanCard {
    height: 500px;
    width:400px;
    margin: 10px 0px;
    padding: 0px;
}

.humanCardhead {
    color: whitesmoke;
    height: 60px;
    text-align: center;
    line-height: 60px;
    margin: 20px 0px 0px 0px;
}

.cardcont {
    background-color:whitesmoke;
    height: 400px;
    width: 360px;
    margin: 0px auto;
    padding: 5px 0px;
    font-size: 20px;
}

.cardcont img {
    max-height: 120px;
    max-width: 100px;
    border: 5px solid black;
    float: left;
    margin: 0px 10px 10px;
}

.starstats {
    font-weight: bold;
    font-size: 24px;
    padding: 10px;
}

.starstats td {
    height: 45px;
    width: 62%;
}

#humanCard1head {
    text-shadow: 4px 4px 8px grey;
}

#humanCard2head {
    text-shadow: 4px 4px 8px rgb(0, 99, 185);
}

#humanCard3head {
    text-shadow: 4px 4px 8px rgb(16, 143, 16);
}

#humanCard4head {
    text-shadow: 4px 4px 8px rgb(16, 143, 16);
}

#humanCard5head {
    text-shadow: 4px 4px 8px rgb(100, 91, 28);
}

#humanCard6head {
    text-shadow: 4px 4px 8px rgb(194, 71, 0);
}

.black {
    background-color: rgb(0, 0, 0);
}

.sky {
    background-color: rgb(0, 136, 255);
}

.green {
    background-color: rgb(22, 188, 22);
}

.brown {
    background-color: rgb(125, 113, 36);
}

.scarlet {
    background-color: rgb(252, 92, 0);
}
/* VIKINGS END */

/* FIGHT CALCULATOR START */
#fightButton {
    height: 60px;
    width: 200px;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgb(25, 137, 185);
    background-image: linear-gradient(to bottom right, rgb(95, 203, 245), rgb(25, 124, 185));
    border: 2px solid rgb(0, 65, 95);
}
/* FIGHT CALCULATOR END */

/* ADDING HUMANS START */
#addHumanBtn {
    height: 60px;
    width: 200px;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgb(25, 185, 52);
    background-image: linear-gradient(to bottom right, rgb(108, 245, 95), rgb(25, 185, 33));
    border: 2px solid rgb(25, 95, 0);
}

.red {
    background-color: rgb(164, 2, 2);
}

.orange {
    background-color: rgb(210, 116, 0);
}

.yellow {
    background-color: rgb(228, 224, 0);
}

.chartreuse {
    background-color: rgb(150, 240, 0);
}

.blue {
    background-color: rgb(0, 92, 252);
}

.indigo {
    background-color: rgb(108, 0, 170);
}

.purple {
    background-color: rgb(150, 0, 170);
}

.magenta {
    background-color: rgb(196, 0, 144);
}

.pink {
    background-color: rgb(229, 55, 151);
}

.grey {
    background-color: rgb(166, 166, 166);
}

.slate {
    background-color: rgb(82, 82, 82);
}

#removeHumanBtn {
    height: 60px;
    width: 200px;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgb(185, 25, 25);
    background-image: linear-gradient(to bottom right, rgb(245, 95, 95), rgb(185, 25, 25));
    border: 2px solid rgb(95, 0, 0);
}
/* ADDING HUMANS END */

/* DRAGONS START */
.dragons img, .dragons2 img {
    max-width: 350px;
    max-height: 300px;
}

/* .dragons, .dragons2 {
    border-bottom: 5px solid black;
    height: 450px;
}

.dragons p, .dragons2 p {
    line-height: 40px;
    text-align: center;
}

.dragons img {
    float: left;
    margin-left: 75px;
    height: 300px;
    max-width: 500px;
}

.dragons2 img {
    float: right;
    margin-right: 75px;
    height: 300px;
    max-width: 500px;
}

.flipped {
    transform: scaleX(-1);
} */
/* DRAGONS END */

/* LINKS START */
a:visited, a:link {
    color: green;
    text-decoration: none;
    font-size: 16px;
}

a:hover {
    font-size: 18px;
}
/* LINKS END */

/* SURVEY START */
/* form {
    text-align: center;
    margin: auto;
    padding: 10px 0px;
    font-size: 24px;
}

.checks {
    margin: 5px 0px;
    width: 20%;
    min-height: 10px;
    height: 25px;
}

input, select {
    margin: 5px 0px;
    width: 40%;
    min-height: 2em;
} */
/* GALLERY START */

#music, #music2, #music3 {
    display: flex;
    justify-content: center;
    font-size: 18px;
}
/* SURVEY END */

#imageCarousel {
    padding-top: 10px;
    padding-bottom: 30px;
}

.carousel-item {
    height: 75vh;
    background: black;
}

.carousel-item .item {
    position: relative;
    height: 100%;
}

.carousel-item img {
    max-height: 75vh;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}

/*

#fanimg {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.wide {
    max-width: 100%;
    max-height: 100%;
}

.tall {
    max-width: 49%;
    max-height: 100%;
} */
/* GALLERY END */

/* GAME START */
.hiddenmusic {
    display: none;
}

#gameBox {
    height: 100%;
    width: 1300px;
    /* ^ previously width 100% ^ */
    background-image: linear-gradient(0deg, rgb(0, 196, 0) 0%, rgb(0, 196, 0) 30px, lightskyblue 30px, lightblue 100%);
    color: black;
    position: relative;
    /*border: 1px solid black;*/
    box-sizing: border-box;
    margin: auto;
    overflow: hidden;
    /* ^ previously not present (see GamePage) ^ */
}

#fullScreen {
    height: 500px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: rgb(0, 196, 0);
    z-index: 2;
    display: none;
}

.groundTwo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: rgb(0, 196, 0);
    z-index: 2;
    display: none;
}

/* "developer mode" colors:
sky: lightblue;
ground: rgb(0, 196, 0);
skyTwo: blue;
groundTwo: rgb(196, 52, 0);
skyThree: cyan;
groundThree: rgb(196, 193, 0);
*/

.groundThree {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: rgb(0, 196, 0);
    z-index: 2;
    display: none;
}

.landmark {
    position: absolute;
    bottom: 5%;
    left: 20%;
    width: 10%;
    height: 30px;
    background-color: rgb(255, 149, 0);
    z-index: 2;
    display: none;
}

.sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightskyblue;
    z-index: 0;
    display: none;
}
.skyTwo {
    position: absolute;
    top: 0;
    left: 1300;
    width: 100%;
    height: 100%;
    background-color: lightskyblue;
    z-index: 0;
    display: none;
}

.skyThree {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightskyblue;
    z-index: 0;
    display: none;
}

/* sky bgs start */
.cloud1 {
    position: absolute;
    width: 60px;
    height: 40px;
    background-color: transparent;
}

.c1i1 {
    position: absolute;
    height: 50%;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: white;
}

.c1i2 {
    position: absolute;
    height: 50%;
    width: 50%;
    left: 25%;
    top: 10%;
    background-color: white;
}

#s1c1 {
    top: 5%;
    left: 20%;
}

#s1c4 {
    top: 35%;
    left: 55%;
}

#s1c5 {
    top: 15%;
    left: 75%;
}

#s1c7 {
    top: 5%;
    right: 5%;
}

#s2c4 {
    top: 30%;
    left: 40%;
}

#s2c5 {
    top: 15%;
    left: 45%;
}

#s3c1 {
    top: 20%;
    left: 2%;
}

#s3c6 {
    top: 25%;
    left: 65%;
}

#s3c8 {
    top: 10%;
    left: 95%;
}

.cloud2 {
    position: absolute;
    height: 80px;
    width: 80px;
    background-color: transparent;
}

.c2i1 {
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: white;
}

.c2i2 {
    position: absolute;
    height: 20%;
    width: 50%;
    left: 10%;
    top: 10%;
    background-color: white;
}

.c2i3 {
    position: absolute;
    height: 10%;
    width: 50%;
    right: 10%;
    bottom: 20%;
    background-color: white;
}

#s1c2 {
    top: 20%;
    left: 30%;
}

#s2c2 {
    left: 10%;
    top: 5%;
}

#s2c3 {
    left: 30%;
    top: 15%;
}

#s2c7 {
    left: 80%;
    top: 20%;
}

#s2c8 {
    left: 90%;
    top: 5%;
}

#s3c3 {
    left: 20%;
    top: 30%;
}

#s3c7 {
    left: 85%;
    top: 5%;
}

.cloud3 {
    position: absolute;
    height: 80px;
    width: 80px;
    background-color: transparent;
}

.c3i1 {
    position: absolute;
    height: 35%;
    width: 100%;
    left: 0;
    top: 40%;
    background-color: white;
}

.c3i2 {
    position: absolute;
    height: 20%;
    width: 50%;
    right: 10%;
    top: 20%;
    background-color: white;
}

#s3c2 {
    left: 10%;
    top: 5%;
}

#s1c3 {
    left: 80%;
    top: 20%;
}

#s1c6 {
    left: 5%;
    top: 20%;
}

#s2c1 {
    left: 2%;
    top: 30%;
}

#s2c6 {
    left: 60%;
    top: 10%;
}

#s3c4 {
    top: 25%;
    left: 40%;
}

#s3c5 {
    top: 10%;
    left: 55%;
}

.mountain1 {
    position: absolute;
    bottom: 0;
    left: 40%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-left: 300px solid transparent;
    border-right: 300px solid transparent;
    border-bottom: 350px solid grey;
}

.mountain2 {
    position: absolute;
    bottom: 0;
    left: 60%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 250px solid lightgrey;
}

.cave {
    position: absolute;
    height: 40%;
    width: 300px;
    left: 30%;
    bottom: 0;
    background-color: grey;
}

.caveinside {
    position: absolute;
    height: 70%;
    width: 50%;
    left: 25%;
    bottom: 0;
    background-color: black;
}

.tree1 {
    position: absolute;
    height: 70%;
    width: 200px;
    background-color: transparent;
}

.t1i1 {
    position: absolute;
    height: 100%;
    width: 20%;
    top: 0;
    left: 40%;
}

.t1i2 {
    position: absolute;
    height: 20%;
    width: 100%;
    top: 40%;
    left: 0;
}

.t1i3 {
    position: absolute;
    height: 20%;
    width: 80%;
    top: 25%;
    left: 10%;
}

.t1i4 {
    position: absolute;
    height: 20%;
    width: 60%;
    top: 10%;
    left: 20%;
}

.t1i5 {
    position: absolute;
    height: 20%;
    width: 40%;
    top: 0;
    left: 30%;
}

.ttc {
    background-color: rgb(101, 55, 32);
}

.tc1 {
    background-color: rgb(5, 100, 43);
}

#s1t1 {
    bottom: 0;
    left: 10%;
}

#s2t1 {
    bottom: 0;
    left: 10%;
}

#s3t1 {
    bottom: 0;
    left: 5%;
}

.tree2 {
    position: absolute;
    height: 50%;
    width: 150px;
    background-color: transparent;
}

.tc2 {
    background-color: rgb(0, 196, 0);
}

#s2t2 {
    bottom: 0;
    left: 20%;
}

#s2t3 {
    bottom: 0;
    left: 50%;
}

#s2t4 {
    bottom: 0;
    left: 60%;
}

#s2t5 {
    bottom: 0;
    left: 70%;
}

#s2t6 {
    bottom: 0;
    left: 80%;
}

#s2t7 {
    bottom: 0;
    left: 5%;
}

#s3t2 {
    bottom: 0;
    left: 20%; 
}

#s3t3 {
    bottom: 0;
    left: 80%;
}

#s3t4 {
    bottom: 0;
    left: 88%;
}

.house {
    position: absolute;
    height: 70%;
    width: 30%;
    background-color: transparent;
    bottom: 30px;
    left: 50%;
}

.bushL {
    position: absolute;
    height: 20%;
    width: 15%;
    background-color: rgb(0, 109, 44);
    bottom: 0;
    left: 0;
}

.bushR {
    position: absolute;
    height: 20%;
    width: 15%;
    background-color: rgb(0, 109, 44);
    bottom: 0;
    right: 0;
}

.housechimney {
    position: absolute;
    height: 40%;
    width: 10%;
    background-color: transparent;
    right: 20%;
    top: 0;
}

.smokestack {
    position: absolute;
    height: 40%;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
}

.sstack1 {
    position: absolute;
    height: 30%;
    width: 50%;
    background-color: grey;
    bottom: 0;
    left: 20%;
    animation-name: smokeStart;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.sstack2 {
    position: absolute;
    height: 50%;
    width: 80%;
    background-color: rgb(89, 89, 89);
    bottom: 20%;
    left: 20%;
    animation-name: smokeMiddle2;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes smokeMiddle2 {
    0% {
        background-color: transparent;
    }
    40% {
        background-color: transparent;
    }
    50% {
        background-color: rgb(89, 89, 89);
    }
    100% {
        background-color: transparent;
    }
}

.sstack3 {
    position: absolute;
    height: 50%;
    width: 80%;
    background-color: grey;
    top: 0;
    left: 0;
    animation-name: smokeLast;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.chimney {
    position: absolute;
    height: 60%;
    width: 100%;
    background-color: rgb(102, 34, 0);
    bottom: 0;
    left: 0;
}

.houseroof {
    position: absolute;
    bottom: 60%;
    left: 12%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 70px solid rgb(59, 20, 0);
}

.housewall {
    position: absolute;
    bottom: 0;
    left: 15%;
    height: 60%;
    width: 70%;
    background-color: rgb(102, 34, 0);
}

.housedoor {
    position: absolute;
    height: 60%;
    width: 30%;
    left: 35%;
    bottom: 0;
    background-color: rgb(134, 76, 49);
}

.doorknob {
    position: absolute;
    right: 10%;
    bottom: 50%;
    height: 20%;
    width: 20%;
    border-radius: 50%;
    background-color: rgb(54, 46, 43);
}

.houseLWindows {
    position: absolute;
    height: 100%;
    width: 35%;
    left: 0;
    top: 0;
    background-color: rgb(102, 34, 0);
}

.windowL {
    position: absolute;
    height: 70%;
    width: 40%;
    left: 20%;
    top: 10%;
    background-color: lightblue;
}

.houseRWindows {
    position: absolute;
    height: 100%;
    width: 35%;
    right: 0;
    top: 0;
    background-color: rgb(102, 34, 0);
}

.windowR {
    position: absolute;
    height: 70%;
    width: 40%;
    right: 20%;
    top: 10%;
    background-color: lightblue;
}

.wbb {
    position: absolute;
    height: 5%;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: black;
}
.wmb {
    position: absolute;
    height: 5%;
    width: 100%;
    bottom: 50%;
    left: 0;
    background-color: black;
}

.wtb {
    position: absolute;
    height: 5%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: black;
}

.whb {
    position: absolute;
    height: 100%;
    width: 15%;
    bottom: 0;
    left: 45%;
    background-color: black;
}
/* sky bgs end */


/* player start */
.player {
    background-color: transparent;
    height: 100px;
    width: 120px;
    position: relative;
    z-index: 2;
    display: none;
}

@media (max-width: 750px) {
    .player {
        height: 80px;
        width: 100px;
    }
}

/* .playerDragon {
    height: 90%;
    width: 90%;
    background-color: blue;
    margin: auto;
    position: absolute;
    top: 5%;
    left: 5%;
} */

.smoke {
    height: 30%;
    width: 15%;
    background-color: transparent;
    position: absolute;
    top: 0%;
    right: 0%;
}

.smokeOne {
    height: 15%;
    width: 20%;
    position: absolute;
    bottom: 20%;
    right: 20%;
    animation-name: smokeStart;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.smokeTwo {
    height: 25%;
    width: 20%;
    position: absolute;
    bottom: 50%;
    right: 25%;
    animation-name: smokeMiddle;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.smokeThree {
    height: 25%;
    width: 30%;
    position: absolute;
    bottom: 70%;
    right: 35%;
    animation-name: smokeLast;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes smokeStart {
    0% {
        background-color: transparent;
    }
    20% {
        background-color: transparent;
    }
    35% {
        background-color: grey;
    }
    100% {
        background-color: transparent;
    }
}

@keyframes smokeMiddle {
    0% {
        background-color: transparent;
    }
    40% {
        background-color: transparent;
    }
    50% {
        background-color: grey;
    }
    100% {
        background-color: transparent;
    }
}

@keyframes smokeLast {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: transparent;
    }
    65% {
        background-color: grey;
    }
    100% {
        background-color: transparent;
    }
}

.dragonHead {
    height: 30%;
    width: 25%;
    position: absolute;
    top: 10%;
    right: 10%;
}

.dragonEye {
    height: 30%;
    width: 25%;
    background-color: white;
    position: absolute;
    bottom: 55%;
    right: 15%;
    animation-name: blinking;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.dragonPupil {
    height: 70%;
    width: 50%;
    background-color: black;
    position: absolute;
    bottom: 0%;
    right: 0%;
    animation-name: blinkingTwo;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes blinking {
    0% {
        height: 30%;
        background-color: white;
    }
    10% {
        background-color: white;
    }
    20% {
        height: 15%;
        width: 25%;
        background-color: black;
    }
    30% {
        background-color: white;
    }
    40% {
        height: 30%;
        background-color: white;
    }
    100% {
        height: 30%;
        background-color: white;
    }
 }

 @keyframes blinkingTwo {
    0% {
        height: 70%;
    }
    20% {
        height: 100%;
    }
    40% {
        height: 70%;
    }
    100% {
        height: 70%;
    }
 }

.dragonSnout {
    height: 50%;
    width: 50%;
    position: absolute;
    bottom: 0%;
    right: -30%;
}

.dragonNostril {
    height: 20%;
    width: 20%;
    background-color: black;
    position: absolute;
    top: 10%;
    right: 10%;
}

.dragonEarF {
    height: 50%;
    width: 40%;
    background-color: transparent;
    position: absolute;
    top: -30%;
    left: 15%;
}

.dragonEarFBottom {
    height: 60%;
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.dragonEarFTop {
    height: 40%;
    width: 80%;
    position: absolute;
    bottom: 60%;
    left: 0%;
}

.dragonEarInner {
    height: 60%;
    width: 50%;
    position: absolute;
    bottom: 20%;
    left: 10%;
}

.dragonEarB {
    height: 50%;
    width: 40%;
    background-color: transparent;
    position: absolute;
    top: -25%;
    left: 35%;
    z-index: -1;
}

.dragonEarBBottom {
    height: 60%;
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.dragonEarBTop {
    height: 40%;
    width: 80%;
    position: absolute;
    bottom: 60%;
    left: 0%;
}

.dragonBody {
    height: 40%;
    width: 50%;
    position: absolute;
    top: 30%;
    left: 30%;
    border-radius: 5%;
}

.dragonWingFront {
    height: 50%;
    width: 50%;
    position: absolute;
    top: 10%;
    left: 10%;
    animation-name: flappingTwo;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.dragonWingBack {
    height: 50%;
    width: 50%;
    position: absolute;
    top: 20%;
    left: 16%;
    animation-name: flappingThree;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: -1;
}

.dragonWingVertical {
    height: 100%;
    width: 20%;
    position: absolute;
    top: 0%;
    right: 0%;
}

.dragonWingHorizontal {
    height: 20%;
    width: 100%;
    position: absolute;
    bottom: 0%;
    right: 0%;
    animation-name: flapping;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.dragonWingVerticalTwo {
    height: 100%;
    width: 20%;
    position: absolute;
    top: 0%;
    right: 0%;
}

.dragonWingHorizontalTwo {
    height: 20%;
    width: 100%;
    position: absolute;
    bottom: 0%;
    right: 0%;
    animation-name: flapping;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes flapping {
    0% {
        bottom: 0%;
        height: 20%;

    }
    25% {
        height: 100%;
        bottom: 0%
    }
    50% {
        bottom: 100%;
        height: 20%;
    }
    75% {
        height: 100%;
        bottom: 0%;
    }
    100% {
        bottom: 0%;
        height: 20%;

    }
}

@keyframes flappingTwo {
    0% {
        height: 50%;
        top: 10%;
    }
    25% {
        height: 10%;
        top: 0%
    }
    50% {
        height: 50%;
        top: -30%;
    }
    75% {
        height: 10%;
        top: 0%;
    }
    100% {
        height: 50%;
        top: 10%;
    }
}

@keyframes flappingThree {
    0% {
        height: 50%;
        top: 20%;
    }
    25% {
        height: 10%;
        top: 0%
    }
    50% {
        height: 50%;
        top: -40%;
    }
    75% {
        height: 10%;
        top: 0%;
    }
    100% {
        height: 50%;
        top: 20%;
    }
}

.dragonLeg {
    height: 50%;
    width: 20%;
    position: absolute;
}

.clawOne {
    height: 20%;
    width: 20%;
    background-color: black;
    position: absolute;
    bottom: 0%;
    right: 0%;
}

.clawTwo {
    height: 20%;
    width: 20%;
    background-color: black;
    position: absolute;
    bottom: 0%;
    right: 50%;
}

.FR {
    right: 15%;
    bottom: -30%;
}

.BR {
    right: 5%;
    bottom: -28%;
    z-index: -1;
}

.FL {
    right: 75%;
    bottom: -30%;
}

.BL {
    right: 65%;
    bottom: -28%;
    z-index: -1;
}

.dragonTailOne {
    height: 50%;
    width: 40%;
    position: absolute;
    top: 15%;
    left: -40%;
}

.dragonTailTwo {
    height: 30%;
    width: 20%;
    position: absolute;
    top: 25%;
    left: -60%;
}

.dcMain {
    background-color: red;
}

.dcSecondary {
    background-color: darkred;
}

.dcThree {
    background-color: rgb(88, 0, 0);
}

.dwcOne {
    background-color: orange;
}

.dwcTwo {
    background-color: rgb(210, 136, 0);
}
/* player end */

/* sheep start */
#sheepContainer {
    display: none;
    bottom: 30px;
}

.sheep {
    background-color: transparent;
    height: 60px;
    width: 70px;
    position: absolute;
    bottom: 30px;
    left: 20%;
    z-index: 1;
}

.sheepHead {
    background-color: transparent;
    height: 50%;
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.sheepEarLeft {
    height: 30%;
    width: 20%;
    position: absolute;
    top: 20%;
    left: 0%;
}
.sheepEarRight {
    height: 30%;
    width: 20%;
    position: absolute;
    top: 20%;
    left: 80%;
}
.sheepHeadWool {
    height: 20%;
    width: 70%;
    position: absolute;
    top: 0;
    left: 15%;
}
.sheepFace {
    background-color: rgb(244, 171, 107);
    height: 80%;
    width: 70%;
    position: absolute;
    top: 20%;
    left: 15%;
}
.sheepEyeLeft {
    background-color: black;
    height: 40%;
    width: 20%;
    position: absolute;
    top: 5%;
    left: 15%;
}
.sheepEyeRight {
    background-color: black;
    height: 40%;
    width: 20%;
    position: absolute;
    top: 5%;
    left: 55%;
}
.sheepMouth {
    background-color: black;
    height: 10%;
    width: 40%;
    position: absolute;
    top: 60%;
    left: 25%;
}

.sheepBody {
    background-color: transparent;
    height: 80%;
    width: 80%;
    position: absolute;
    top: 20%;
    left: 20%;
    z-index: -1;
}
.sheepWool {
        height: 60%;
        width: 80%;
        position: absolute;
        top: 0;
        left: 0;
}
.sheepTail {
    height: 20%;
    width: 10%;
    position: absolute;
    top: 5%;
    left: 80%;
}
.sheepLeg {
    height: 40%;
    width: 15%;
    position: absolute;
    top: 60%;
}
.SFL {
    left: 5%;
    background-color: rgb(53, 53, 53);
}
.SBL {
    left: 15%;
    background-color: black;
    z-index: -1;
}
.SFR {
    left: 50%;
    background-color: rgb(53, 53, 53);
}
.SBR {
    left: 60%;
    background-color: black;
    z-index: -1;
}
.scc {
    background-color: white;
}

.sheepCounter {
    height: 40px;
    width: 80px;
    position: absolute;
    top: 0;
    right: 120px;
    z-index: 4;
    display: none;
    background-color: transparent;
}
.sheepNum {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    color: white;
    text-shadow: 2px 2px 2px black;
    text-align: center;
    line-height: 40px;
}
.sheepDisplay {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.sdHeadWool {
    height: 10%;
    width: 60%;
    position: absolute;
    top: 10%;
    left: 20%;
    background-color: white;
}
.sdLeftEar {
    height: 20%;
    width: 10%;
    position: absolute;
    top: 20%;
    left: 10%;
    background-color: white;
}
.sdRightEar {
    height: 20%;
    width: 10%;
    position: absolute;
    top: 20%;
    left: 80%;
    background-color: white;
}
.sdFace {
    height: 60%;
    width: 60%;
    position: absolute;
    top: 20%;
    left: 20%;
    background-color: rgb(244, 171, 107);
}
.sdLeftEye {
    height: 40%;
    width: 20%;
    position: absolute;
    top: 10%;
    left: 20%;
    background-color: black;
}
.sdRightEye {
    height: 40%;
    width: 20%;
    position: absolute;
    top: 10%;
    left: 60%;
    background-color: black;
}
/* sheep end */

/* ring start */
#ringContainer {
    display: none;
}

.ringFront {
    height: 140px;
    width: 60px;
    background-color: transparent;
    position: absolute;
    z-index: 3;
}
.rfTop {
    height: 10%;
    width: 30%;
    position: absolute;
    top: 0;
    left: 20%;
    background-color: yellow;
    z-index: 1;
}
.rfSide {
    height: 80%;
    width: 30%;
    position: absolute;
    top: 10%;
    left: 40%;
    background-color: yellow;
}
.rfBottom {
    height: 10%;
    width: 30%;
    position: absolute;
    bottom: 0;
    left: 20%;
    background-color: yellow;
}
.ringBack {
    height: 140px;
    width: 60px;
    background-color: transparent;
    position: absolute;
    z-index: 1;
}
.rbTop {
    height: 10%;
    width: 30%;
    position: absolute;
    top: 0;
    right: 20%;
    background-color: orange;
}
.rbSide {
    height: 80%;
    width: 30%;
    position: absolute;
    top: 10%;
    left: 20%;
    background-color: orange;
}
.rbBottom {
    height: 10%;
    width: 30%;
    position: absolute;
    bottom: 0;
    right: 20%;
    background-color: orange;
}

.ringCounter {
    height: 40px;
    width: 80px;
    position: absolute;
    top: 0;
    right: 200px;
    z-index: 4;
    display: none;
    background-color: transparent;
}
.ringNum {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    color: white;
    text-shadow: 2px 2px 2px black;
    text-align: center;
    line-height: 40px;
}
.ringDisplay {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.drFront {
    height: 100%;
    width: 60%;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 36%;
    z-index: 3;
}
.drfTop {
    height: 10%;
    width: 30%;
    position: absolute;
    top: 5%;
    left: 20%;
    background-color: yellow;
    z-index: 1;
}
.drfSide {
    height: 75%;
    width: 30%;
    position: absolute;
    top: 15%;
    left: 40%;
    background-color: yellow;
}
.drfBottom {
    height: 10%;
    width: 30%;
    position: absolute;
    bottom: 0;
    left: 20%;
    background-color: yellow;
}
.drBack {
    height: 100%;
    width: 60%;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 1;
}
.drbTop {
    height: 10%;
    width: 30%;
    position: absolute;
    top: 5%;
    right: 20%;
    background-color: orange;
}
.drbSide {
    height: 75%;
    width: 30%;
    position: absolute;
    top: 15%;
    left: 20%;
    background-color: orange;
}
.drbBottom {
    height: 10%;
    width: 30%;
    position: absolute;
    bottom: 0;
    right: 20%;
    background-color: orange;
}
/* ring end */

/*pause/timer start */
.pauseGameBtn {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    display: none;
    background-color: transparent;
    color: white;
    text-shadow: 2px 2px 2px black;
}
.gameTimer {
    height: 40px;
    width: 80px;
    position: absolute;
    top: 0;
    right: 40px;
    z-index: 4;
    display: none;
    background-color: transparent;
    line-height: 40px;
    color: white;
    text-shadow: 2px 2px 2px black;
}

.pauseScreen {
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 70%;
        position: absolute;
        display: none;
        z-index: 3;
}
.pauseTime {
    height: 40%;
    width: 100%;
    position: relative;
    left: 0;
    top: 20%;
    color: white;
    font-size: 40px;
}
.pausedGame {
    height: 50%;
    width: 50%;
    text-decoration-line: overline underline;
    margin-bottom: 10px;
}
.currentTime {
    height: 50%;
    width: 50%;
}
.resumeGameBtn {
    height: 20%;
    width: 40%;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgb(25, 137, 185);
    background-image: linear-gradient(to bottom right, rgb(95, 203, 245), rgb(25, 124, 185));
    border: 2px solid rgb(0, 65, 95);
    position: relative;
    top: 30%;
}
/*pause/timer end*/

/*level up start */
.lvlScreen {
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 70%;
    position: absolute;
    display: none;
    z-index: 3;
}
.lvlUp {
height: 40%;
width: 100%;
position: relative;
left: 0;
top: 20%;
color: white;
font-size: 40px;
}
.lvlComp {
height: 50%;
width: 50%;
text-decoration-line: overline underline;
margin-bottom: 10px;
}
.lvlTime {
height: 50%;
width: 50%;
}
.nextLvlBtn {
height: 20%;
width: 40%;
font-size: 30px;
font-style: italic;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgb(185, 25, 25);
background-image: linear-gradient(to bottom right, rgb(245, 95, 95), rgb(185, 25, 25));
border: 2px solid rgb(95, 0, 0);
position: relative;
top: 30%;
}
/*level up end */

/* start screen start */
.startScreen {
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 70%;
    position: absolute;
}

#colorOps {
    height: 20%;
    width: 40%;
    position: relative;
    display: flex;
    left: 30%;
    top: 20%;
}

.dragonOp {
    color: white;
    margin: 10px;
    height: 100%;
    width: 20%;
}

.dragonColor {
    height: 100%;
    width: 100%;
}

#mangoColor {
    background-color: red;
}

#fernColor {
    background-color: green;
}

#juniperColor {
    background-color: blue;
}

#violetColor {
    background-color: purple;
}

#startBtn {
    height: 20%;
    width: 40%;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgb(68, 185, 25);
    background-image: linear-gradient(to bottom right, rgb(115, 245, 95), rgb(36, 185, 25));
    border: 2px solid rgb(30, 95, 0);
    position: relative;
    top: 50%;
}

#mango {
    color: yellow;
}
/* start screen end */

/* GAME END */