:root {
    --red: orangered;
    --yellow: gold;
    --green: limegreen;
    --blue: skyblue;
    --black: black;
    --pen: #333;
    --mediumblue: steelblue;
    --beige: #FCFFE7;
    --lightblue: #BAD7E9;
    --darkblue: #2B3467;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0 auto;
}

nav {
    background-color: var(--mediumblue);
    width: 100%;
    position: fixed;
    top: 0;
    border-bottom: 1px solid var(--pen);
    z-index: 1;
}
  
nav ul {   
    list-style: none;
}

nav li {
    float: left;
}

nav a {
    display: block;
    padding: 1em;
    color: var(--beige);
    text-decoration: none;
}

nav a:hover {
    background-color: var(--lightblue);
    color: var(--darkblue)
}

#playQwixx, #bestScoreZone {
    padding: 5em;
}

#bestScoreZone ol {
    padding-top: 0.5em;
    list-style-position: inside;
}

#bestScoreZone li {
    padding: 0.5em 0;
}

#bestScoreZone li:nth-child(1)::before {
    content: "🥇 ";
}

#bestScoreZone li:nth-child(2)::before {
    content: "🥈 ";
}

#bestScoreZone li:nth-child(3)::before {
    content: "🥉 ";
}

body, #diceZone {    
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    width: 25vw;
    max-width: 100px;
    height: 10vh;
    max-height: 30px;    
}

#displayDice {
    height: 20vh;
    max-height: 50px;
    font-size: xx-large;
}

#messageZone {
    margin: 0.5em;
    text-align: center;
}

.hide {
    display: none;
}

.show {
    display: block;
}

#bestScoreZone {
    text-align: center;
}

#bestScoreZone h3 {
    margin: 1em auto 0 auto;
}

#rules {
    padding: 4em;
}

#rules h3, #rules p {
    margin: 1em auto;
}

#rules ul {
    margin-left:2em;
}

#rules table {
    margin: 0 auto;
}

footer {
    background-color: var(--mediumblue);
    width: 100%;
    padding: 1em;
    font-size: x-small;
    color: white;
}

footer a {
    color: var(--beige);
}

footer a:visited {
    color: var(--lightblue);
}

footer > p {
    margin-right: 2em;
    padding: 1em;
}

/* Table */
table,
td {
    border: 1px solid #333;
    text-align: center;
}

th {
    padding: 1em;
}

td {
    width: calc(4vw + 2px); 
    height: calc(4vw + 2px);
    padding: 1em;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

#rules td {
    min-width: 40px; 
    min-height: 40px;
    padding: 0.5em;
}

/* congrats */

#congrats {
    background-color: var(--lightblue);
    border: 1px solid var(--darkblue);
    border-radius: 5px;
    padding: 1em;
    text-align: center;
    margin: 1em;
}

#congrats button {
    margin: 1em auto 0 auto;
}

/* WARNING - Begins */
/* Classes below are used by the JavaScript file. Change with care. */
/* Background */
.redbg {
    background-color: var(--red);
}

.yellowbg {
    background-color: var(--yellow);
}

.greenbg {
    background-color: var(--green);
}

.bluebg {
    background-color: var(--blue);
}

.deadCell {
    background-color: var(--pen);
    opacity: 0.5;
}

/* Colors */
.black {
    color: var(--black);
}

.red {
    color: var(--red);
}

.yellow {
    color: var(--yellow);
}

.green {
    color: var(--green);
}

.blue {
    color: var(--blue);
}

/* cell make up */
.allowedCell, .allowCellColorLine, .minus5 {
    box-shadow: 0px 0px 0px 2px var(--black) inset;
}

.checkCell, .permanentCheckCell {
    background:linear-gradient(
    to bottom right, 
    transparent  calc(50% - 2px), 
    var(--pen) calc(50% - 2px), 
    var(--pen) calc(50% + 2px) , 
    transparent  calc(50% + 2px)
    ),
        
    linear-gradient(
    to bottom left, 
    transparent  calc(50% - 2px), 
    var(--pen) calc(50% - 2px), 
    var(--pen) calc(50% + 2px) , 
    transparent  calc(50% + 2px)
  );
}

/* WARNING - Ends */

@media screen and (max-width: 550px) {
    #playQwixx, #rules, #bestScoreZone {
        margin: auto;
        padding-left: 0;
        padding-right: 0;
    }
    #rules {
        width: 100vw;
        padding-left: 1em;
        padding-right: 1em;
    }
    #rules table {
       table-layout: fixed;
       width: 100%;
       font-size: x-small;
    }
    #rules td {
        min-width: unset;
        min-height: unset;
        padding: 0.2em;
    }
    table {
        width: 100%;
    }
    td {
        padding: 0;
        width: calc(8vw + 2px);
        height: calc(8vw + 2px);
    }
    nav ul {
        display: flex;
        justify-content: space-evenly;
    }
    .allowedCell, .allowCellColorLine, .minus5 {
        box-shadow: 0px 0px 0px 1px var(--black) inset;
    }
}