* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  cursor: url(/pixels/VIRUXXX-chibi-cursor.png), auto;
}

a {
  cursor: url(/pixels/VIRUXXX-chibi-select.png), auto;
  color: white;
}

#wrapper {
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  width: 82%;
  margin: auto;
  z-index: 2;
}

.base {
  background-image: url(/backgrounds/yellow-cushion.png);
  width: 100%;
  position: relative;
  padding: 10px 35px 56px;
}

.plate {
  border: 1px solid #f1ead1;
  background-color: #e4dbba;
  background-image: radial-gradient(#f4edd3, #f1ead1, #d7cdab);
  padding: 8px;
  border-radius: 10px;
  filter: drop-shadow(0px 5px 3px #00000030);
  margin-bottom: 25px;
}

#header {
  border-image: url(/borders/jewel-border.png) 85 repeat;
  border-width: 68px;
  border-color: transparent;
  border-style: solid;
  position: relative;
  z-index: 100;
  background-image: url(/backgrounds/viruxxx-sanrio.png);
  background-repeat: no-repeat;
  background-size: 970px;
  background-position: center;
  height: 310px;
}

.buttonhome {
  padding: 7px;
  text-align: center;
  background-image: linear-gradient(to bottom right, #000000, #4e4e4e);
  background-size: cover;
  background-position: center;
  margin-top: 8px;
  justify-items: center;
  display: flex;
  justify-content: center;
}

.message-tag {
  text-align: center;
  color: white;
  background-image: linear-gradient(to bottom right, #000000, #4e4e4e);
  padding: 12px 0px;
  width: 20%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message {
  padding: 15px 0px;
  width: 80%;
  background-color: white;
}

.characternav {
  background-color: transparent;
  background-image: radial-gradient(farthest-corner at 50% 0px, #ffffffb8 0%, #ffffff00 75%, transparent 100%);
  border-top: 1px solid white;
  padding: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
  image-rendering: -webkit-optimize-contrast;
  margin-bottom: 10px;
}


#leftcurt {
  background: url(/borders/left-black-yellow-curtain.png) left top no-repeat;
  background-size: cover;
  width: 60px;
  height: 139px;
  overflow: hidden;
  display: block;
  position: absolute;
  z-index: 999;
  pointer-events: none;
}

#rightcurt {
  background: url(/borders/right-black-yellow-curtain.png) left top no-repeat;
  background-size: cover;
  width: 60px;
  height: 139px;
  overflow: hidden;
  display: block;
  position: absolute;
  right: 0;
  z-index: 999;
  margin-right: 34px;
}

.info-tag {
  background-image: linear-gradient(to bottom right, #000000, #4e4e4e);
  background-color: black;
  color: white;
  border-radius: 7px;
  padding: 5px;
  margin-bottom: 10px;
  width: 100%;
}

.column {
  float: left;
  background-color: #e4dbba;
  background-image: radial-gradient(#f4edd3, #f1ead1, #d7cdab);
  border: 1px solid #f1ead1;
  border-radius: 10px;
  padding: 7px;
  filter: drop-shadow(0px 5px 3px #00000030);
  display: flex;
  flex-direction: column;
}

.column.one {
  width: 46.8%;
}

.column.two {
  width: 25%;
  margin: 0px 15px;
}

.column.three {
  width: 25%;
}

.column.four {
  width: 65%;
  margin-right: 15px;
}

.column.five {
  width: 39%;
}

.featurebox {
  cursor: url(/pixels/VIRUXXX-chibi-select.png), auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 302px;
  image-rendering: -webkit-optimize-contrast;
}

.topborder {
  text-align: center;
  color: white;
  overflow: hidden;
  background-color: black;
  height: 33px;
  filter: drop-shadow(0px 2px 0px #00000050);
  position: relative;
  z-index: 50;
}

.footer {
  filter: drop-shadow(0px -2px 0px #00000050);
  color: white;
  background-color: black;
  padding: 10px;
  text-align: center;
}

/*IFRAME*/
iframe {
  border: unset;
} 

iframe.box {
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: hidden;
  overflow-x: hidden;
  width: 100%;
  height: 302px;
  border: unset;
}

iframe.sitebuttons {
  width: 100%;
  border: unset;
}

/*TOP-LINE*/
.top-line-LT {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.top-line-sides-LT {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-line-center-LT {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-line-M {
  display: none;
}

#ad-nest {
  width: 382px;
  height: 62px;
  background-color: #e4dbba;
  background-image: radial-gradient(#f4edd3, #f1ead1, #d7cdab);
  padding: 10px;
  border: 1px solid #f1ead1;
  border-radius: 10px;
  margin-right: 50px;
  margin-left: 47px;
  filter: drop-shadow(0px 5px 3px #00000030);
}

#input {
  width: 223px;
  font-size: 15px;
  background-repeat: no-repeat;
  background-position: right;
  background-size: 20px;
  background-position-x: 190px;
  background-position-y: 12px;
  background-image: url(/pixels/magnifier-glass.png);
  background-color: white;
  box-shadow: 0px 4px 5px 5px #00000030 inset;
  padding-left: 10px;
  border: 1px solid #d8ceac;
  border-radius: 100px;
  height: 40px;
  filter: drop-shadow(0px 5px 3px #00000030);
}

input.laptop {
  width: 175px;
  background: transparent;
  border: unset;
  margin-top: 15px;
  font-family: Times New Roman;
}

input.laptop:focus {
  border: 0px;
  outline: 0px;
}

/*NAV*/
.topnav {
  border-radius: 5px;
  overflow: hidden;
  background-image: url(/backgrounds/nav-bar.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 40px;
  margin-bottom: 10px;
  background-color: black;
  display: flex;
  filter: drop-shadow(0px 5px 3px #00000030);
}

.topnav a {
  cursor: url(/pixels/VIRUXXX-chibi-select.png), auto;
  color: white;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  width: 16%;
}

.topnav a:hover {
  box-shadow: 0px 4px 5px 5px #00000030 inset;
  border-radius: 5px;
  background-image: url(/backgrounds/nav-hover.png);
  height: 33px;
  background-size: cover;
  background-repeat: no-repeat;
  color: black;
}

/*BORDERS*/
#lace {
  position: relative;
  border-image: url(/borders/black-pixel-ruffles.png) 10 repeat;
  image-rendering: pixelated;
  border-left-width: 25px;
  border-left-color: black;
  border-left-style: solid;
  border-right-width: 25px;
  border-right-color: black;
  border-right-style: solid;
}

/*MARQUEE*/
.marquee {
  height: 25px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee div {
  width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: marquee 5s linear infinite;
  display: flex;
  align-items: center;
}

.marquee span {
  font-size: 15px;
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

/*FONTS*/
@font-face {
  font-family: spirit;
  src: url(/fonts/Spirit.ttf);
}

h3 {
  font-family: spirit;
  font-weight: bold;
  font-size: 15px;
  margin: 5px;
  background: url(/backgrounds/white-glitter.gif) 0px 0px / 40px;
  image-rendering: pixelated;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  filter: drop-shadow(0px 0px 0px black) drop-shadow(0px -1px 0px black) drop-shadow(1px 0px 0px black) drop-shadow(-1px 1px 0px black) drop-shadow(1px 0px 0px black) drop-shadow(1px 1px 0px #ffffff9d);
}

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

.topborder p {
  font-family: emoji;
  font-size: 15px;
  margin: 5px;
}

/*OTHERS*/
flex {
  display: flex;
}

flex.LT {
  display: flex;
}

flex.M {
  display: none;
}

#statuscafe {
  padding: .5em;
  color: white;
  background-image: linear-gradient(to bottom right, #000000, #4e4e4e);
  position: fixed;
  margin: 5px;
  z-index: 100000;
  width: 20%;
  filter: drop-shadow(2px 4px 6px #00000050);
  bottom: 0;
}

#statuscafe a {
  color: white;
}

#statuscafe-username {
  margin-bottom: .5em;
}

#statuscafe-content {
  margin: 0 1em 0.5em 1em;
}

/*IMG*/
img.namelogo {
  width: 223px;
  height: 33px;
}

img.heart1 {
  position: absolute;
  left: -108px;
  top: -108px;
  pointer-events: none;
}

img.heart2 {
  position: absolute;
  right: -108px;
  bottom: -108px;
  pointer-events: none;
}

.buttonhome img {
  margin: 0px 2px;
}

img.character {
  image-rendering: crisp-edges;
  transition: 0.3s;
  filter: drop-shadow(2px 4px 6px #00000034) saturate(0);
}

img.character:hover {
  filter: drop-shadow(2px 4px 6px #00000034);
}

.column.three img {
  width: 100%;
  cursor: url(/pixels/VIRUXXX-chibi-select.png), auto;
  image-rendering: -webkit-optimize-contrast;
}

/*MOBILE*/
@media screen and (max-width: 600px) {
  #wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .base {
    padding: 15px;
  }
}

@media screen and (max-width: 600px) {
  #header {
    background-image: url(/backgrounds/viruxxx-sanrio-mobile.png);
    background-size: 381px;
    height: 148px;
    border-width: 50px;
    background-position: center;
  }
}

@media screen and (max-width: 600px) {
  .message-tag {
    width: 40%;
  }
}

@media screen and (max-width: 600px) {
  .column.one {
    width: 100%;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 600px) {
  .column.two, .column.three {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column.two {
    margin: 0px;
    margin-right: 5px;
  }
}

@media screen and (max-width: 600px) {
  .column.three {
    margin-left: 5px;
  }
}

@media screen and (max-width: 600px) {
  .column.four {
    width: 57%;
  }
}

@media screen and (max-width: 600px) {
  .featurebox {
    height: 237px;
  }
}

/*MOBILE OTHERS*/
@media screen and (max-width: 600px) {
  iframe.box, .column.five iframe {
    height: 155px;
  }
}

@media screen and (max-width: 600px) {
  flex.LT {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  flex.M {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 600px) {
  #statuscafe {
    font-size: 10px;
    width: 40%;
    bottom: unset;
  }
}

/*MOBILE TOP-LINE*/
@media screen and (max-width: 600px) {
  .top-line-LT {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .top-line-M {
    width: 100%;
    margin: auto;
    display: grid;
    justify-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  .top-line-sides-M {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 600px) {
  .top-line-center-M {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 600px) {
  #input {
    background-position-x: 150px;
  }
}

@media screen and (max-width: 600px) {
  input.laptop {
    width: 135px;
  }
}

@media screen and (max-width: 600px) {
  #ad-nest {
    width: auto;
    height: 59px;
    margin: 0px;
  }
}

@media screen and (max-width: 600px) {
  #rightcurt {
    margin-right: 14px;
  }
}

/*MOBILE NAV*/
@media screen and (max-width: 600px) {
  .topnav {
    height: 25px;
  }
}

@media screen and (max-width: 600px) {
  .topnav a {
    padding: 3px;
    font-size: 10px;
  }
}

@media screen and (max-width: 600px) {
  .topnav a:hover {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

/*MOBILE BORDERS*/
@media screen and (max-width: 600px) {
  #lace {
    border-width: 0px;
  }
}

/*MOBILE IMG*/
@media screen and (max-width: 600px) {
  img.namelogo {
    width: 147px;
    height: unset;
  }
}

@media screen and (max-width: 600px) {
  img.heart1 {
    width: 60px;
    left: -78px;
    top: -78px;
  }
}

@media screen and (max-width: 600px) {
  img.heart2 {
    width: 60px;
    right: -78px;
    bottom: -78px;
  }
}

/*MOBILE FONTS*/
@media screen and (max-width: 600px) {
  .marquee span {
    font-size: 11px;
  }
}

@media screen and (max-width: 600px) {
  h3 {
    font-size: 12px;
  }
}