:root {
    --cell-width: 10vh;
    --var-piece-size: 3vw;
}


body {
    margin:auto;
}

.container {
    position: fixed;
    margin: auto;
    
    width: 100%;
    height: 100%;

    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-size: 10px;
    background: rgb(41, 37, 33);
}

/*
.container div {
    border: 0.1px solid black;
    gap:0;
    margin: 0;
}*/

.header {
    color: white;
    font-family: 'Quicksand', sans-serif;
    font-size: large;
    font-variant-caps: small-caps;
    position: absolute;
    
    top: 0;
    height: fit-content;
    width: 100%;
    left: 0;
}

.bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height:fit-content;
    background-color: #333333;
}

.tabs {
    float: left;
    list-style-type: none;
}

.tabs a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

h1 {
    color: white;
    padding-left: 8px;
    padding-right: 8px;
    font-variant-caps: all-small-caps;
    text-align: center;
    padding-top: 50px;
}

.illustration {
    position: absolute;
    left: 10px;
    width: 115px;
    top: 60px;
    height: 89%;

    background: rgb(28, 24, 24);
}

#helperText {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 3vh;
    color: white;
    vertical-align: middle;
    padding-top: 50px;
    padding-left: 8px;
    padding-right: 8px;
    line-height: 1.5;
    
}

.wrap {
    position: absolute;
    left: 140px;
    right: 100%;
    top: 60px;
    bottom: 100%;
    width: 89%;
    height: fit-content;
    z-index: 0;
}

.game_stuff {
    color: white;
    width: 90%;
    height: 100%;

    position: absolute;
    
    left: 0;
    top: 0;
}

#game_board {
    height: fit-content;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    min-width: calc(8* var(--cell-width));
    border: auto;
}

.cell {
    background-color: #e8c098;
    text-align: center;
    position: relative;
    justify-content: center;
    margin-bottom: 2%;
    align-items: center;
    font-size: var(--var-piece-size);

    box-sizing: border-box;

    width: var(--cell-width);
    height: var(--cell-width);
    z-index: 2;
    cursor: pointer;
}

.moveableCell {
    border: 3px solid #9256e7;

    background-color: #e8c098;
    text-align: center;
    position: relative;
    justify-content: center;
    margin-bottom: 2%;
    font-size: var(--var-piece-size);

    box-sizing: border-box;
    z-index: 2;

    width: var(--cell-width);
    height: var(--cell-width);
    cursor: pointer;
}

.moveableSelected {
    background-color: #e2b07e;
    text-align: center;
    position: relative;
    justify-content: center;
    margin-bottom: 2%;
    align-items: center;
    font-size: var(--var-piece-size);

    box-sizing: border-box;

    width: var(--cell-width);
    height: var(--cell-width);
    z-index: 4;
    cursor: pointer;
    
    border: 3px solid #5fa2d7;
}

.targetCell {
    background-color: #e2b07e;
    text-align: center;
    position: relative;
    justify-content: center;
    margin-bottom: 2%;
    align-items: center;
    font-size: var(--var-piece-size);

    box-sizing: border-box;

    width: var(--cell-width);
    height: var(--cell-width);
    z-index: 4;
    cursor: pointer;
    border: auto;

    border: 2px solid #db3a3c;
}

.rowIndexCell {
    color: #f4d6b9;
    text-align: center;
    background-color: rgb(41, 37, 33);
}

.columnIndexCell {
    color: #f4d6b9;
    text-align: center;
    background-color: rgb(41, 37, 33);
}

a {
    font-style: italic;
    font-weight: bold;
}

.player1 {
    color: white;
    position: absolute;
    top: 2%;
    height: fit-content;
    right: 0;

}

.game_moves{
    color: white;
    position: absolute;
    /*align-self: center;*/
    bottom: 150px;
    right: 0;
    top: 150px;
    width: fit-content;
}

.moves {
    color: white;
    list-style-type: none;
    position: relative;
    overflow-y:scroll;
    height: 20vh;
    width: 270px;
    top: 7vh;

    font-size: small;
}

.li {
    padding: 3px;
}

.player2 {
    color: white;
    position: absolute;
    bottom: 0; 
    right: 0; 
    height: fit-content;  
}

.playerName {
    text-align: center;
    color: white;
    background-color: rgb(41, 37, 33);
    border: none;
}

.playerIcon {
    color: white;
    border-radius: 10vw;
    border: 1px solid whitesmoke;
    min-width: 100px;
    min-height: 100px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    background-position: center;
}

.takeBack {
    color: white;
    cursor: pointer;
    background:rgb(28, 24, 24);
    padding: 4px;
    border-radius: 3px;
    font-size: small;
    text-align: center;
}

div .takeBack:hover {
    background: rgb(247, 171, 184);
    color:rgb(41, 37, 33);
}

.resign:hover {
    background: rgb(247, 171, 184);
    color:rgb(41, 37, 33);
}

.draw:hover {
    background: rgb(247, 171, 184);
    color:rgb(41, 37, 33);
}

.draw {
    color: white;
    cursor: pointer;
    background:rgb(28, 24, 24);
    padding: 4px;
    border-radius: 3px;
    font-size: small;
    text-align: center;
}

.resign {
    color: white;
    cursor: pointer;
    background:rgb(28, 24, 24);
    border-radius: 3px;
    padding: 4px;
    font-size: small;
    text-align: center;
}

.wins {
    font-size: small;
    padding: 5px;
}

.losses {
    font-size: small;
    padding: 5px;
}

.draws {
    font-size: small;
    padding: 5px;
}

.stats {
    background:rgb(28, 24, 24);
    border-radius: 3px;
    padding: 4px;
}

#result_dialog
{
    background: none;
    border: none;
    filter: drop-shadow(4px 4px 2px black);
    height: 60%;
    position: sticky;
    text-align: center;
    width: 90%;
    top: 30vh;
}

#result_dialog::backdrop
{
    backdrop-filter: blur(2px);
    background-image: url("./assets/confetti.gif");
    border:none;
    position: sticky;
}

#result_dialog h2
{
    color: rgb(204, 149, 209);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 100pt;
    margin: 0;
    border: none;
    position: sticky;
}

#result_message
{
    font-size: 24pt;
    font-weight: bold;
    line-height: 2;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    position: sticky;
}

#result_winner
{
    font-size: 18pt;
    font-weight: bold;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    position: sticky;
}

.chooseIcon {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: large;
    border: none;
    background-color: rgb(28, 24, 24);
    border-radius: 4px;

    color: white;
    position: sticky;
}

.chooseIcon::backdrop
{
    backdrop-filter: blur(2px); 
    position: sticky;
}

.iconImage {
    border: 2px solid white;
    padding: 3px;
    height: fit-content;
    width:fit-content;
}

/*Tutorial CSS Section*/


.starterMessage {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
}

h5 {
    top: 0;
    font-size: xx-large;
}

h6 {
    top: 0;
    font-size: large;
}

.topBar {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: auto;
    padding: 30px;
    top: -210px;
    width: fit-content;
    position: absolute;
    left: -750px;
}

.explainIcon {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -50px;
}

.explainTakeBack {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -50px;
    height: fit-content;
}

.explainDraw {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -50px;
    height: fit-content;
}


.explainResign {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -50px;
    height: fit-content;
}

.explainWins {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -50px;
    height: fit-content;
}

.explainMoveEncode {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -50px;
    height: fit-content;
}

.explainHelperText {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    left: -750px;
    width: 200px;
}


.AimofTheGame {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -450px;
    top: 20px;
    height: 400px;
}

.explainMovePiece {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -450px;
    top: 20px;
    height: 400px;
}

.explainTargetPiece {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 300px;
    right: -450px;
    top: 20px;
    height: 400px;
}

.explainResize {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 350px;
}

.explainNavigation {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    width: 350px;
}

.referToAbout {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
}

.endTutorialMessage {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(69, 67, 100);
    border-radius: 9px;
    color: white;
    text-align: center;
    padding: 30px;
    font-size: xx-large;

}