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

#affZone
{
display: flex;
width: 60vw;
height: 70vh;
flex-direction: column;
box-sizing: border-box;
border: 2px solid var(--color-one);
background-color: var(--color-white-rgba);
}

#fam
{
display: flex;
justify-content: center;
align-items: space-around;
flex-wrap: wrap;
height: 70vh;
width: 10vw;
}

.famTitle
{
display: flex;
justify-content: center;
align-items: center;
height: 15vh;
width: 8vw;
text-align: center;
font-size: 1vw;
background-color: var(--color-five-rgba);
}

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


.title
{
display: block;
width: 30vw;
height: 12vh;
font-size: 1.5vw;
color: var(--color-one);
text-align: center;
}

.sTitle
{
display: block;
width: 17vw;
height: 5vh;
font-size: 1.3vw;
color: var(--color-one);
text-align: center;
}

.text
{
display: block;
width: 28vw;
height: 68vh;
font-size: 1.3vw;
color: var(--color-one);
text-align: justify;
font-family: "Font2";
}

.pict
{
max-width: 30vw;
max-height: 46vh;
}

#rightCol
{
position: absolute;
top: 3vh;
left: 77vw;
display: flex;
flex-wrap: wrap;
width: 22vw;
min-height: 95vh;
max-height: 95vh;
overflow-y: auto;
justify-content: space-around;
align-items: space-around;
scrollbar-width: thin;
scrollbar-color: var(--color-one-rgba) var(--color-four-rgba);

}

.newsMini
{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
width: 15vw;
height: 35vh;
box-sizing: border-box;
margin-top: 1vh;
background-color: var(--color-white-rgba);
border: 1px solid var(--color-one);
}

.newsMiniImg
{
max-width: 14vw;
max-height: 20vh;
}

.newsMiniRes
{
display: block;
width: 17vw;
height: 10vh;
box-sizing: border-box;
padding: 1vh;
font-family: "Font2";
font-size: 1.1vw;
}