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

body {
    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;
    margin: 0px;
    padding: 8px;
}

body.active_red {
    height: calc( 100vh - 32px);
    border: 8px rgba(173, 0, 0, 0.8);
    border-style: ridge;
}

body.active_blue {
    height: calc( 100vh - 32px);
    border: 8px rgba(0, 92, 173,0.8);
    border-style: ridge;
}

#cardGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.card {
    text-align: center;
    height: 15vh;
    line-height: 15vh;
    font-size: 3.2vw;
    font-family: 'Changa One', cursive;
    border: solid 1px #000;
    border-radius: 0.4vw;
    text-transform: uppercase;
    box-shadow: 0.1vw 0.1vw 0.1vw rgba(0, 0, 0, 0.4);
    cursor:default;
    color:#000;
    transition: all 0.5s;
    background: #ffe3be; 
}

.card_grey {
    cursor:pointer;
}

.master  .card_assassin {
    background-color: #000;
    color: #fff;
    text-shadow: 0 0 1px #000;    
}

.master  .card_blue {
    background-color: #005cad;
    color: #fff;
    text-shadow: 0 0 1px #000;    
}

.master  .card_red {
    background-color: #ad0000;
    color: #fff;
    text-shadow: 0 0 1px #000;    
}

.normal .card_assassin {
    background-color: #000;
    background-image: url(skull.png);
    color: #797979;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-shadow: 1px 1px 1px #000;
}

.normal .card_blue {
    background-color: #005cad;
    background-image: url(agent.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-color: #003c71;
    box-shadow: 0.1vw 0.1vw 0.1vw rgba(0, 0, 0, 0.4), 0 0 1.5vw #0075dc;
    color: #4effd8;
    text-shadow: 1px 1px 1px #000;
}

.normal .card_red {
    background-color: #ad0000;
    background-image: url(agent2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-color: #690000;
    box-shadow: 0.1vw 0.1vw 0.1vw rgba(0, 0, 0, 0.4), 0 0 1.5vw #ad0000;
    color: #fba63a;
    text-shadow: 1px 1px 1px #000;
}

.normal .card_neutral {
    background: #ffff9d;
    color: #b3b16b;
    background-image: url(bh.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-color: #d6d600;
}

.normal .card_grey:hover {
    filter: drop-shadow(18px 18px 20px black);
}

.normal .card:hover:not(.card_grey) span {
    opacity: 0.5;
    display: unset !important;
}

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

#menu {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: outset 5px #0058a0;
    padding: 5vh 6vw;
    border-radius: 1vw;
    background: radial-gradient(ellipse at center, rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
    background: radial-gradient(ellipse at center, rgb(137, 161, 202) 0%,rgb(134, 166, 220) 41%,rgb(56, 109, 199) 100%);
    color: #fff;
    font-size: 26px;
    font-family: 'Changa One', cursive;
    text-align: center;
    min-width: 400px;
    min-height:200px;
}

#menu .title {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%,-50%);
    border: outset 3px #0058a0;
    padding: 10px 20px;
    border-radius: 1vw;
    background: radial-gradient(ellipse at center, rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
    width: 50%;
}

#menu button {
    font-family: 'Changa One', cursive;
    background-color: rgb(41, 219, 255);
    border-bottom: 5px solid rgb(26, 113, 145);
    text-shadow: 0px -2px #1a7191;
    padding: 10px 30px;
    border-radius: 10px;
    font-size: 25px;
    color: rgb(255, 255, 255);
    transition: all 0.1s;
    outline: none;
    margin-top: 20px;
    cursor: pointer;
    background-position: -242px -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) );
    position: absolute;
    bottom: 0px;
    left:50%;
    transform: translate(-50% ,-50%);
}

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

#menu #links div {
    margin-top: 25px;
}

#menu #links a {
    color:#fff;
    text-shadow:0 0 1px #000;
    transition: 0.5s all;
}

#menu #links a:hover {
    color:#000;
}

#gameInfo {
    height: 10vh;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 0.8vw;
    border: solid 1px #9c9c9c;
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    grid-column-gap: 10px;
    font-family: 'Changa One', cursive;
    font-size: 5vh;
    color:#000;
}

.team {
    border-radius: 0.8vw;
    color:#fff;
    text-align:center;
    line-height:10vh;    
    transition: 0.5s all;
    cursor:pointer;
}

#gameInfo #teamRed {
    background-color: #AD0000;

}

#gameInfo #teamBlue {
    background-color: #005CAD;
}

#theword {
    text-align: center;
}

#wordInput {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    font-size: 8vh;
    text-align: center;
    font-family: 'Changa One', cursive;
    line-height: 10vh;
    text-transform: uppercase;
}

.normal #wordInput {
    pointer-events:none;
}

.active_red #teamRed {
    box-shadow: 0 0 20px #ad0000;
}

.active_blue #teamBlue {
    box-shadow: 0 0 20px #005CAD;
}

.active_blue #teamRed, .active_red #teamBlue {
    height: calc(10vh - 10px);
    width: calc(100% - 10px);
    margin: 5px;
    line-height: calc(10vh - 10px);
}

#pass {
    height: calc(4vh - 10px);
    box-sizing: border-box;
    margin-top: 10px;
    text-align: center;
    line-height: calc(4vh - 10px);
    font-size: 1.5vw;
    font-family: 'Changa One', cursive;
    background: #a0a0a0;
    border: solid 1px #000;
    border-radius: 0.4vw;
    cursor: pointer;
    transition: 0.5s all;
}

#pass:hover {
    height: calc(4vh - 10px);
    box-sizing: border-box;
    margin-top: 10px;
    text-align: center;
    line-height: calc(4vh - 10px);
    font-size: 1.5vw;
    font-family: 'Changa One', cursive;
    border: solid 1px #000;
    border-radius: 0.4vw;
    cursor: pointer;
    color: white;
    border-color: yellow;
    background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 1), rgb(255, 226, 0) 10px, rgb(255, 212, 0) 10px, rgb(0, 0, 0) 20px );
}

.master #pass {
    display:none;
}

.master input#wordInput::placeholder {
    opacity: 0.1;
}

.normal input#wordInput::placeholder {
    opacity: 0;
}