@font-face {
  font-family: 'title1';
  src: url("https://facethruthedoor.neocities.org/medialog/title1.otf");
}

@font-face {
  font-family: 'title2';
  src: url("https://facethruthedoor.neocities.org/medialog/title2.otf");
}

body {
    background-image: url("https://facethruthedoor.neocities.org/medialog/bg.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: repeat;
    margin: 0px;
    padding: 0px;
    background-color: #755154;
  }

#left {
 position: absolute;
 left: 8vw;
 top: 3vw;
}

#left h1 {
 font-family: 'title1'; 
 font-size: 5vw;
 line-height: 0.3125vw;
}

#recents {
 display: table-cell;
 width: 50vw;
 height: 33vw;
 background: repeating-linear-gradient(180deg, rgba(0, 42, 54, 0.9) 0%, rgba(177, 213, 220, 0.7) 100%);
 border: 0.2604vw outset white;
 border-radius: 0vw 0vw 1.5625vw 0vw;
}

#recents h2 {
  font-family: 'title2';
  line-height: 0.2083vw;
  color: white;
  font-size: 2vw;
}

#recents hr {
  color: white;
}

#recents li {
  color: white;
  font-family: 'Arial';
}

#right {
  display: table-cell;
  vertical-align: middle;
  align-items: center;
  width: 9.1146vw;
  text-decoration: none;
  line-height: 0.2083vw;
  position: absolute;
  top: 6.5vw;
  right: 25vw;
}

#right .button {
  display: inline-block;
  background: linear-gradient(180deg, rgba(177, 213, 220, 0.9) 0%, rgba(49, 128, 114, 0.9) 20%, rgba(0, 42, 54, 0.9) 100%);
  font-size: 2.5vw;
  color: white;
  font-family: 'title2';
  font-weight: bold;
  width: 20vw;
  height: 0.5208vw;
  padding: 1.3021vw;
  text-align: center;
  margin: 1.0417vw;
  line-height: 0%;
  border: 0.2604vw outset white;
  border-radius: 0.7813vw 0vw 0vw 0vw;
  padding-top: 1.5625vw;
  text-decoration: none;
}

#right .button:hover {
  background: linear-gradient(180deg, rgba(225, 197, 211, 0.9) 0%, rgba(70, 42, 81, 0.9) 20%, rgba(57, 15, 41, 0.9) 100%);
}