.amatic-sc-regular {
  font-family: "AmaticSC-Bold", sans-serif;
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: AmaticSC-Bold;
  src: url(fonts/AmaticSC-Bold.ttf);
}

@font-face {
  font-family: DEM-MOMono-700;
  src: url(fonts/DEM-MOMono-700.otf);
}

html {
  cursor: url(paw.png), auto;
  height: 100%;
}

a {
  text-decoration: none;
}

body {
  
  background-color: rgb(181, 118, 233);
  background-size: 150px 150px;
  background-attachment: fixed;
  mask-repeat: repeat;
  height:100%;
}

header {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 16px;
  display: flex;
}


.center {
  width: 100%;
  padding:4px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  flex-wrap: wrap;
  
}

.subtitle{

  image-rendering: pixelated;
  font-size: larger;
}

.note {
  position: absolute;
  border: 25px solid transparent;
  border-image: url(images/noteborder.png) repeat;
  border-image-slice: 20%;
  display:flex;
  min-height: 100px;
  min-width: 100px;
  width:fit-content;
  z-index: -10;
  image-rendering: pixelated;
}


.noteinner {
  background-color: #e3e3e3;
  min-width: 100%;
}

@media (max-width: 960px) {

}

@media (max-width: 1300px) {

}

@media (max-width: 960px) {
}


#psp{
  rotate: -5deg;
  width:50vw; 
  margin-top:5vw;
  margin-left: 10vw;
  left:10vw;
}

.hover:hover{
  scale:110%;
}

#currSave{
  position: absolute;
  right:7.66vw;
  bottom:17.6vw;
  width: 30.68vw;
  height: 17.2vw;
}

.arrow{
  z-index: 10;
  position: absolute;
  height:3vw;
  width:3vw;
}

#headphones{
  position: relative;
  left:17.7vw;
  bottom:8.5vw;
  width: 50vw;
  font-size: xxx-large;
}

#stickers{
  position: relative;
  left:17.7vw;
}

.window {
  border: 2px solid  rgb(79, 20, 255);
  background:  rgba(247, 179, 255, 0.92);
  padding: 4px;
  box-shadow: -4px 4px rgba(80, 20, 255, 0.2);
  padding-bottom: 5px;
  margin-bottom: 20px;
  overflow: hidden;
  max-block-size: 40%;
}

.quitbox {
  font-size: xx-large;
  text-align: center;
  background:  rgba(0, 255, 123, 0.5);
  padding: 4px;
  box-shadow: -4px 4px rgba(80, 20, 255, 0.2);
  padding-bottom: 5px;
  margin-bottom: 10px;
  margin-left: 10px;
  width:10%;
  overflow: hidden;
  position: fixed;
  left:0%;
  bottom:5%;
}

.quitbox:hover{scale: 110%;}

.content {
  font-family: "DEM-MOMono-700","courier", sans-serif;
  font-style: bold;
  font-size: medium;
  color: rgb(225, 232, 206);
  padding: 8px;
  text-justify: inter-word;
  line-height: 110%;  
}

.gameinfo {
  display: block;
  font-family: "DEM-MOMono-700","courier", sans-serif;
  font-style: bold;
  font-size: medium;
  color: rgb(240, 35, 220);
  padding: 8px;
  line-height: 110%;
  text-align: right;
  float: right; 
}



footer {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  bottom: 0;
  width: calc(100%);
  height: 5%;
}

.bottombar {
  background:  rgba(255, 255, 255, 0);
  padding: 4px;
  overflow: hidden;
  width:100%;
  height:100%;
}



#exit{
  border: 2px solid  rgb(0, 243, 113);
  text-align: center; display: block; margin-left: auto; margin-right: auto;
  margin-bottom: 4px;
  width:80%
}

#saveicon {
  border: 2px solid  rgb(0, 243, 113);
  height:200px;
  text-align: center; display: block; margin-left: auto; margin-right: auto;
  animation-name: savespin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

@keyframes savespin {
  0% {translate: 0px 0px;}
  50% {translate: 0px 5px;}
  100% {translate: 0px 0px;};
}

#health{
  height:20px;
}

#skull{
  height:50px;
  padding: -10px;
}

#game-ss {
  width:100%;
}

#spidey {
  float:right;
  height: 50px;
  border: solid 2px  rgb(243, 0, 182)
}

#statuscafe {
  border: none;
  padding:4px;
}

#statuscafe-username {
  padding: 8px;
}

#statuscafe-content {
  padding: 8px;
}

#blinkies {
  height: 31px;
  padding: 4px;
}