@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

h1 {
    font-family: 'Poppins', sans-serif;
}

h2 {
    font-family: 'Poppins', sans-serif;
}

p {
    font-family: 'Poppins', sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

main {
    display: grid;
    grid-template-areas: "game info";
    grid-gap: 1vw;
    grid-template-columns: 0.75fr 1fr;
}

section {
    position: relative;
    margin-left: 25px;
    grid-area: game;
    width: 75vw;
    height: 42vw;
    background-image: url(design/game-screen.svg);
    background-position: center;
    background-size: cover;
    border: 4px #28306E solid;
    overflow: hidden;
}

aside {
    grid-area: info;
    margin-right: 1vw;
    margin-left: 1vw;
}

#tomato {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

footer {
    /*    height: 80px;*/
    width: 100vw;
    position: relative;
    bottom: 0;
    margin-top: 1vw;
}

ul {
    width: 75vw;
    margin: 10px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    list-style: none;
}

li {
    margin-right: 25px;
}

/* --------  win screen ---------- */

#winscreen {
    background-image: url(design/win-screen.svg);
    background-size: cover;
    height: 42vw;
    width: 75vw;
    position: absolute;
}

#homebutton1 {
    background-image: url(design/button-tomato-home.svg);
    background-size: cover;
    height: 12.5vw;
    width: 12.5vw;
    position: absolute;
    left: 42vw;
    bottom: 3vw;
}

#homebutton1:hover {
    transform: scale(1.1)
}

#playagainbutton {
    background-image: url(design/button-tomato-play-again.svg);
    background-size: cover;
    height: 12.5vw;
    width: 12.5vw;
    position: absolute;
    left: 56vw;
    bottom: 3vw;
}

#playagainbutton:hover {
    transform: scale(1.1)
}

#lightning1 {
    background-image: url(design/lightning1.svg);
    background-size: cover;
    height: 2.5vw;
    width: 1.4vw;
    position: absolute;
    left: 36.5vw;
    bottom: 30vw;
}

#lightning2 {
    background-image: url(design/lightning1.svg);
    background-size: cover;
    height: 5vw;
    width: 2.9vw;
    position: absolute;
    left: 27.5vw;
    bottom: 29vw;
}

#lightning3 {
    background-image: url(design/lightning3.svg);
    background-size: cover;
    height: 3vw;
    width: 1.5vw;
    position: absolute;
    left: 32.5vw;
    bottom: 32vw;
}

.spark1 {
    animation-name: spark1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transition-timing-function: cubic-bezier(0, 1.14, .59, .59);
}

.spark2 {
    animation-name: spark2;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
}

.spark3 {
    animation-name: spark3;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

@keyframes spark1 {
    0% {
        opacity: 1;
    }

    25% {
        transform: translate(-1vw, -1vw);
        opacity: 1;
    }

    50% {
        transform: translate(0vw, -2vw);
        opacity: 1;
    }

    75% {
        transform: translate(-1vw, -3vw);
        opacity: 1;
    }

    80% {
        transform: translate(0vw, 4vw);
        opacity: 0;
    }
}

@keyframes spark2 {
    0% {
        opacity: 1;
    }

    25% {
        transform: translate(-1vw, -1vw);
        opacity: 1;
    }

    50% {
        transform: translate(0vw, -2vw);
        opacity: 1;
    }

    75% {
        transform: translate(-1vw, -3vw);
        opacity: 1;
    }

    80% {
        transform: translate(0vw, 4vw);
        opacity: 0;
    }
}

@keyframes spark3 {
    0% {
        opacity: 1;
    }

    25% {
        transform: translate(-1vw, -1vw);
        opacity: 1;
    }

    50% {
        transform: translate(0vw, -2vw);
        opacity: 1;
    }

    75% {
        transform: translate(-1vw, -3vw);
        opacity: 1;
    }

    80% {
        transform: translate(0vw, 4vw);
        opacity: 0;
    }
}

#winText {
    position: absolute;
    color: white;
    left: 40vw;
    right: 4vw;
}

#win1 {
    font-size: 4.8vw;
    position: absolute;
    left: 3.7vw;
    top: 1.6vw;
}

#win2 {
    font-size: 2vw;
    position: absolute;
    top: 9.8vw;
    left: 3vw;
}

#win3 {
    font-size: 1.6vw;
    text-align: center;
    position: absolute;
    top:12.8vw;
}

#win4 {
    font-size: 2vw;
    top: 21.8vw;
    left: 10vw;
    position: absolute;
}

#finalScore {
    font-size: 1.9vw;
    font-family: 'Patrick Hand', cursive;
    text-decoration: underline;

}

/* ------------- lose screen ----------- */

#losescreen {
    background-image: url(design/fail-screen.svg);
    background-size: cover;
    height: 42vw;
    width: 75vw;
    position: absolute;
}

#tryagainbutton {
    background-image: url(design/button-tomato-try-again.svg);
    background-size: cover;
    height: 12.5vw;
    width: 12.5vw;
    position: absolute;
    left: 56vw;
    bottom: 3vw;
}

#tryagainbutton:hover {
    transform: scale(1.1);
}

#homebutton2 {
    background-image: url(design/button-tomato-home.svg);
    background-size: cover;
    height: 12.5vw;
    width: 12.5vw;
    position: absolute;
    left: 42vw;
    bottom: 3vw;
}

#homebutton2:hover {
    transform: scale(1.1)
}

#losetweet {
    background-image: url(design/fail-tweet.svg);
    background-size: cover;
    height: 14.4vw;
    width: 34.8vw;
    position: absolute;
    left: 2.5vw;
    bottom: 3vw;
    z-index: 3;
}

#losetrump {
    background-image: url(design/fail-trump.svg);
    background-size: cover;
    height: 20.9vw;
    width: 24.2vw;
    position: absolute;
    left: 5.3vw;
    top: 5vw;
    z-index: 2;
}

.trumplaugh {
    animation-name: trumpLaugh;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    transition-timing-function: cubic-bezier(.17, .67, .89, .44);
}

@keyframes trumpLaugh {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(0.3vw)
    }
}

#loseText {
    color: white;
    position: absolute;
    left: 39vw;
    right: 3vw;
}

#lose1 {
    font-size: 4.8vw;
    position: absolute;
    left: 8vw;
    top: 1.6vw;
}

#lose2 {
    position: absolute;
    font-size: 2vw;
    top: 9.8vw;
    left: 5.7vw;
}

#lose3 {
    position: absolute;
    text-align: center;
    top: 12.8vw;
    font-size: 1.6vw;
}

#lose4 {
    position: absolute;
    font-size: 2vw;
    top: 21vw;
    left: 11vw;
}

/* ----------- start screen ------------ */

#startscreen {
    background-image: url(design/start-screen.svg);
    background-position: center;
    background-size: cover;
    width: 75vw;
    height: 42vw;
}

#startbutton {
    background-image: url(design/button-start-game.svg);
    background-size: cover;
    width: 15vw;
    height: 5vw;
    position: absolute;
    left: 57vw;
    bottom: 10vw;
}

#startbutton:hover {
    transform: scale(1.1);
}

#howtoplaybutton {
    background-image: url(design/button-how-to-play.svg);
    background-size: cover;
    width: 15vw;
    height: 5vw;
    position: absolute;
    left: 57vw;
    bottom: 5vw;
}

#howtoplaybutton:hover {
    transform: scale(1.1);
}

#instructionsscreen {
    background-image: url(design/how-to-play.svg);
    background-size: cover;
    width: 39vw;
    height: 27vw;
    position: absolute;
    left: 18vw;
    bottom: 7.5vw;
}

#closeinstructions {
    background-image: url(design/button-exit.svg);
    background-size: cover;
    width: 4.5vw;
    height: 4.5vw;
    position: absolute;
    left: 33.3vw;
    bottom: 21.3vw;
}

#closeinstructions:hover {
    transform: scale(1.1);
}

#insth1 {
    font-size: 2.3vw;
    position: absolute;
    left: 13vw;
    top:1vw;
}

#pitch {
    position: absolute;
    font-size: 1.1vw;
    left:11.3vw;
    right: 2.3vw;
    top: 7.2vw;
}

#objective {
    position: absolute;
    font-size: 1.1vw;
    left:2.6vw;
    right:2.3vw;
    top: 15vw;
    line-height: 1.8vw;
}

.open {
    animation-name: open;
    animation-duration: 0.15s;
    animation-iteration-count: 1;
}

@keyframes open{
    0% {transform: scale(0)}
    100% {transform: scale(1)}
}

/* ------------------- Game Screen starts here --------------------- */

.front1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 75vw;
    height: 7vw;
    background-image: url(design/game-screen-front.svg);
    background-size: cover;
}

.front15 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 75vw;
    height: 2vw;
    background-image: url(design/game-screen-front1.svg);
    background-size: cover;
    z-index: 5;
}

.front2 {
    position: absolute;
    width: 65vw;
    height: 7.5vw;
    background-image: url(design/game-screen-front2.svg);
    background-size: cover;
    left: 5vw;
    bottom: 2vw;
    z-index: 4;
}

.front3 {
    position: absolute;
    width: 41vw;
    height: 11vw;
    background-image: url(design/game-screen-front3.svg);
    background-size: cover;
    left: 17.5vw;
    bottom: 7.5vw;
    z-index: 2;
}

.trump1-sprite {
    background-image: url(design/trump-neutral.svg);
    background-size: cover;
    position: absolute;
    width: 12.5vw;
    height: 11.25vw;
}

.trump2-sprite {
    background-image: url(design/trump-shocked.svg);
    background-size: cover;
    position: absolute;
    width: 12.5vw;
    height: 11.25vw;
}

#trump-container {
    position: absolute;
    overflow: hidden;
    width: 12.5vw;
    height: 11.25vw;
}

.woman1-sprite {
    background-image: url(design/woman-neutral.svg);
    background-size: cover;
    position: absolute;
    width: 12.5vw;
    height: 11.25vw;
}

.woman2-sprite {
    background-image: url(design/woman-shocked.svg);
    background-size: cover;
    position: absolute;
    width: 12.5vw;
    height: 11.25vw;
}

#woman-container {
    overflow: hidden;
    position: absolute;
    width: 12.5vw;
    height: 11.25vw;
}

.man1-sprite {
    background-image: url(design/man-neutral.svg);
    background-size: cover;
    position: absolute;
    width: 12.5vw;
    height: 11.25vw;
}

.man2-sprite {
    background-image: url(design/man-shocked.svg);
    background-size: cover;
    position: absolute;
    width: 12.5vw;
    height: 11.25vw;
}

#man-container {
    position: absolute;
    width: 12.5vw;
    height: 11.25vw;
    overflow: hidden;
}

.size1 {
    width: 15vw;
    height: 13.5vw;
}

.size2 {
    width: 12.5vw;
    height: 11.25vw;
}

.size3 {
    width: 10vw;
    height: 9vw;
}

.pos1 {
    left: 17vw;
    bottom: 15.2vw;
    z-index: 1;
}

.pos2 {
    left: 46vw;
    bottom: 14.3vw;
    z-index: 1;
}

.pos3 {
    left: 6.5vw;
    bottom: 6.5vw;
    z-index: 3;
}

.pos4 {
    left: 22.5vw;
    bottom: 6.4vw;
    z-index: 3;
}

.pos5 {
    left: 40vw;
    bottom: 7vw;
    z-index: 3;
}

.pos6 {
    left: 55.7vw;
    bottom: 6.5vw;
    z-index: 3;
}

.timer1 {
    background-image: url(design/timer-background.svg);
    background-size: cover;
    position: absolute;
    width: 30vw;
    height: 2.5vw;
    left: 0.6vw;
    top: 1vw;
}

#timer2 {
    background-color: #36A9E1;
    position: absolute;
    width: 28.1vw;
    height: 1.5vw;
    left: 1.5vw;
    top: 1.4vw;
}

.countdown {
    transform: scaleX(0.1);
    transform-origin: left bottom;
    animation-name: squeeze;
    animation-duration: 60s;
}

@keyframes squeeze {
    0% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

.points {
    position: absolute;
    background-image: url(design/point-counter.svg);
    background-size: cover;
    width: 25vw;
    height: 2.5vw;
    top: 3.8vw;
    left: 1vw;
}

.pointnumber {
    position: absolute;
    font-size: 2.5vw;
    top: 3.5vw;
    left: 23vw;
    color: white;
    font-family: 'Patrick Hand', cursive;

    transform: rotate(7deg)
}

.heart1 {
    position: absolute;
    background-image: url(design/heart.svg);
    background-size: cover;
    width: 2.5vw;
    height: 2.5vw;
}

.heart2 {
    position: absolute;
    background-image: url(design/heart-broken.svg);
    background-size: cover;
    width: 2.5vw;
    height: 2.5vw;
}

.hpos1 {
    top: 0.9vw;
    right: 1vw;
}

.hpos2 {
    top: 0.9vw;
    right: 4vw;
}

.hpos3 {
    top: 0.9vw;
    right: 7vw;
}

#sound:hover {
    transform: scale(1.1)
}

#pause:hover {
    transform: scale(1.1)
}

.soundon {
    position: absolute;
    background-image: url(design/button-sound-on.svg);
    background-size: cover;
    width: 2.5vw;
    height: 2.5vw;
    z-index: 6;
}

.soundoff {
    position: absolute;
    background-image: url(design/button-sound-off.svg);
    background-size: cover;
    width: 2.5vw;
    height: 2.5vw;
    z-index: 6;
}

.pause1 {
    position: absolute;
    background-image: url(design/button-pause.svg);
    background-size: cover;
    width: 2.5vw;
    height: 2.5vw;
    z-index: 6;
}

.pause2 {
    position: absolute;
    background-image: url(design/button-play.svg);
    background-size: cover;
    width: 2.5vw;
    height: 2.5vw;
    z-index: 6;
}

.spos1 {
    right: 1vw;
    bottom: 1vw;
}

.spos2 {
    right: 4vw;
    bottom: 1vw;
}

#globalNav {
    font-family: 'Poppins', sans-serif;
    margin-left: 5px;
}

#someNav {
    font-family: 'Ubuntu', sans-serif;
    margin-left: 5px;
}

nav a {
    text-decoration: none;
}

a:link {
    color: #A31E16
}

a:visited {
    color: #28306E
}

a:hover {
    color: #28306E
}

a:active {
    color: #28306E
}

#credit {
    font-size: 0.8em;
}

.upDown {
    animation-name: upDown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes upDown {
    0% {
        transform: translateY(15vw)
    }

    50% {
        transform: translateY(0vw)
    }

    100% {
        transform: translateY(15vw)
    }
}

.stop {
    animation-play-state: paused;
}

.hidden {
    display: none;
}

#tpos1 {
    background-image: url(design/tomato.svg);
    width: 5vw;
    height: 5vw;
    background-size: cover;
    left: 20.5vw;
    bottom: 17.2vw;
    position: absolute;
    z-index: 7;
}

#tpos1s {
    background-image: url(design/splash.svg);
    width: 7.5vw;
    height: 7.5vw;
    background-size: cover;
    position: absolute;
    z-index: 7;
    left: 19.25vw;
    bottom: 16vw;
}

#tpos2 {
    background-image: url(design/tomato.svg);
    width: 5vw;
    height: 5vw;
    background-size: cover;
    left: 50vw;
    bottom: 17.2vw;
    position: absolute;
    z-index: 7;
}

#tpos2s {
    background-image: url(design/splash.svg);
    width: 7.5vw;
    height: 7.5vw;
    background-size: cover;
    position: absolute;
    z-index: 7;
    left: 48.5vw;
    bottom: 16vw;
}

#tpos3 {
    background-image: url(design/tomato.svg);
    width: 5vw;
    height: 5vw;
    background-size: cover;
    left: 10vw;
    bottom: 9.4vw;
    position: absolute;
    z-index: 7;
}

#tpos3s {
    background-image: url(design/splash.svg);
    width: 7.5vw;
    height: 7.5vw;
    background-size: cover;
    position: absolute;
    z-index: 7;
    left: 8.5vw;
    bottom: 8vw;
}

#tpos4 {
    background-image: url(design/tomato.svg);
    width: 5vw;
    height: 5vw;
    background-size: cover;
    left: 26vw;
    bottom: 10.4vw;
    position: absolute;
    z-index: 7;
}

#tpos4s {
    background-image: url(design/splash.svg);
    width: 7.5vw;
    height: 7.5vw;
    background-size: cover;
    position: absolute;
    z-index: 7;
    left: 24.5vw;
    bottom: 9vw;
}

#tpos5 {
    background-image: url(design/tomato.svg);
    width: 5vw;
    height: 5vw;
    background-size: cover;
    left: 43.5vw;
    bottom: 10.4vw;
    position: absolute;
    z-index: 7;
}

#tpos5s {
    background-image: url(design/splash.svg);
    width: 7.5vw;
    height: 7.5vw;
    background-size: cover;
    position: absolute;
    z-index: 7;
    left: 42.2vw;
    bottom: 9vw;
}

#tpos6 {
    background-image: url(design/tomato.svg);
    width: 5vw;
    height: 5vw;
    background-size: cover;
    left: 59.5vw;
    bottom: 9.4vw;
    position: absolute;
    z-index: 7;
}

#tpos6s {
    background-image: url(design/splash.svg);
    width: 7.5vw;
    height: 7.5vw;
    background-size: cover;
    position: absolute;
    z-index: 7;
    left: 58.2vw;
    bottom: 8.5vw;
}

.zoom_in {
    animation-name: zoom_in;
    animation-duration: 0.15s;
}

@keyframes zoom_in {
    0% {
        transform: scale(0.2);
    }

    100% {
        transform: scale(1)
    }
}

.zoom_out {
    animation-name: zoom_out;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(.34, .01, 1, 1);
}

@keyframes zoom_out {
    0% {
        transform: scale(3);
    }

    100% {
        transform: scale(1)
    }
}

/*Media querie*/

@media only screen and (max-width: 1200px) {
    main {
        grid-template-areas: "game"
            "info";
    }

}

aside {
    margin-left: 25px;
}