@font-face {
  font-family:"Tox Typewriter";
  src:url("assets/Tox_Typewriter.ttf");
}

html {
  font-family:"Tox Typewriter";
  background:url("assets/bg.png");
  cursor:url("assets/cursor.png"), default;
}

body {
  color:#000000;
  text-align:center;
  font-family:"Tox Typewriter";
}

h1 {
  width:350px;
  height:120px;
  font-size:2em;
  margin-top:25px;
  padding-top:25px;
  margin-left:-60px;
  margin-bottom:-15px;
  font-family:"Tox Typewriter";
  background:url("assets/plaque.png");
  background-size:contain;
  background-repeat:no-repeat;
}

#left {
  margin-right:50px;
  margin-top:40px;
  vertical-align:top;
  display:inline-block;
}

#right {
  display:inline-block;
}

.paper {
  width:400px;
  height:auto;
  margin-left:-15px;
  transform:rotate(3deg);
}

.paper .top {
  width:400px;
  height:auto;
  margin-bottom:-20px;
}

.paper .middle {
  margin:0;
  width:400px;
  text-align:left;
  padding-top:15px;
  background:url("assets/paper.png");
  background-size: 100% 100%;
}

.paper p {
  margin:0;
  padding:8px 15px;
}

.paper .bottom {
  width:400px;
  height:auto;
}

.envelope {
  width:300px;
  height:auto;
  margin-top:30px;
  margin-right:40px;
}

.vinyl {
  width:150px;
  height:150px;
  top:-40px;
  right:-40px;
  position:fixed;
  animation-name:spin;
  animation-duration:1500ms;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.vinyl:hover {
  animation-play-state:paused;
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  
  to {
    transform:rotate(360deg);
  }
}

.linkWrap {
  top:15px;
  z-index:99;
  left:-90px;
  position:fixed;
  transition:.5s ease;
}

.second {
  top:130px;
}

.linkWrap:hover {
  left:-10px;
  transition:.3s ease;
  cursor:url("assets/pointer.png"), pointer;
}

.linkImage {
  height:100px;
}

.linkTextLayer {
  top:0;
  right:0;
  opacity:0;
  left:-5px;
  bottom:12px;
  display:flex;
  color:#000000;
  font-size:35px;
  font-weight:bold;
  position:absolute;
  visibility:hidden;
  align-items:center;
  justify-content:center;
  transform:rotate(-5deg);
  transition:opacity .2s, visibility .2s;
}

.linkWrap:hover .linkTextLayer {
  opacity:1;
  visibility:visible;
  cursor:url("assets/pointer.png"), pointer;
}

.linkText {
  font-family:"Tox Typewriter";
}

.imageContainer {
  margin:5px;
  position:relative;
  display:inline-block;
}

.link {
  transition:.2s;
}

.link a {
  color:#000000;
  cursor:url("assets/pointer.png"), pointer;
}

.link:hover {
  transition:.2s;
  transform:rotate(-2deg);
  cursor:url("assets/pointer.png"), pointer;
}

.image {
  padding:0;
  height:300px;
  background-color:#754b38;
  border:20px solid #754b38;
  border-image:url("assets/frame.png") 40 stretch;
}

.note {
  left:20px;
  right:20px;
  bottom:24px;
  text-align:center;
  position:absolute;
  display:inline-block;
  padding:22px 0 12px 0;
  background:url("assets/note.png");
  background-size:120%;
  background-position:top;
}

#s-m-t-tooltip{
  color:#000000;
  font-size:1em;
  padding:6px 8px;
  background:#DBC1A8;
}

::-webkit-scrollbar {
  color:#754b38;
}

::-webkit-scrollbar-track {
  background:#5b1511;
}

::-webkit-scrollbar-thumb {
  background:#754b38;
}

::-webkit-resizer {
  background:#754b38;
}

::selection {
  color:#754b38;
  background-color:rgba(0, 0, 0, 0);
}