:root
{
--color-one: #000000;
--color-two: #ffffff;
--color-two-rgba: rgba(255, 255, 255, 0.5);
--color-three: #b21017;
--color-three-rgba: rgba(178, 16, 23, 0.5);
}

body
{
padding: 0;
margin: 0;
background-image: url('../images/body.jpg');
}

form
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
grid-column: 1;
grid-row: 2;
z-index: 1;

}

#contain
{
display: grid;
grid-template-columns: 85vw 10vw;
grid-template-rows: 95vh; 
margin-left: 2.5vw;
margin-top: 2.5vh;
}

#puzzle
{
display: flex;
flex-wrap: wrap;
grid-column: 1;
grid-row: 1;
box-sizing: border-box;
border: 2px solid var(--color-two);
}

#result
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
grid-column: 1;
grid-row: 1;
visibility: hidden;
z-index: 1;
}

.resultMsg
{
font-size: 10vh;
}

#panel
{
display: flex;
flex-wrap: wrap;
grid-column: 2;
grid-row: 1;
background-image: url('../images/panel.jpg');
box-sizing: border-box;
border: 2px solid var(--color-one);
}

.title
{
text-align: center;
color: var(--color-one);
width: 100%;
height: 10vh;
text-shadow: 0px 0px 5px var(--color-two);
font-size: 4vh;
}

.piece
{
display: block;
float: left;
width: 10%;
max-height: 10%;
margin: 0;
box-sizing: border-box;
border: 1px solid black;
}

.score
{
color: var(--color-two);
width: 10vw;
height: 10vh;
text-align: center;
text-shadow: 0px 0px 2px #000000;
font-size: 2.8vh;
}

#buttonBox
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
height: 10vw;

}

.button
{
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 30%;
box-sizing: border-box;
border: 1px solid var(--color-two);
color: var(--color-two);
}

.thumb
{
width: 30vw;
height: 35vh;
}

a:hover
{
text-decoration: none;
color: var(--color-two);
}

a:visited
{
text-decoration: none;
color: var(--color-two);
}

a:link
{
text-decoration: none;
color: var(--color-two);
}