:root
{
--newsBack: rgba(255, 255, 255, 0.9);
--newsBack2: #ffffff;
}

#middle
{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color1-rgba) var(--color4-rgba);
}

.sfam
{
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--color1);
}

#over
{
position: absolute;
top: 2vh;
left: 4vw;
display: flex;
width: 92vw;
height: 92vh;
visibility: hidden;
z-index: 2;
background-color: var(--newsBack2);
border: 1px solid var(--color1);
}

#overImg
{
display: flex;
justify-content: center;
align-items: space-around;
flex-wrap: wrap;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-one-rgba) var(--color-four-rgba);
}

.artOverImg
{
display: block;
box-sizing: border-box;
margin: 1vh;
}

#overFich
{
display: flex;
flex-wrap: wrap;
justify-content: center;
box-sizing: border-box;
border: 2px solid var(--color4);
background-color: var(--newsBack2);
}

.overTitle
{
display: block;
text-align: center;
text-shadow: 0px 0px 6px var(--color5);
}

.overSub
{
display: block;
color: var(--color4);
font-family: "Font2";
text-align: center;
}

.overText
{
display: block;
color: var(--color1);
font-family: "Font2";
box-sizing: border-box;
border: 1px solid var(--color1);
padding: 1vh;
text-align: justify;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color1-rgba) var(--color4-rgba);
}

.overPrice
{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
color: var(--color4);
font-family: "Font2";
box-sizing: border-box;
border-left: 1px solid var(--color4);
border-bottom: 1px solid var(--color4);
background-color: var(--newsBack);
}

.redBack
{
background-color: var(--color4-rgba);
border-color: var(--color4);
}

.redBackText
{
color: var(--newsBack2);
text-align: center;
}


/*vertical*/
	@media screen and (orientation: portrait)
	{
		#middle
		{
		width: 98vw;
		height: 76vh;
		justify-content: space-around;
		}
		
		.sfam
		{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 45vw;
		height: 30vh;
		}
		
		.sfamImg
		{
		display: block;
		max-width: 43vw;
		max-height: 20vh;
		}
		
		.sfamTitle
		{
		width: 45vw;
		height: 5vh;
		color: var(--color4);
		font-size: 3vw;
		text-align: center;
		}
		
		#over
		{
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		}
		
		#overImg
		{
		width: 90vw;
		height: 45vh;
		}

		.artOverImg
		{
		max-width: 88vw;
		max-height: 43vh;
		
		}

		#overFich
		{
		width: 90vw;
		height: 45vh;
		}

		.overTitle
		{
		width: 88vw;
		height: 8vh;
		font-size: 4vw;
		}

		.overSub
		{
		width: 88vw;
		height: 5vh;
		font-size: 5vw;
		}

		.overText
		{
		width: 88vw;
		height: 28vh;
		font-size: 5vw;
		}
		
		.overPrice
		{
		top: 40vh;
		right: 10vw;
		width: 10vh;
		height: 5vh;
		font-size: 6vw;	
		}
		
	}
	
	/*horizontal*/
	@media screen and (orientation: landscape)
	{
		header
		{
		height: 96vh;
		}
		
		#middle
		{
		width: 78vw;
		height: 96vh;
		justify-content: space-around;
		align-items: center;
		}
		
		.sfam
		{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 36vw;
		height: 50vh;
		margin-top: 1vh;
		}
		
		.sfamImg
		{
		display: block;
		max-width: 34vw;
		max-height: 42vh;
		}
		
		.sfamTitle
		{
		width: 34vw;
		height: 5vh;
		color: var(--color4);
		font-size: 3vh;
		text-align: center;
		}
		
		#over
		{
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		}
		
		#overImg
		{
		width: 50vw;
		height: 90vh;
		}

		.artOverImg
		{
		max-width: 48vw;
		max-height: 80vh;
		
		}

		#overFich
		{
		width: 35vw;
		height: 90vh;
		}

		.overTitle
		{
		width: 33vw;
		height: 15vh;
		font-size: 4vh;
		}

		.overSub
		{
		width: 33vw;
		height: 10vh;
		font-size: 5vh;
		}

		.overText
		{
		width: 33vw;
		height: 60vh;
		font-size: 5vh;
		}
		
		.overPrice
		{
		top: 80vh;
		left: 40vw;
		width: 10vw;
		height: 5vw;
		font-size: 6vh;	
		}	
	}