@font-face {
    font-family: "karma";
    src: url("../fonts/karma/Karma\ Future.woff") format("woff"),
    url("../fonts/karma/Karma\ Future.woff2") format("woff2");
}

@font-face {
    font-family: "hitchcut";
    src: url("../fonts/Hitchcut-Regular.woff") format("woff"),
    url("../fonts/Hitchcut-Regular.woff2") format("woff2");
}

body {
    background-color: rgb(61, 29, 255);
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100vw;
    height: 100vh;
}

.popular {
    width: 19vw;
    height: 53vh;
    position: absolute;
    left: 100px;
    top: 108px;
    background-image: url(../images/window5.png);
    background-size: cover;
    z-index: 1;
}
  
.strawberry {
    width: 50vw;
    height: 87vh;
    position: absolute;
    left: 369px;
    top: 58px;
}

.fakeimg {
  position: relative;
  left: 80px;
  top: 40px;
  z-index: 2;

}

.media {
    width: 30vw;
    height: 50vh;
    position: absolute;
    left: 1000px;
    top: 300px;
    z-index: 1;
}

.plaat {
    font-family: "karma";
    font-size: 30px;
    color: rgb(255, 39, 147);
    position: absolute;
    left: 1150px;
    top: 590px;
    z-index: 2;
}

.cd {
    width: 10vw;
    height: 20vh;
  position: relative;
  left: 150px;
  top: 490px;
  z-index: 2;
}

.goldfish {
    width: 10vw;
    height: 20vh;
  position: relative;
  left: 1050px;
  top: 40px;
  z-index: 3;
}

.mouse {
    width: 3vw;
    height: 4vh;
  position: absolute;
  left: 1350px;
  top: 610px;
  z-index: 3;
}

.vinyl {
    width: 13vw;
    height: 26vh;
  position: relative;
  left: 775px;
  top: 120px;
  z-index: 2;
}

.jam {
    font-family: "hitchcut";
    font-size: 125px;
    position: absolute;
    left: 620px;
    top: -130px;
    z-index: 2;
    color: #d31f17;
    -webkit-text-stroke: 2px white;
}


@media (max-width: 850px) {
body {
    background-color: rgb(61, 29, 255);
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100vw;
    height: 100vh;
}

.popular {
    width: 51vw;
    height: 35vh;
    position: absolute;
    left: 20px;
    top: 266px;
    background-image: url(../images/window5.png);
    background-size: cover;
    z-index: 1;
}
  
.strawberry {
    width: 79vw;
    height: 31vh;
    position: absolute;
    left: 69px;
    top: 27px;
}

.fakeimg {
  position: relative;
  left: 80px;
  top: 40px;
  z-index: 2;

}

.media {
    width: 79vw;
    height: 36vh;
    position: absolute;
    left: 100px;
    top: 505px;
    z-index: 1;
}

.plaat {
    font-family: "karma";
    font-size: 30px;
    color: rgb(255, 39, 147);
    position: absolute;
    left: 56px;
    top: 778px;
    z-index: 2;
}

.cd {
    width: 21vw;
    height: 11vh;
  position: relative;
  left: 21px;
  top: 551px;
  z-index: 2;
}

.goldfish {
    width: 39vw;
    height: 20vh;
  position: relative;
  left: 119px;
  top: 225px;
  z-index: 3;
}

.mouse {
    width: 9vw;
    height: 4vh;
  position: absolute;
  left: 278px;
  top: 803px;
  z-index: 3;
}

.vinyl {
    width: 40vw;
    height: 21vh;
  position: relative;
  left: 227px;
  top: 169px;
  z-index: 2;
}

.jam {
    font-family: "hitchcut";
    font-size: 125px;
    position: absolute;
    left: 20px;
    top: -130px;
    z-index: 2;
    color: #d31f17;
    -webkit-text-stroke: 2px white;
}
}