/*
 Copyright (C) 2017 Jan-Dirk van Dingenen
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import url('https://fonts.googleapis.com/css?family=Baloo');

body {
    background-color:#fff;
    padding:0px;
    margin:0px;
    background-color: rgb(50, 50, 50);
    overflow:hidden;
}

#game {
    display:none;
}

#game, #menu, #highscores, #decoLayer {
    width: 1202px;
    height: 800px;
    margin: 10px auto;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    border: 0;
    padding: 8px;
    font-family: 'Baloo', cursive;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index:1;
}

#decoLayer {
    z-index:0;
}

#menu {    
    cursor: default;
    background-color: rgb(255, 255, 255);
    background-image: 
        url(img/monster1.svg), 
        url(img/monster2.svg), 
        url(img/monster3.svg), 
        url(img/monster4.svg), 
        url(img/monster8.svg), 
        url(img/monster9.svg), 
        url(img/monster10.svg),
        url(img/monster7.svg),
        url(img/strange_bullseyes.png);  /* pattern adapted from www.subtlepatterns.com */
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat;
    background-size: 
        100px 100px, 
        400px 400px,
        200px 200px,
        400px 400px,
        300px 300px,
        220px 220px,
        400px 400px,
        100px 100px,
        300px 300px;
    background-position: 
        389px 141px, 
        -12px 192px,
        837px 1px,
        1020px 433px,
        841px 238px,
        600px 600px,
        178px 655px,
        283px 4px,
        0 0;
    
}

#menu header {
    text-align: center;
}

#menu header h1 {
    font-size: 190px;
    margin-top: 0px;
    line-height: 180px;
    color: rgb(43, 166, 191);
    margin-bottom: 20px;
    text-align: center;
    position: absolute;
    top: 0px;
    z-index: 5;
    width: 100%;
}

#menu header h1.underheader {
    position: absolute;
    top: 0px;
    color: rgb(0, 97, 132);
    z-index: 2;
    width: 100%;
    font-size: 194px;
    opacity: 0.9;
}

#menu #dialog {
    position: absolute;
    background-color: rgb(1, 128, 173);
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 275px;
    color: rgb(255, 255, 255);
    border-radius: 20px;
    border: outset 4px rgb(1, 76, 103);
    text-align: center;
    font-size: 30px;
    width: 400px;
    margin: 0px;
    z-index: 10;
    padding: 30px;
}

#menu #dialog select, option {
    font-size: 20px;
    font-family: 'Baloo', cursive;
    background: rgb(43, 166, 191);
    color: rgb(255, 255, 255);
    border: solid 1px rgb(255, 255, 255);
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 5px;
    outline: rgb(255, 255, 255);
    box-shadow: inset 66px 54px rgb(43, 166, 191);
}

#menu #dialog select:focus, #menu #dialog select:active {
    border-radius: 4px 4px 0px 0px;
    border-bottom: none;
}

select, option {
    background: rgb(132, 186, 223);
}

span.selectWrap {
    position: relative;
}

span.selectWrap:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 5px 0 5px;
    border-color: rgb(255, 255, 255) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    position: absolute;
    top: 22px;
    right: 6px;
    pointer-events: none;
}

#menu button {
    font-family: 'Baloo', cursive;
    background-color: rgb(41, 219, 255);
    border-bottom: 5px solid rgb(26, 113, 145);
    text-shadow: 0px -2px #1a7191;
    padding: 10px 40px;
    border-radius: 10px;
    font-size: 25px;
    color: rgb(255, 255, 255);
    transition: all 0.1s;
    outline: none;
    margin-top: 20px;
    cursor: pointer;
    background-position: -152px -85px, 0 0;
    background-size: 250% 250%, 100% 100%;
    transition: background-position 0s ease;
        background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50% ), -webkit-linear-gradient( rgb(101, 169, 215), rgb(101, 169, 215) );
}

#menu button:hover,
#menu button:focus {
    background-position:0 0, 0 0;
    transition-duration:0.5s;
}
 
#menu button:active {
    border-bottom: 1px solid;
}

.player {
    margin-bottom: 8px;
    position:relative;
}

.playerAbout {
    height: 100%;
    position: relative;
    width: 100px;
    display: inline-block;
    float: left;
}

.player .rexes {
    height: 20px;
    min-width: 20px;
    position: absolute;
    top: -6px;
    right: 15px;
    z-index: 3;
}

.player .rexes .rex {
    width: 25px;
    height: 15px;
    float: right;
    margin-left: 5px;
    background-position: center center;
    background-size: 15px 15px;
    background-repeat: no-repeat;
    padding: 1px;
    border-radius: 3px;
    box-shadow: 0px 0px 1px #000;
}

.playerInfo, .playerCards  {
    background-color: rgb(1, 128, 173);
    border: solid 1px rgb(0, 187, 255);
}

.you .playerInfo, .you .playerCards {
    background-color: rgb(43, 166, 191);
    border-color: rgb(4, 253, 192);
}

.playerInfo {
    display: inline-block;
    width: 100px;    
    height: 75%;
    max-height: 150px;
    min-height: 83px;
    border-radius: 20px 0px 0px 20px;
    box-sizing: border-box;
    padding: 0px 8px 8px 8px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    border-right: 0px;
    left: 1px;
    color: #fff;
    cursor:default;
}

.playerInfo .playerScore {
    color: rgb(0, 0, 0);
    margin-top: 30px;
    position: absolute;
    bottom: 2px;
    left: 20px;
}

.playerCards {
    display: inline-flex;
    height: 100%;
    width: 1100px;
    border-radius: 7px;
    box-sizing: border-box;
    float: left;
    align-items: center;
    padding-left: 4px;
}

#game.multi .playerCards{
    width: 800px;
}

#monsters {
    width: 900px;
    position: absolute;
    bottom: 8px;
    display: inline-flex;
    background-color: rgb(255, 215, 0);
    border-radius: 8px;
    border: solid 1px rgb(224, 190, 4);
    box-sizing: border-box;
    float: left;
    align-items: flex-end;
    padding-left: 4px;
    justify-content: space-around;
    padding-right: 10px;
}
    
.monster, .chosenCardSlot {
    height: calc(100% - 10px);
    width: calc(10% - 6px);
    display: inline-block;
    margin: 4px 0px 4px 5px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 8px;
    float: left;
    background-size: 100% 60%;
    max-height: 160px;
    position: relative;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
    cursor: -webkit-zoom-in;
}

.you .playerCards > .monster.monsterType_11 {
    cursor: url('img/minus.png'), auto;
}

.chosenCardSlot {
    cursor: default;
    border: dashed 2px rgb(83, 207, 251);
    box-shadow: none;
    box-sizing: border-box;
    color: rgb(83, 207, 251);
}

#monsters .monster {
    cursor: cell;
}

#players .playerCards .chosenCardSlot .monster {
    width: 100% !important;
    margin: 0px;
    height: 100%;
    box-shadow: none;
}

.chosenCardSlotFilled {
    background-color:silver;
    background-image: 
    radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
    radial-gradient(circle at 0    150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
    radial-gradient(circle at 50%  100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
    radial-gradient(circle at 0    50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
    background-size:100px 50px;
    background-repeat: repeat;
    border: solid 5px rgb(255, 255, 255);
}

.monster.monsterCount_3 {
    background-position: center center, -25% center, 125% center;
    background-size: 100% 50%, 75% 45%, 75% 45%;
}

.monster.monsterCount_2 {
    background-position: -25% center, 125% center;
    background-size: 75% 50%, 75% 50%;
}

.monster .monsterName {
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 0px 2px 1px #000;
    font-size:90%;
}

.monster .monsterText {
    color: rgb(255, 255, 255);
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    line-height: 16px;
    text-shadow: 1px 1px 0px #000;
    font-size: 80%;
}

.monster .monsterText .leftText {
    float: left;
    margin-left: 9%;
    text-align:left;
}

.monster .monsterText .rightText {
    float: right;
    margin-right: 9%;
    text-align:right;
}

.monster.monsterShow {
    position: absolute;
    transform: translate(-50%,-15%);
    z-index:10;
    width: 15%;
    height: 115%;
    max-height: 220px;
    font-size:140%;
    cursor: -webkit-zoom-out;
    box-shadow: 9px 9px 20px rgba(0,0,0,0.5);
    border: solid 1px rgba(255,255,255,0.5);
    border-style: groove;
}

#monsters .monster.selectedMonster, #monsters .monster.tradedMonster {
    cursor: default;
}

#monsters .monster.selectedMonster:after, #monsters .monster.tradedMonster:after {
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(220, 220, 220, 0.5);
    border-radius: 8px;
    pointer-events: none;
}

.monster.monsterHide {
    visibility: hidden;
}

.monster.monsterShow .monsterText {
    line-height: 24px;
    padding-bottom:6px;
}

.monster.monsterShow.monsterShowBottom {
    transform: translate(-50%,-64%);
}

#monsters .monster {
    height: calc(100% - 30px);
}

#monsters #choose {
    position: absolute;
    top: 0px;
    left: 10px;
    color:rgb(169, 149, 44);
}
#monsters #round {
    position: absolute;
    top: 0px;
    right: 10px;
    color:rgb(169, 149, 44);
}

.gamePlayer2 .playerCards .monster .monsterName,
.gamePlayer3 .playerCards .monster .monsterName,
.gamePlayer2 #monsters .monster .monsterName,
.gamePlayer3 #monsters .monster .monsterName {
    font-size:80%;
}

.gamePlayer4 .playerCards .monster, 
.gamePlayer5 .playerCards .monster,  
.gamePlayer4 .playerCards .chosenCardSlot, 
.gamePlayer5 .playerCards .chosenCardSlot,
.gamePlayer4 .playerCards .tradedCardSlot, 
.gamePlayer5 .playerCards .tradedCardSlot {
    width: calc(11% - 5px);
}

.gamePlayer7 .playerCards .monster, 
.gamePlayer7 .playerCards .chosenCardSlot, 
.gamePlayer6 .playerCards .monster, 
.gamePlayer6 .playerCards .chosenCardSlot {
    width: calc(13% - 10px);
}

.playerCards .monster.monsterType_5  .monsterText .leftText, 
#monsters .monster.monsterType_5  .monsterText .leftText {
    margin-left:  6%;
}

.playerCards .monster.monsterType_5  .monsterText .rightText, 
#monsters .monster.monsterType_5  .monsterText .rightText {
    margin-right:  6%;
}

.monster.monsterType_5 {
    background-size: 100% 75%;
}

#monsters .monster {
    width: calc(11.5% - 6px);
}

.details {
    background-color: rgb(255, 255, 255);
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    bottom: 5px;
    border: solid 1px rgb(230, 229, 229);
    cursor:default;
    display:inline-block;
    left: 100px;
}

.detail {
    width: 80px;
    float: left;
    margin-right: 20px;
    display:inline-block;
}

.detail:last-child {
    margin-right: 0px;
}

.detail .detailImg {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    float: left;
    margin-bottom: 2px;
    border-radius: 3px;
}

.detail .detailPlayer {
    text-decoration: underline;
    font-size:15px;
}

.detail .detailScore {
    height: 20px;
    line-height: 20px;
    float: left;
    margin-left: 10px;
    width: 50px;
    color: rgb(97, 96, 96);
    margin-bottom: 2px;
}

.details .totals {
    float: left;
    clear: both;
    width: 100%;
    display:inline-block;
}

.details .totals .total {
    float: left;
    width: 80px;
    margin-right: 20px;
    border-top: solid 1px rgb(0, 0, 0);
    display:inline-block;
}

#roundHistory {
    background-color: rgb(234, 234, 234);
    padding: 10px 10px 5px 10px;
    border-radius: 10px;
    position: absolute;
    top: 5px;
    left: 105px;
    border: solid 1px rgb(175, 173, 173);
    box-shadow: 0px 0px 50px 5px #fff;
    cursor:default;
}

#roundHistory #winner {
    text-align: center;
    font-size: 30px;
    background: radial-gradient(ellipse at center, rgba(229, 249, 61, 0.48) 0%,rgba(255,255,255,0) 75%);
}

#roundHistory .scoreRound {
    clear: both;
    float: left;
    margin-bottom: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 1px 1px;
}

#roundHistory .details {
    padding: 0;
    border-radius: 0;
    position: initial;
    bottom: auto;
    border: 0;
}

#roundHistory .roundHistory {
    clear: both;
    font-size: 25px;
}

.playerScore.winningScore {
    text-shadow: 0 0 7px #fff;
    font-size: 120%;
    left: 10px;
    bottom: 4px;
}

::selection, button::selection {
  background: transparent;
}
::-moz-selection, button::-moz-selection {
  background: transparent; 
}

#buttons {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 290px;
    border-radius: 7px;
    box-sizing: border-box;
    border: solid 1px rgb(214, 214, 214);
}

#buttons button.doneButton {
    cursor: pointer;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0px 20px;
    width: 200px;
    height: 50%;
}

#buttons button.doneButton.show {
    opacity:1;
    pointer-events: all;
}

#buttons button#nextRound {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0px 20px;
    width: 200px;
    height: 50%;
    z-index: 5;
    background-color: #82BF56;
    border-bottom: 5px solid #669644;
    text-shadow: 0px -2px #669644;
}

#buttons button {
    font-family: 'Baloo', cursive;
    background-color: rgb(52, 152, 219);
    border-bottom: 5px solid rgb(41, 128, 185);
    text-shadow: 0px -2px #2980B9;
    padding: 10px 40px;
    margin: 0px 10px 10px 0px;
    border-radius: 10px;
    font-size: 25px;
    color: rgb(255, 255, 255);
    transition: all 0.1s;
    outline:none;
    transform: translate(-50%,calc(-50% + 5px));
}

#buttons button:active {
    border-bottom: 1px solid;
}

div#modal {
    position: absolute;
    width: 500px;
    height: 375px;
    background-color: rgb(244, 245, 99);
    top: 280px;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    border: solid 2px rgb(253, 255, 0);
    padding: 20px;
    color: rgb(133, 134, 32);
    box-shadow: 6px 6px 13px rgba(0, 0, 0, 0.64);
    z-index: 100;
}

div#overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    border-radius: 15px;
    box-sizing: border-box;
    background-color: rgba(103, 103, 103, 0.5);
    z-index: 99;
    display:none;
}

#modal .modalHead {
    text-align: center;
    font-size: 30px;
    margin-bottom: 25px;
}

#modal .modalCard {
    width: 150px;
    height: 175px;
    margin: auto;
}

#modal .modalCard .monster {
    width: 100%;
    height: 100%;
    cursor: default;
}

#modal .modalButtons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    cursor:pointer;
}

#modal .modalButtons button {
    padding: 0px 20px;
    width: 235px;
    height: 100px;
    font-family: 'Baloo', cursive;
    border-radius: 10px;
    font-size: 14px;
    color: rgb(255, 255, 255);
    transition: all 0.1s;
    cursor: pointer;
    outline: none;
    border-bottom: 5px solid;
}

#modal button#spread {
    background-color: rgb(231, 76, 60);
    border-bottom-color:rgb(189, 62, 49);
    text-shadow: 0px -2px #BD3E31;
}

#modal button#cure {
    background-color: #82BF56;
    border-bottom-color:#669644;
    text-shadow: 0px -2px #669644;
}

#modal .modalButtons button:active {
    border-bottom: 1px solid;
}

#chat {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 290px;
    border-radius: 7px;
    box-sizing: border-box;
    border: solid 1px rgb(214, 214, 214);
}

div#other {
    position: absolute;
    top: 10px;
    right: 30px;
    z-index:10;
}

div#other a {
    color:#fff;
    font-family: 'Baloo', cursive;
    font-size: 12px;
    text-shadow: 1px 1px #000;
}

#inputscore {
    display: none;
    position: absolute;
    top: 15px;
    right: 25px;
    background: rgb(255, 255, 255);
    padding: 40px;
    border-radius: 25px;
    border: outset 2px rgb(255, 209, 0);
    box-shadow: 9px 8px 10px 2px rgb(17, 87, 101);
    height: 81px;
    z-index: 1000;
}

#inputscore div {
    text-align: center;
    font-size: 18px;
}

#inputscore input#yourname {
    width: 220px;
    height: 40px;
    font-size: 30px;
    line-height: 25px;
    padding-left: 5px;
    border: solid 1px rgb(0, 0, 0);
    border-radius: 5px;
    outline: none;
}

#inputscore input#yourname:focus {
    border: solid 1px rgb(255, 209, 0);
}

#okbutton {
    cursor:pointer;
    border: solid 1px rgb(214, 214, 214);
    font-family: 'Baloo', cursive;
    background-color: rgb(255, 209, 0);
    border-bottom: 5px solid rgb(183, 185, 41);
    text-shadow: 0px -2px #a9b929;
    padding: 5px 20px;
    border-radius: 10px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    transition: all 0.1s;
    outline: none;
    margin-left: 5px;
    transform: translate(0px,-8px);
}

#okbutton:active {
    border-bottom: 1px solid;
    transform: translate(0px,-2px);
}

#highscores {
    display:none;
}

#highscores h2.scoreTitle {
    text-align: center;
    font-size: 35px;
    margin: 0px;
    margin-bottom: 10px;
}

#highscores .scoreList {
    width: 390px;
    float: left;
    margin: 0px 5px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 10px;
    height: 100%;
    cursor:default;
    background-image: url(img/strange_bullseyes.png);
}

#highscores ul {
    margin: 0;
    padding: 0;
}

#highscores li.scoreRow {
    list-style: none;
    height: 36px;
    position: relative;
}

#highscores .scoreList.scoreLab0 {
    background-color: rgba(65, 255, 65, 0.26);
    color: rgb(1, 132, 1);
}

#highscores .scoreList.scoreLab1 {
    background-color: rgba(245, 255, 65, 0.26);
    color: rgb(132, 132, 1);
}

#highscores .scoreList.scoreLab2 {
    background-color: rgba(255, 65, 65, 0.26);
    color: rgb(132, 1, 1);
}

#highscores .rank {
    font-size: 25px;
    margin-right: 20px;
    font-weight: bold;
    margin-left: 20px;
    line-height: 35px;
    float: left;
    width: 30px;
}

#highscores .name {
    font-size: 18px;
    text-align: center;
    width: 262px;
    display: inline-block;
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#highscores .score {
    float: right;
    margin-right: 20px;
    font-size: 22px;
    line-height: 35px;
}

#highscores li.scoreRow:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

#highscores .scoreDeck .monster {
    height: 30px;
    width: 29px;
    cursor: default;
    background-color: rgb(255, 255, 255);
}

#highscores .scoreRow .scoreDeck {
    position: absolute;
    top: 25px;
    z-index: 2;
    display:none;
}

#highscores .scoreRow:hover .scoreDeck {
    display:block;
}

#highscores .scoreDeco {
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: -1;
}

#highscores .scoreDeco1 {
    background-image: url(img/monster17.svg);
    width: 300px;
    height: 400px;
    bottom: 27px;
    right: 40px;
}

#highscores .scoreDeco.scoreDeco2 {
    background-image: url(img/monster11.svg);
    width: 300px;
    height: 400px;
    bottom: 30px;
    left: 31px;
}

#highscores .scoreDeco.scoreDeco3 {
    background-image: url(img/monster14.svg);
    width: 300px;
    height: 400px;
    bottom: 30px;
    left: 460px;
}

.decoMonster  {
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: -1;
    transition: all 12s;
    transition-timing-function: ease-in-out;
}

.decoMonster1 {
    background-image: url(img/monster13.svg);
    width: 300px;
    height: 400px;
    top: -154px;
    left: -43px;
    transform: rotate(-13deg);
}

.decoMonster2 {
    background-image: url(img/monster11.svg);
    width: 300px;
    height: 400px;
    top: 407px;
    left: -80px;
    transform: rotate(-90deg);
}

.decoMonster3 {
    background-image: url(img/monster4.svg);
    width: 300px;
    height: 400px;
    top: 330px;
    left: 960px;
    transform: rotate(90deg);
}

.decoMonster4 {
    background-image: url(img/monster2.svg);
    width: 300px;
    height: 400px;
    top: -107px;
    left: 970px;
    transform: rotate(45deg);
}

.decoMonster5 {
    background-image: url(img/monster10.svg);
    width: 300px;
    height: 400px;
    top: 579px;
    left: 220px;
    transform: rotate(-180deg);
}

.decoMonster6 {
    background-image: url(img/monster1.svg);
    width: 300px;
    height: 400px;
    top: -113px;
    left: 550px;
}

.decoMonster7 {
    background-image: url(img/monster9.svg);
    width: 300px;
    height: 400px;
    top: 104px;
    left: 911px;
    transform: rotate(95deg);
}

.decoMonster8 {
    background-image: url(img/monster14.svg);
    width: 259px;
    height: 259px;
    top: 166px;
    left: -99px;
    transform: rotate(-90deg);
}

.decoMonster9 {
    background-image: url(img/monster12.svg);
    width: 259px;
    height: 259px;
    top: 636px;
    left: -90px;
    transform: rotate(-110deg);
}