*{margin:0;
padding:0;
box-sizing: border-box;
list-style: none;
}

/*Composition:big flexible layouts*/
/*Header h2,p -> maincont w/ 2 flex subcont(L,R)->seccont ul*/
#maincont{display:flex;}
.container.left {
    background:lightgreen;
    padding:2vh 2vw;
    margin-right:2vw;}
.container.right {
    background:lightcyan;
}
/*Utility:does one job well. Things like wrappers*/
header{
    margin:2vh 2vw;
    padding:2vh 2vw;
    border:2px solid red;
    background:lightcoral;}
#maincont{
    margin:2vh 2vw;
    padding:2vh 2vw;
    border:2px solid green;
    background:#90ff90;
}
#seccont{
    margin:2vh 2vw;
    padding:2vh 2vw;
    border:2px solid blue;
    background:lightblue;
}
/*Block:cards,buttons,etc.*/
.container.right{
    font-size:1em;
    color:black;
}
button{
    color:black;
    padding:4px;
}
.container.right p{
    text-decoration:underline;
    padding:2vh 2vw;
}
.playerScore,.aiScore{
    padding:0 2vw;
}
#RPS{
    text-decoration: underline;
}
/*Exceptions: before/after and that sort,mediaquery*/
#shooter{
    color:red;
    font-weight:bold;
    background:orange;
}
@media screen and (max-width:380px) {
    body{
        background:black;
    }
    h1{
        font-size:3rem;
    }
    h2{
        font-size:2rem;
    }
    p{
        font-size:1rem;
    }
}
@media screen and (min-width:381px) and (max-width:767px){
    body{
        background:green;
    }
    h1{
        font-size:3rem;
    }
    h2{
        font-size:2.5rem;
    }
    p{
        font-size:1.2rem;
    }
}
@media screen and (min-width:768px) and (max-width:1200px){
    body{
        background:blue;
    }
    h1{
        font-size:3rem;
    }
    h2{
        font-size:2.7rem;
    }
    p{
        font-size:1.4rem;
    }}
@media screen and (min-width:850px) and (max-width:1200px){
    body{
        background:lightblue;
    }
}
@media screen and (min-width:1201px){
    body{background:pink;}
    h1{
        font-size:3rem;
    }
    h2{
        font-size:2.7rem;
    }
    p{
        font-size:1.6rem;
    }
}