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

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

.articleGal
{
display: flex;
align-items: center;
width: 90vw;
height: 83vh;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: var(--color-rust) var(--color-rust-rgba);
}

.articleCard
{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 30vw;
height: 80vh;
border: 1px solid var(--color-one);
margin-left: 1vw;
background-color: var(--color-rust-rgba);
}

.acImg
{
max-height: 43vh;
max-width: 22vw;
border: 1px solid var(--color-one); 

}

.acNav
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 7vw;
height: 45vh;
}

.acMini
{
max-width: 6.5vw;
max-height: 12vh;
}

.acTitle
{
width: 33vw;
height: 6vh;
padding: 1px;
}

.acText
{
width: 33vw;
height: 30vh;
padding: 1px;
}

.articleNav
{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 6vw;
height: 83vh;
margin-left: 1vw;
}

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