body {
    background-color: black;
    margin: 0 auto;
}

/* ///////////////////////////////////////// LOADER must be first  */

#loaderBackground {
    position: fixed;
    background-color: rgb(0, 0, 0);
    height: 100%;
    width: 100%;
    z-index: 99;
    margin: 0 auto;
}

#logo {
    position: fixed;
    text-align: center;
    top: 10%;
    left: 45%;
    width: 10%;
    color: white;
    z-index: 99;
}

.loader {
    position: absolute;
    border: 16px solid #f3f3f3; 
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1.5s linear infinite;
    top: 35%;
    left: 46.5%;
  }
  
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/* /////////////////////////////////////////////////////////////////////////////////   */

/* ///////////////////////////////////////// herní lobby   */

#GameStart {
    width: 100vw;
    text-align: center;
    visibility: visible;
    position: fixed;
    height: 100vh;
    z-index: 99;
    background-image: url("summonersrift.jpg");
    vertical-align: middle;
}

#nadpis  {
    margin-top: 12.5vh;
    height: 12.5vh;
    font-size: 50px;
}

#LobbyButtons  {
    height: 50vh;
}

#LobbyButtons button {
    padding: 1.5% 10% 1.5% 10%;
    margin: 2% 0 0 2%;
    background-color: rgba(255, 30, 30, 0.911);
    border-radius: 50px;
    font-size: large;
    font-family: Fantasy;
}

#LobbyButton {
    background-color: teal;

}
/* /////////////////////////////////////////  */

#help {
    position: absolute;
    top: 1%;
    left: 1%;
    color: darkred;
    cursor: help;
}

#help:hover {
    color: royalblue;
}

#HiddenHelpLayer {
visibility: hidden;
}

#HelpIMG {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 100;
    top: 0;
}

#HelpIMGButton {
    position: fixed;
    z-index: 100;
    top: 95%;
    left: 47%;
    width: 6%;
}

#BaronGIF {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0%;
    visibility: hidden;
}

#WIN {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0%;
    visibility: hidden;
}

#ClickerButton {
    padding: 2%;
    background-color: black;
    color: brown;
    border-radius: 50px;

}

#prvnicast {
    background: url("summonersrift1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#druhacast {
    background: url("summonersrift.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#BaronPlace {
    background-color: rgb(0, 0, 0);
    text-align: center;
    vertical-align: middle;
}

#ChallBanner {
    height: 50%;
    width: 60%;
 }

#RiotPoints123 {
    margin: 0 auto;
}

#SummonersRiftChamps  {
    text-align: center;
}

#CountingBlock {
    top: 0;
    left: 39vw;
    height: 15Vh;
    width: 20vw;
    text-align: center;
    position: relative;
    margin-bottom: 5%;
}

#stealth {
    visibility: hidden;
}

#ErrorMessage {
    width: 50%;
    position: fixed;
    top: 30%;
    height: 40%;
    left: 25%;
    visibility: hidden;
    z-index: 200;
}

#ErrorMessage1 {
    width: 50%;
    position: fixed;
    top: 30%;
    height: 40%;
    left: 25%;
    visibility: hidden;
    z-index: 200;
}

#ErrorMessage2 {
    width: 50%;
    position: fixed;
    top: 30%;
    height: 40%;
    left: 25%;
    visibility: hidden;
    z-index: 200;
}

#InfoTable{
 text-align: center;
}

#InfoTable2{
    text-align: center;
}

#InfoTable td {
    width: 9vw;
}

#help2 {
    position: absolute;
    top: 1%;
    left: 60%;
    color: rgb(168, 11, 11);

}

#help3 {
    position: absolute;
    left: 1%;
    top: 10%;
    color: darkred;
    cursor: help;
}

#container {
    margin: 0 2% 0 2%;
}

#SAM, #SAM_2, #SAM_3, #RICK, #RICK_2, #RICK_3, #MAX, #MAX_2, #MAX_3 {

    height: 125px;
    width: auto;
}

h1 {
    text-align: center;
}

#GEM {
    position: absolute;
    height: 10%;
    width: auto;
    top: 8%;
    left: 37.5%;
}

#GEM2 {
    height: 20%;
    width: 20%;
    left: 40%;
    position: absolute;
}

ul {
    display: inline-block;
}

li {
    display: inline-block;
    width: 30%;
    text-decoration: none;
    margin-left: 3%;
}

button {
    border-radius: 10px;
    background-color: lightblue;
    color: black;
}

#SamUpgrade2 {
    visibility: hidden;
}

#SamUpgrade3 {
    visibility: hidden;
}

#FioraUpgrade2 {
    visibility: hidden;
}

#FioraUpgrade3 {
    visibility: hidden;
}

#DariusUpgrade2 {
    visibility: hidden;
}

#DariusUpgrade3 {
    visibility: hidden;
}

#UpgradeButtonSam1 {
    visibility: visible;
}

#UpgradeButtonFiora1 {
    visibility: visible;
}

#UpgradeButtonDarius1 {
    visibility: visible;
}


#DRAGON {
    width: 100%;
 
}

#DragonFight {
    text-align: center;
    color: lightcoral;
}

#damage {
    color: mediumblue;
}

.riotpoint {
    height: 4%;
    width: 4%;
}

#champ {
    background-color: blanchedalmond;
    margin: auto;
}

.championframe {
    border: solid 5px;
    padding: 0 0 2% 0;
    background-color: whitesmoke;
    opacity: 85%;
    margin: 2%;
    text-align: center;
    border-radius: 10%;
}

/*////////////////////////////////////////////////////////////////////////Items , SHOP /////////////////////////////////////////////////////////////////*/

#Items {
    position: absolute;
    top: 25%;
    left: -2.9%;
    height: 30%;
    width: 2.5%;
    background-color: black;
    border: rgb(39, 39, 39) solid 5px;
    border-radius: 0 10px 10px 0;
}

#Items:hover {
    left: 0;
    animation-name: example;
    animation-duration: 0.5s;
    color: royalblue;
}

@keyframes example {
    from {left: -2.9%;}
    to {left: 0;}
}

#InfinityEdge {
    margin: 1%;
    height: 19%;
    width: 100%;
    background-color: black;
}

#InfinityEdge:hover {
    background-color: darkred;
}

#Smite {
    margin: 1%;
    height: 19%;
    width: 100%;
    background-color: black;
}

#Smite:hover {
    background-color: darkred;
}


#Locked {
    margin: 1%;
    height: 19%;
    width: 100%;
    background-color: black;
}


#Locked:hover {
    background-color: darkred;
}

#ItemsShopInfinityEdge {
    position: fixed;
    height: 25%;
    width: 25%;
    top: 37.5%;
    left: 37.5%;
    background-color: black;
    text-align: center;
    color: white;
    visibility: hidden;
    border: rgb(39, 39, 39) solid 6px;
    border-radius: 20px;
}

#ItemsShopSmite {
    position: fixed;
    height: 25%;
    width: 25%;
    top: 37.5%;
    left: 37.5%;
    background-color: black;
    text-align: center;
    color: white;
    visibility: hidden;
    border: rgb(39, 39, 39) solid 6px;
    border-radius: 20px;
}

#vertical {
    position: absolute;
    writing-mode: vertical-rl;
    color:  darkred;
    top: 40%;
    left: 50%;
}

/* //////////////////////////////////////////////////////////////////Items , SHOP /////////////////////////////////////////*/

/* //////////////////////////////////////////////////////////////////Dabing /////////////////////////////////////////*/

#dabing {
    position: fixed;
    top: 0;
    z-index: 105;
    color: rgb(38, 194, 10);
    right: 1%;
    cursor: -webkit-grab; cursor: grab;
}

/* ///////////////////////////////////////////////////////////////// Dabing /////////////////////////////////////////*/