body{
  background-color: rgba(200,200,200,255);
  margin:0;
  min-width:1500px;
}

@font-face {
    font-family: myFirstFont;
    src: url("/src/PAPYRUS.TTF");
}

.row{
  width:100%;
  height:400px;
  position: relative;
  display: flex;
  overflow: hidden;
  background-color: rgba(200,200,200,255);
}
.row:hover .brown{
  color: brown;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .cornflowerblue{
  color: cornflowerblue;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .chocolate{
  color: chocolate;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .darkgoldenrod{
  color: darkgoldenrod;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .cadetblue{
  color: cadetblue;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .blueviolet{
  color: blueviolet;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .crimson{
  color: crimson;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .darkkhaki{
  color: darkkhaki;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .darkolivegreen{
  color: darkolivegreen;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .deepskyblue{
  color: deepskyblue;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .lightgreen{
  color: lightgreen;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}
.row:hover .darkslateblue{
  color: darkslateblue;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}



p{
  font-weight: bold;
  font-family: myFirstFont, 'Trebuchet MS', sans-serif;
  font-size:110px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:100;
  color:dimgrey;
  pointer-events:none;
}

.image-left{
  height:100%;
  position: absolute;
  left: 0;
  transition: 0.75s ease;
  object-position: top;
}

.image-right{
  height:100%;
  position: absolute;
  right: 0;
  transition: 0.75s ease;
  object-position: top;
}

.a-left{
  width:50%;
  height:100%;
}
.a-left:hover img{
   transform: scale(1.3);
}
.a-left:hover div{
   transform: scale(1.3);
}
.a-right{
  width:50%;
  height:100%;
}
.a-right:hover img{
   transform: scale(1.3);
}
.a-right:hover div{
   transform: scale(1.3);
}

.fade-l {
    height: 100%;
    width: 600px;
    left:0;
    position: absolute;
    transition: 0.75s ease;
    background-image: linear-gradient(to right, rgba(200,200,200,0) , rgba(200,200,200,255) 85%);
}

.fade-r {
    height: 100%;
    width: 600px;
    right:0;
    position: absolute;
    transition: 0.75s ease;
    background-image: linear-gradient(to left, rgba(200,200,200,0) , rgba(200,200,200,255) 85%);
}

.lang_div:hover{
  cursor: pointer;
}
.lang_div:hover p{
  color: white;
  text-shadow: -2px 2px 0 #000,
          2px 2px 0 #000,
         2px -2px 0 #000,
        -2px -2px 0 #000;
}

.lang_img_hover{
  display: none;
}

.lang_img_neutral{
  display: block;
}

.lang_div:hover .lang_img_hover{
  display: block;
}

.lang_div:hover .lang_img_neutral{
  display: none;
}

.editor{
  position:absolute;
  top:10px;
  right:10px;
  text-decoration:None;
  font-weight: bold;
  font-family: myFirstFont, 'Trebuchet MS', sans-serif;
  color:dimgrey;
}

.editor:hover{
  color: white;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}

.index{
  position:absolute;
  top:10px;
  left:10px;
  text-decoration:None;
  font-weight: bold;
  font-family: myFirstFont, 'Trebuchet MS', sans-serif;
  color:dimgrey;
}

.index:hover{
  color: white;
  text-shadow: -2px 2px 0 #000,
				  2px 2px 0 #000,
				 2px -2px 0 #000,
				-2px -2px 0 #000;
}