{
  box-sizing: border-box;
}

body {
  background-image: url(https://open-window.neocities.org/I_G/bands.png);
  margin: 0;
  cursor: url(https://open-window.neocities.org/I_G/normhand.png), auto;
  font-family: "rainyhearts"; 
}

.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  border: 1px solid pink;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #ecf2f9 white;
  border: 1px dotted grey;
  background-image: url(https://open-window.neocities.org/I_G/wood.png);
}



@font-face {
    font-family: "rainyhearts"; 
    src: url("https://open-window.neocities.org/I_G/rainyhearts.woff"); 
}


@font-face {
    font-family: "Chalkiez-Regular"; 
    src: url("https://open-window.neocities.org/I_G/Chalkiez-Regular.woff"); 
}

h2 {
  font-family: 'Chalkiez-Regular';
  color: white;
}

.updates {
  font-family: 'Chalkiez-Regular';
  color: white;
}

a {
  text-decoration: none;
  color: black;
}

.link {
  position: relative;
  transition: clip-path 275ms ease;
  &:hover span::before, &:focus span::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  span {
    position: relative;
    display: inline-block;
    color: 	#005c99;
    &::before {
      position: absolute;
      content: attr(data-content);
      color: #e67300;
      text-decoration: underline;
      text-decoration-color: $darkblue;
      clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
      transition: clip-path 275ms ease;
    }
  }
}

span.dashed::before {
  text-decoration-style: dashed;
}

a:hover {
  cursor: url(https://open-window.neocities.org/I_G/linkhand.png), auto;
}

.content {
  padding:20px;
  padding-left:110px;
}

#angel
{
   margin-top: 0px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: -1200px;
}

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 20px;
grid-row-gap: 5px;
  margin-left: 150px;
   margin-right: 150px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }


mark { 
  background-color: #ecf2f9;
  color: black;
}





.contentbox {
  padding: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

.div22 { grid-area: 1 / 1 / 2 / 2; }
.div33 { grid-area: 1 / 2 / 2 / 3; }




.aquarium {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div101 { grid-area: 1 / 1 / 2 / 2; }
.div202 { grid-area: 1 / 2 / 2 / 3; }
.div303 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }
.div7 { grid-area: 3 / 1 / 4 / 2; }
.div8 { grid-area: 3 / 2 / 4 / 3; }
.div9 { grid-area: 3 / 3 / 4 / 4; }

 #pagedoll {
  position: absolute;
  bottom: 0px;
  left:630px;
}