:root {
     --blue: #222e8a;
     --orange: #fce390;
     --dk-orange: #faa937;
     --pink: #f54969;
     --green: #3d9c3f;
     --dark-green: #1a201a;
     --purple: #b216d9;
}

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

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

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

html, body {
    font-family: basiic;
    font-size:15px;
    color: var(--blue);
    padding:0px;
    margin:0px;
    background-image:url('imgs/bg2.jpg');
    background-size: contain;
    background-position: top;
    background-attachment: fixed;
}

.sidimg {
  background-image:url("imgs/gamers.png");
  background-size: 400px;
  background-repeat:no-repeat;
  background-position: bottom 0px right 0px;
  height:auto;
}

.sidimg3 {
  background-image:url("imgs/bike.png");
  background-size: 400px;
  background-repeat:no-repeat;
  background-position: bottom 0px left 0px;
  height:auto;
}

.sidimg2 {
  padding-top:0px;
  margin-top:0px;
  background-image:url("imgs/hanging-him.png");
  background-size: 200px;
  background-repeat:no-repeat;
  background-position: top 0px left 30px;
  height:auto;
  background-attachment: fixed;
}

.wrapper {
    display:flex;
    flex-wrap:wrap;
    width:1170px;
    height:auto;
    margin:auto;
    margin-top:10px;
}

#border {
  padding: 10px;
  border: 1px dashed var(--blue);
  background:white;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
}

#fridge {
  height:400px;
  width:400px;
  overflow-y: scroll;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#nav {
  height:400px;
  width:220px;
  margin-right:10px;
  overflow-y: scroll;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#intro {
  height:400px;
  width:460px;
  overflow-y: scroll;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#side {
  height:550px;
  width:555px;
  overflow-y: scroll;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#ballad {
  height:auto;
  width:550px;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#buu {
  height:1400px;
  width:545px;
  overflow-y: scroll;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#goku {
  height:550px;
  width:548px;
  overflow-y: scroll;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#vegeta {
  height:550px;
  width:548px;
  overflow-y: scroll;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#art {
  height:auto;
  width:900px;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

#wedding {
  height:auto;
  width:900px;
  border: 3px outset var(--pink);
  background-image:url('imgs/move_heart.gif');
  background-repeat: repeat;
}

.text {
  margin:10px;
}

.chunks {
  margin:10px;
  display:flex;
  flex-wrap:wrap;
}

.lyrics {
  height:300px;
  overflow-y: scroll;
}

img.list:hover {
  transform:scale(1.2);
  border: 1px solid var(--blue);
}

.fridge {
  border: 1px solid var(--blue);
  width: 350px;
}

.other {
  border: 1px solid var(--blue);
}

h2 {
  padding: 10px;
  width:200px;
  background: var(--pink);
  color:white;
  border: 3px outset var(--pink);
}

h1 {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 300px;
  padding: 10px;
  border: 1px dashed var(--blue);
  background:white;
}

.jp {
  font-family: 'cherrybomb';
  font-size:11px;
}