:root{
    --mainColor: #3890af;
    --gradiant1: radial-gradient(#27aae1, #2744e1);
    --gradiant2: -webkit-linear-gradient(0deg, rgba(0, 104, 56, 1) 0%, rgba(3, 107, 57, 1) 0.79%, rgba(22, 134, 63, 1) 8.05%, rgba(38, 155, 68, 1) 16%, rgba(49, 170, 71, 1) 24.88%, rgba(55, 178, 73, 1) 35.43%, rgba(57, 181, 74, 1) 51.96%, rgba(55, 179, 73, 1) 68.96%, rgba(49, 171, 72, 1) 78.38%, rgba(39, 157, 68, 1) 85.95%, rgba(25, 137, 64, 1) 92.53%, rgba(6, 112, 58, 1) 98.41%, rgba(0, 104, 56, 1) 100%);
}


@font-face {
    font-family: "Ffactory";
    src: url("Capture_it.ttf");
}

html,body{margin:0px;
    background : linear-gradient(90deg, rgba(102, 102, 102, 1) 0%, rgba(108, 108, 108, 1) 5.06%, rgba(141, 141, 141, 1) 35.68%, rgba(153, 153, 153, 1) 52.51%, rgba(134, 134, 134, 1) 72.99%, rgba(102, 102, 102, 1) 100%);
    overflow: hidden;
    font-family: Ffactory;
    font-size: 1.2em;
    letter-spacing: .2ch;
}

.off{display: none;}

#headerContainer,#footerContainer{background-color: black;width: 100%; height: 60px;overflow: hidden;position: relative;z-index: 455;}

#footerContainer{
    position: fixed;
    bottom: 0;
    width: 100%;
}

a{
    display: block;
    margin:15px;
}

.yellowBlock{
    background-color: #FCEE21; 
    width: 70px; height: 500px; 
    transform: rotate(-45deg);
    display: inline-block;
    margin-left: 80px;
    position: relative;
    top:-143px
}

.blackBlock{
    background-color: black; 
    width: 70px; height: 500px; 
    transform: rotate(-45deg);
    display: inline-block;
    margin-left: 80px;
    position: relative;
    top:-143px
}

.menuBtn{
    width: 45px; height: 45px;
    background-color: #FCEE21;
    border-radius: 12px;
    border:solid black 2px;
    box-shadow: 2px 2px 5px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    position: absolute;
    z-index: 4;
    left: 12px;
    top: 5px;
}

.dash{background-color: black;
    width: 80%;
    height: 6px;
    border-radius: 54px;
    margin: auto;
    margin-top:7px;
}

.popoutMenu a{list-style: none;text-align: center; color:#FCEE21}
a{list-style: none;text-align: center; color:#FCEE21}
.popoutMenu{
    /* background : linear-gradient(90deg, rgba(102, 102, 102, 1) 0%, rgba(108, 108, 108, 1) 5.06%, rgba(141, 141, 141, 1) 35.68%, rgba(153, 153, 153, 1) 52.51%, rgba(134, 134, 134, 1) 72.99%, rgba(102, 102, 102, 1) 100%); */
   background-color: black;
    border-bottom: solid 15px black;
    color: #FCEE21;
    position: absolute;
    width: 100%;
    height: 100vh;
    top: -100vh;
    z-index: 4;
    transition: top 1s;
    text-align: center;
}

.popoutActive{
    top: 60px;
}

.subTitle,.title{
    text-align: center;
    font-size: 3em;
    letter-spacing: 0ch;
    margin-bottom: 40px;
}

.title{
    background-color: black;
    color:  #FCEE21;
    border-radius: 12px;
    width: 400px;
    max-width: 90%;
    font-size: 2.8em;
    margin:0 auto;
    margin-top: 44px;
    margin-bottom: -45px;
    transform: rotate(-3deg);
}


.btn{
    font-family: fFactory;
    text-align: center;
    display: block;
    background-color: black;
    color:  #FCEE21;
    border: solid 4px black;
    border-radius: 12px;
    width: 400px;
    max-width: 300px;
    font-size: 2.5em;
    text-align: center;
    margin:0 auto;
    cursor: pointer;
    user-select: none;
}

.btn:hover{
    border: solid 4px #FCEE21;
}

.btn:active{
    border: solid 4px white;
}

.testbtn{
    padding:1em 3em;
    cursor: pointer;
    margin:5px;
}

#gameSVG {
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#gameboard{
    position: relative;
}

.txt{
    text-align: center;
    max-width: 50ch;
    margin:0 auto;
    margin-top:15px;
    letter-spacing:0px;
}

.colorbtnActive{
    filter: brightness(2);
}


.testbtn:active{
    position:relative;
    top:2px;
    left:2px;
    background-color: gray;
}

.testbtnActive{
    position:relative;
    top:2px;
    left:2px;
    background-color: gray;
    filter: brightness(1.6);
}

.container{
    position: relative;
    z-index: 0;
}

.game{
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .yellowBlock,.blackBlock{
    width: 30px; height: 400px; 
    margin-left: 50px;
    top:-143px
}
}