/*----- variables -----*/

:root {
    --text: #3b3b3b;
    --background: #f8f8f8;
    --pink-dark:rgb(250, 159, 250);
    --purple-dark:rgb(175, 136, 255);
    --green-dark:rgb(135, 216, 175);
    --blue-dark:rgb(94, 175, 254);
  
    /*----- dark mode -----*/
    --text-dark: #f0f0f0;
    --background-dark: #0c0c0c;
    --pink-light:rgb(254, 175, 255);
    --purple-light:rgb(174, 175, 255);
    --green-light:rgb(136, 255, 175);
    --blue-light:rgb(96, 215, 255);
  }

/*----- fonts -----*/

@font-face {
    font-family: 'seed';
    src: url('/fonts/SeeDComputer.woff2') format('woff2'),
        url('/fonts/SeeDComputer.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
body{
    margin: auto;
    padding: auto;
    font-family: seed;
    font-size: 2em;
    color: var(--text);
    background-color: var(--background);
}
header{
    padding: 1rem;
}
a {
    text-decoration: none;
    color: var(--purple-dark);
  }

a:hover {
    color: var(--pink-dark);
  }

.sandbox {
    width: 1763px;
    height: 1286px;
    position: relative;
    margin: 0 auto;
}

.doll {
    position: absolute;
    z-index: 3;
}

.shelf {
    left: 0px;
    top: 0px;
    z-index: 1;
}

.desk {
    left: 587px;
    top: 365px;
    z-index: 2;
}

.computer {
    left: 640px;
    top: 151px;
    display: inline-block;
    width: 450px;
    height: 270px;
    background: url("images/computerscreensaver.png");
}

.computer:hover {
    background: url("images/computerlogin.png");
}

.psx {
    left: 42px;
    top: 59px;
}

.ps2 {
    left: 303px;
    top: 110px;
}

.wii{
    left: 73px;
    top: 272px;
}

.ds {
    left: 303px;
    top: 339px;
}

.ps4 {
    left: 153px;
    top: 590px;
}

.switch {
    left: 69px;
    top: 814px;
}

.n3ds {
    left: 323px;
    top: 761px;
}

.chair {
    left: 993px;
    top: 412px;
}

.wii:hover, .switch:hover {
    transform: rotate(-10deg);
}

.psx:hover, .ps2:hover, .ds:hover {
    transform: rotate(10deg);
}

.ps4:hover, .n3ds:hover {
    transform: rotate(5deg);
}

.chair:hover {
    transform: perspective(500px) translate3d(-25px, -25px, -25px);
}

@media (prefers-color-scheme: dark) {
  body{
    color: var(--text-dark);
    background-color: var(--background-dark);
  }

  a {
    color: var(--purple-light);
  }
  
  a:hover {
    color: var(--pink-light);
  }
}