{
  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"; 
}

.content1 {
  
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #ecf2f9 white;
}

#images {
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.1s;
  -webkit-transition-timing-function: ease;
}
#images:hover {
    transform: scale(1.1);
}


@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"); 
}



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;
}


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

.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;
}