/* ysabeau-regular - latin */
@font-face {
 font-family: "Ysabeau";
 font-style: normal;
 font-weight: 500;
 src: url("ysabeau-v1-latin-500.woff2");
}
@font-face {
 font-family: "Ysabeau";
 font-style: bold;
 font-weight: 700;
 src: url("ysabeau-v1-latin-700.woff2");
}
/* ysabeau-sc-200 - latin-ext */
@font-face {
 font-family: "Ysabeau SC";
 font-style: normal;
 font-weight: 200;
 src: url("YsabeauSC-VariableFont_wght.ttf");
}
/* ysabeau-sc-600 - latin-ext */
@font-face {
 font-family: "Ysabeau SC";
 font-style: normal;
 font-weight: 600;
 src: url("YsabeauSC-VariableFont_wght.ttf");
}
* {
 margin: 0;
 padding: 0;
}
body {
 background-color: #333;
 overflow-x: hidden;
 font-family: "Ysabeau SC";
}
.container {
 width: 100%;
 height: 90%;
}
.trans {
 transition: all 1s ease;
 -moz-transition: all 1s ease;
 -ms-transition: all 1s ease;
 -o-transition: all 1s ease;
 -webkit-transition: all 1s ease;
}
.top {
 display: flex;
 width: 100vw;
 height: 50vh;
 margin-top: 0vh;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10vh;
}
.top ul {
 list-style: none;
 width: 100%;
 height: 90%;
 z-index: 1;
 box-sizing: border-box;
}
.top ul li {
 position: relative;
 float: left;
 width: 14.25%;
 height: 41%;
 opacity:100%;

 filter: saturate(0);

 overflow: hidden;
}
.top ul li:hover {
	 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 filter: saturate(110%);
 filter: blur(2px);
}

.top ul li img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 transform: translateY(-40%) translateX(-40%);
 width: 300%;
}
.lightbox {
 position: fixed;
 width: 100%;
 height: 100%;
 text-align: center;
 left: 0;
 background-color: rgba(0, 0, 0, 0.9);
 z-index: 999;
 opacity: 0;
 pointer-events: none;
}
.lightbox img {
 max-width: 90%;
 max-height: 80%;
 position: relative;
 top: 5%;
 /* Transition */
 transition: all 1s ease;
 -moz-transition: all 1s ease;
 -ms-transition: all 1s ease;
 -o-transition: all 1s ease;
 -webkit-transition: all 1s ease;
}
.lightbox:target {
 outline: none;
 opacity: 1;
 pointer-events: auto;
 transition: all 1.2s ease;
 -moz-transition: all 1.2s ease;
 -ms-transition: all 1.2s ease;
 -o-transition: all 1.2s ease;
 -webkit-transition: all 1.2s ease;
}
.lightbox:target img {
 top: 5%;
}
i {
 font-style: normal;
 position: absolute;
 bottom: 0;
 height: 18%;
 top: 95%;
 line-height: 1;
 left: 50%;
 transform: translate(-50%, -50%);
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 4em;
 text-align: center;
 letter-spacing: 3px;
}
h1 {
 display: inline;
 font-size: 2em;
 padding-bottom: 0.5em;
 text-align: center;
}
h4 {
 font-weight: 200;
}
a {
 text-decoration: none;
 color: white;
 top: 0;
}
.text {
 overflow: auto;
 font-family: "Ysabeau";
 font-weight: 500;
 border: 3px solid;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 padding: 2%;
 text-align: left;
 line-height: 1.2em;
 width: 50%;
 height: 70%;
}

@media (max-width: 800px), (orientation:portrait)
{
.top ul li {
width: 14.25%;
 height: 41%;
}
.lightbox {
 height: 100%;
}
.lightbox:target img {
 top: 10%;
}

.top ul li img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 transform: translateY(-10%) translateX(-30%);
 width: 400%;
}


i {
 height: 20%;
 width:90%;
}
h1{
	font-size: 1.5em;
	padding-bottom:0em;
}
.text{
	width:80%;
	height:80%;
}
footer{
	height:3em;
}
}