body {
  overflow: hidden;
  font-family: 'OCR A Std', monospace,'Courier New', Courier, monospace;
  background-color: #f0eeee;
}

a {
  text-decoration: none;
}

.logo-container {
  height: 6.5vh;
}

.logo-container .logo {
  height: 6.5vh;
  margin: 0;
}

header {
  position: absolute;
  width: 15vh;
  top: 6vh;
}

header ul {
  list-style-type: none;
  font-size: 1.6vh;
  padding: 2vh;
  line-height: 3.5vh;
  margin-top: 0;
  margin-left: 0;
}

header ul a {
  color: #707070;
}

header ul a:hover {
  color: #4909ec;
}

.copyright {
  color: #939393;
  opacity: 50%;
  width: 13.9vh;
  position: absolute;
  bottom: 0vh;
  right: 0.5vh;
}

.copyright .copy {
  text-align: center;
  font-size: 1.2vh;
  line-height: 0;
}

.copyright .right {
  text-align: center;
  font-size: 1vh;
  line-height: 0;
}

@media (orientation: landscape) {
  .proj-container-1 {
    position: absolute;
    bottom: 0;
    left: 8vw;
  }
  .proj-container-1 .ode {
    height: 40vh;
    max-height: 38vw;
    max-width: 20vw;
  }
  .proj-container-1:hover {
    opacity: 50%;
  }
  .proj-container-2 {
    position: absolute;
    top: 7vh;
    left: 24.5vw;
  }
  .proj-container-2 .ppp {
    height: 63vh;
    max-height: 54vw;
    max-width: 71vw;
    min-width: 200px;
  }
  .proj-container-2:hover {
    opacity: 50%;
  }
  .proj-container-3 {
    position: absolute;
    bottom: 12.5vh;
    right: 4vw;
  }
  .proj-container-3 .mtliltbh {
    height: 18.5vh;
    max-height: 19vw;
    max-width: 70vw;
  }
  .proj-container-3:hover {
    opacity: 50%;
  }
}

@media (orientation: portrait) {
  .proj-container-1 {
    position: absolute;
    top: 12vh;
    left: 43.1%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  .proj-container-1 .ode {
    height: 25vh;
    max-height: 70vw;
    max-width: 36vw;
  }
  .proj-container-1:hover {
    opacity: 50%;
  }
  .proj-container-2 {
    position: absolute;
    bottom: 3vh;
    left: 54%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  .proj-container-2 .ppp {
    height: 40vh;
    max-height: 70vw;
    max-width: 92vw;
    min-width: 200px;
  }
  .proj-container-2:hover {
    opacity: 50%;
  }
  .proj-container-3 {
    position: absolute;
    top: 49%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .proj-container-3 .mtliltbh {
    height: 20vh;
    max-height: 9.5vh;
    max-width: 80vw;
  }
  .proj-container-3:hover {
    opacity: 50%;
  }
}
/*# sourceMappingURL=work.css.map */