@font-face {
    font-family: oswald;
    src: url(../assets/fonts/Oswald-ExtraLight.ttf);
}

html
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0%;
    height: 100%;
    width: 100%;
}
.sidebar-container
{
    display: flex;
    justify-content: space-evenly;
    height: 100%;
    min-width: 100vmax;

    overflow: hidden;
}

.sidebar
{
    display: flex;
    width: 100%;
    height: 100%;

    margin-right: 15%;

    justify-self: right;

    justify-content: space-evenly;
    align-items: center;
    
    flex-direction: column;

    background-color: rgb(59, 59, 59);;

    border-right: black 3px solid;

}

.sidebar:last-child
{
    margin-right: 0%;
    margin-left: 15%;

    border-right: none;
    border-left: black 3px solid;
}

.sidebar h1
{
    color: white;
    font-family: oswald;
    font-size: 200%;

    text-align: center;

    margin: 0%;
}

.rule-image
{
    width: 70%;

    margin: 1% 15%;
}

.rule-display
{
    display: flex;
    width: 100%;
    height: 100%;

    margin: auto;
    justify-content: center;
    align-items: center;
    
    flex-direction: column;
}

.rule-display p
{
    margin: 5%;

    color: white;
    font-family: oswald;
    font-size: larger;

}

.top-display
{
    display: flex;
    width: 35vw;
    min-height: 2vmin;

    margin: auto;
    margin-top: 2%;
    justify-content: center;
    align-items: center;
    
    flex-direction: column;
    flex-wrap: wrap;


    background-image: linear-gradient(to right, rgb(256, 0, 0), rgb(0, 0, 256));
    border: black 2px solid;

    color: white;

    font-family: oswald;
}
.top-display h1{
    margin: 0px auto;
}

.value-display
{
    display: flex;
    flex-direction: column;
}

.value-display h2
{
    margin: 0px auto;
}

.score-display{
    display: flex;
    flex-direction: row;
    width: 80%;

    justify-content: space-between;
}

.board{
    display: flex;
    width: 35vw;
    height: 35vw;

    margin: auto;

    flex-wrap: wrap;
    flex-direction: column;

    background-color: black;

    justify-content: center;
}

.bottom-display{
    display: flex;
    width: 35vw;
    min-height: 2vw;

    margin: auto;
    justify-content: center;
    align-items: center;
    
    flex-direction: column;
    flex-wrap: wrap;


    background-image: linear-gradient(to right, rgb(256, 0, 0), rgb(0, 0, 256));
    border: black 2px solid;

    color: white;

    font-family: oswald;
}

.bottom-display h2{
    margin: 1vmin;
}
.bottom-display h1{
    margin: 1vmin;
}

.square {
    display: flex;
    width: 9.5%;
    height: 9.5%;
  
    padding: 0px;
  
    margin: 0.25%;

    background-color: rgb(59, 59, 59);

    color: white;

}

.square:hover {
    display: flex;
    width: 9.5%;
    height: 9.5%;
  
    padding: 0px;
  
    margin: 0.25%;

    background-color: rgb(24, 24, 24);

}

.before-game
{
    display: flex;
    width: 100%;
    height: 100%;

    background-color: rgb(59, 59, 59);

    flex-direction: column;

    align-items: center;

    color: white;
    font-family: oswald;

    font-size: 115%;

}

.before-game p{
    margin: 0px 5%;
}

.before-game h1{
    margin: 2% 5%;
}

.before-game button
{
    width: 50%;
    height: 5%;

    margin-top: auto;
    margin-bottom: 5%;
    
    border: black solid 2px;
    border-radius: 5px;

    font-family: oswald;
    font-size: 100%;
    font-weight: 800;
}

.before-game button:hover
{
    width: 50%;
    height: 5%;

    margin-top: auto;
    margin-bottom: 5%;
    
    border: black solid 2px;
    border-radius: 5px;

    background-color: rgb(87, 87, 87);

    font-family: oswald;
    font-size: 100%;
    font-weight: 800;

    color: white;
}

.gameover-container
{
    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    justify-content: center;
    align-content: center;
    
    width: fit-content;
    visibility: hidden;
}

.gameover-display
{
    background-color: rgb(87, 87, 87);
    border: rgb(32, 32, 32) 2px solid;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    color: white;
    font-family: oswald;

    width: max-content;

    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
}

.gameover-display h1{
    margin: 0.5vw 1vw;
}


.gameover-button
{
    margin: 0.2vw auto;
    padding: 0.2vw;
    height: min-content;

    background-color: rgb(32, 32, 32);
    border: rgb(0, 0, 0) 2px solid;

    color: white;

    text-decoration: none;
    font-size: large;
}

.gameover-button:hover
{
    background-color: rgb(87, 87, 87);
    border: rgb(0, 0, 0) 2px solid;
}