@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

/* Global styles */
html {
    font-family: 'Audiowide', cursive;
    color:black;
    max-width:80vw;
}

.center {
    margin:auto;
}
.player-info {
    width:25%;
    box-sizing:border-box;
    background-color: #dee6ef;
    text-align:center;
}
.round-info {
    text-align:center;
    width:50%;
    box-sizing:border-box;
}
.court {
    width:50%;
    box-sizing:border-box;    
}

.weapons { 
    width:20%;
    border-width: medium;
    box-sizing:border-box;    
}
.chosen-weapon {
    width:80%;
    border-width: medium;
    box-sizing:border-box;    
}

.player-colors {
    border-color: red;
    background-color: #ffd7d7 ;
}
.computer-colors {
    border-color: green;
    background-color:#dde8cb;
}
.pannel-border-color {
    border-color: blue;
}
.main-box {
    border-width: thick;    
    border-style: solid;
}
.score-box {
    width:2em;
    text-align:center;
    float:right;
    border-width: thick;    
    border-style: solid;
}

/******
 Game-Title layout */
#title-area {
    background-color:dodgerblue;
    /*font-size: x-large;*/
    color:yellow;
    text-align: center;
    vertical-align: middle;
    border-bottom: 0;
    border-color: blue;
    padding:0;
    /*height:10vh;*/
}
#title-area > h1{
    margin:0;
    width:100%;
    font-size: 5vw;
}

/******
 Information pannel layout */
#pannel {
    background-color:dodgerblue;
}
#score{
    font-size: 3vw;
    font-weight: bold;
    height: 2em;
    border:0;
}
#round{
    display: inline-block;
    margin:auto;
    border-bottom: 0;
}
#player-info{
    display: inline-block;
    float:left;
    border:0;
    
}
#computer-info{
    display: inline-block;
    float:right;    
    right: 0;    
    border:0;
}
#result {
    font-size: 3vw;
    text-align: center;
    background-color: blue;
    color:yellow;
    border:0;
}
/*****
 Game arena layout */
 #arena-area img {  /* Fit all images in its parent space */
    width:90%; 
    margin: auto;
    display: block;   
}
 /* Player court */
#area-player {
    float:left;
}
#player-weapons{
    float:left;
}
#player-weapon{
    margin:auto;
    float:right;
}
/* Computer court */

#area-computer {
    float:right;
}
#area-computer img {
    transform: scaleX(-1);
}
#computer-weapons{
    float:right;
}
#computer-weapon{
    float:left;
}

/****
  footer */
#btn-open-rules{
    position:relative;
    bottom: 0;
    font-family: 'Audiowide', cursive;
    font-size: 3vw;
    width:100%;
    height: 4vw;

}

/* Game-Rules layout */
#rules-area{
    background-color:beige;
    position:fixed;
    height:60%;
    margin:auto;
    font-size: 1vw;
    font-weight: normal;
    width:79%;
    left: 10vw;
    top: 7vh;
}
#rules-area > h2{
    text-align: center;
}
#btn-close-rules{
    position:absolute;
    bottom: 0;
    font-family: 'Audiowide', cursive;
    font-size: 3vw;
    width:100%;
    height: 4vw;
}
#combinations{
    text-align: center;
}
#combinations li{
    list-style-type: none;
    }

/*****
 Start button layout */
 #start {
    background-color:beige;
    position:fixed;
    height:10%;
    margin:auto;
    width:15%;
    left: 45vw;
    text-align: center;
 }
 #btn-start {
    width: 100%;
    height: 100%;
    font-family: 'Audiowide', cursive;
    font-size: 3vw;
    font-weight: bold;
 }

 /********
 End game screen layout */
 
 #end {
    font-size: 3vw;
    background-color: beige;
    position: fixed;
    height: 15%;
    margin: auto;
    width: 60%;
    left: 20vw;
    text-align: center;
 }
 #btn-end {
    width: 100%;
    height: 50%;
    font-family: 'Audiowide', cursive;
    font-size: 3vw;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    left: 0;    
 }

 /*media query for screen up to 1024px wide*/

 @media screen and (max-width: 1024px){
    /* Game-Rules layout */
    #rules-area{
        font-size: 2vw;
    }
    #round{ 
        display: block;
    }
    .player-info {
        width:50%;
    }
    .court {
        width:100%;
    }
    
 }
 /* media query for mobile under 550 px wide*/ 

 @media screen and (max-width: 550px){
        /* Game-Rules layout */
        #rules-area{
            font-size: 3vw;
        }
    
 }