:root
{
--color-white: #ffffff;
--color-white-rgba: rgba(255, 255, 255, 0.5);

--color-black-rgba: rgba(0, 0, 0, 0.8);
--color-rust: #985717;
--color-rust-rgba: rgba(152, 87, 23, 0.6);
--color-light-rust-rgba: rgba(152, 87, 23, 0.3);
}

@keyframes wrapFromRight
{
	from{margin-left: 99vw;}
	to{margin-left: -29vw;}
}

header
{
display: flex;
margin-left: 2vw;
width: 96vw;
height: 15vh;
overflow-x: hidden;
background-image: url("../images/header_back2.png");
background-repeat: no-repeat;
background-size: 96vw 15vh;
background-position: center;
}

.imgHeader
{
/*width: 30vw;*/
height: 13vh;
animation: 8s linear 0s wrapFromRight infinite;
}

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

main
{
display: flex;
justify-content: center;
align-items: center;
width: 96vw;
height: 83vh;
margin-left: 2vw;
}

nav.selec{
width: 18vw;
height: 81vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--dirty-white) var(--metallic-blue);
}

.motoThumb{
width: 98%;
margin-bottom: 1vh;
border: 2px solid var(--metallic-blue);
}

.hid{
display: none;
}

article{
display: flex;
flex-wrap: wrap;
width: 78vw;
height: 81vh;
}

nav.imgs{
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--dirty-white) var(--metallic-blue);
width: 10vw;
height: 81vh;
}

section.left{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 40vw;
height: 81vh;

}

.motoImg{
max-width: 98%;
max-height: 60vh;
margin-top: 1vh;
border: 4px solid var(--metallic-blue);
}

.motoImgClicked{
position: absolute;
z-index: 2;
max-width: 98%;
height: 98%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 4px solid var(--metallic-blue);
}

p.comment{
font-family: "pochoir";
width: 98%;
height: 15vh;
color: var(--dark-blue);
background-image: url("../images/header_back2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
font-size: 1.6vw;
padding: 1vw;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--dirty-white) var(--metallic-blue);
}

section.right{
display: flex;
flex-direction: column;
font-family: "pochoir";
font-size: 1.6vw;
justify-content: center;
width: 28vw;
height: 81vh;
background-image: url("../images/header_back2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}

.info{
color: var(--dark-blue);
margin-left: 2vw;
}

.infoT{
color: var(--dark-rust);
width: 100%;
padding: 1px;
}


button
{
display: inline-block;
width: 5vw;
height: 20vh;
background-color:var(--color-rust-rgba);

font-size: 2.5vh;
font-family: "Font1";
text-align: center;
word-break: break-word;
color: var(--color-white);
}