:root
{
--color-one: #000000;
--color-one-rgba: rgba(0, 0, 0, 0.5);
--color-two: #ffffff;
--color-two-rgba: rgba(255, 255, 255, 0.5);
--color-three: #b21017;
--color-three-rgba: rgba(178, 16, 23, 0.5);
--color-four: #b67122;
--color-five: #a130ca;
--color-six: #78727e;
}

*
{
box-sizing: border-box;
}

body
{
padding: 0;
margin: 0;
background-color: var(--color-one);
}

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


#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;
}

.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);
}

#showThumb
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: space-around;
width: 95vw;
height: 95vh;
margin-left: 2.5vw;
margin-top: 2.5vh;
box-sizing: border-box;
border: 2px solid var(--color-three);
padding: 1vh;
}

.thumb
{
display: flex;
width: 15vw;
height: 20vh;
}

#showZone
{
display: flex;
flex-wrap: wrap;
justify-content: end;
align-items: end;
width: 95vw;
height: 95vh;
margin-left: 2.5vw;
margin-top: 2.5vh;
background-image: url('../images/start.jpg');
background-repeat: no-repeat;
background-size: 95vw 95vh;
box-sizing: border-box;
border: 3px ridge var(--color-four);
}

.warning
{
color: var(--color-four);
font-size: 5vh;
/*text-shadow: 0px 0px 5px var(--color-two);*/
}

.formFields
{
background-color: var(--color-four);
}

.formBut
{
background-color: #beb66e;
color: #c36a6b;
}

.formLog
{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 25vw;
height: 20vh;
box-sizing: border-box;
border: 1px solid var(--color-four);
background-color: var(--color-one-rgba);
margin-right: 4vw;
margin-bottom: 2vh;
}

.black
{
display: flex;
justify-content: center;
align-items: center;
width: 15vw;
height: 20vh;
color: var(--color-two);
background-color: var(--color-one);
box-sizing: border-box;
border: 2px solid var(--color-three);
}

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);
}

/*#################*/

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

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

.pieceContainTest
{
display: flex;
width: 60vw;
height: 10vh;
box-sizing: border-box;
border: 1px solid black;
}

.pieceTest
{
float: left;
width: 60vw;
height: 10vh;

/*border: 1px solid black;*/
}

.version
{
font-size: 0.8vw;
color: var(--color-two);
}