/******les animations*****/
@keyframes bigger
{
	from{transform: scale(0.1);}
	to{transform: scale(1);}
}

@keyframes smaller
{
	from{transform: scale(1);}
	to{transform: scale(0);}
}

@keyframes fromrighttoleft
{
	from
	{
	margin-left: 100%;
	opacity: 0.1;
	}
	
	to
	{
	margin-left: 0%;
	opacity: 1;
	}
}
@keyframes open
{
	from
	{
	visibility: hidden;
	}
	to
	{
	visibility: visible;
	}
}

@keyframes close
{
	from
	{
	visibility: visible;
	}
	to
	{
	visibility: hidden;
	}
}

:root
{
--color-white-rgba: rgba(255, 255, 255, 0.8);
--color-black-rgba: rgba(0, 0, 0, 0.8);
}

#list
{
display: flex;

width: 70vw;
height: 70vh;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
margin-left: 5vw;
padding: 2vh;


background-color: var(--color-white-rgba);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-three) var(--color-five);
}

.vCard
{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 30vw;
height: 47vh;
box-sizing: border-box;
margin-bottom: 1vh;
border: 1px solid var(--color-one);
}

.vCardImg
{
max-width: 28vw;
max-height: 40vh;

}

.vCardTitle
{
display: block;
height: 5vh;

font-family: "Font2";
font-size: 1.3vw;
}

#sort
{
position: absolute;
left: 80vw;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 15vw;
height: 90vh;
background-color: var(--color-white-rgba);
box-sizing: border-box;
margin-top: 5vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-three) var(--color-five);
}

.sorted
{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 12vw;
height: 10vh;
font-size: 1.5vw;
font-family: "Font2";
box-sizing: border-box;
border: 1px solid var(--color-one);
}

.selected
{
color: var(--color-four);
border: 1px solid var(--color-four);
}

#over
{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 96vw;
height: 96vh;
position: absolute;
top: 2vh;
left: 2vw;
z-index: 2;
background-color: var(--color-two-rgba2);
box-sizing: border-box;
box-shadow: inset 0 0 2px 2px var(--color-one-rgba);
visibility: hidden;
animation: none;
}

.overDetails
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 47vw;
height: 96vh;
}

.overPict
{
max-width: 45vw;
height: 75vh;
box-sizing: border-box;
border: 1px solid var(--color-one);
box-shadow: 5px 5px 4px var(--color-one);
}

.overComment
{
display: block;
font-family: "Font2";
font-size: 1.8vw;
width: 45vw;
height: 15vh;
box-sizing: border-box;
padding: 1vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-three) var(--color-five);
background-color: var(--color-white-rgba);
}

.overGal
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
box-sizing: border-box;
padding: 1vh;
width: 47vw;
height: 47vh;
}

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

.overInfos
{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--color-four);
width: 47vw;
height: 45vh;
}

.text1
{
display: flex;
width: 45vw;
height: 5vh;
color: var(--color-one);
font-size: 1.2vw;
background-color: var(--color-white-rgba);
}

.text2
{
display: flex;
margin-left: 1vw;
height: 5vh;
font-family: "Font2";
color: var(--color-four);
align-items: center;
font-size: 1.3vw;
}

#iconeBox
{
display: flex;
justify-content: space-around;
align-items: center;
width: 15vh;
height: 5vh;
align-self: end;
box-sizing: border-box;
margin-right: 1vw;
}

.overIcone
{
width: 5vh;
height: 5vh;
visibility: hidden;
}