/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: 'BookkMyungjo-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Yeongdo-Rg';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-1@1.2/Yeongdo-Rg.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

*{
  cursor : url(https://1l71.neocities.org/Origami%201101.png) 1 1, auto;
}

body {
  background-color: black;
  color: black;
  font-family: arial;
  overflow: hidden;
}


#full {
  width: 1410px;
  height: 700px;
  position : relative;
}

#box {
  width: 290px;
  height: 400px;
  background-color:  #fafafa;  
  margin: auto;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 5;
  border: double 4px;
}

#logo {
  width: 200px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: -1%;
  right: 30%;
}

#category {
  width: 114px;
  height: 220px;
  margin: auto;
  position: absolute;
  top: 48%;
  right: 5%;
}

#ooo{
  font-size: 11px;
  color: white;
  width: 140px;
  height: 270px;
  background-color: #0f0f0f;
  border: double 4px;
  border-color: #fafafa;
  margin: auto;
  position: absolute;
  top: 28%;
  right: 46%;
  overflow: hidden;
}

#note{
  width: 1000px;
  height: 1000px; 
  position: absolute;
  top: 0%;
  left: 10%;
  transform: rotate(0deg);
  border-radius: 50%;
  background-color: white;
  z-index: 3;
  border: double 4px;
}

#musicnote{
  width: 307px;
  height: 317px; 
  position: absolute;
  top: 70%;
  left: 3%;
  transform: skew(12deg);
  background-color: yellow;
  z-index: 4;
}

a{
text-decoration-line: none;
}


.hr:link {
  color : black;
}
a:visited {
  color : black;
}
a:hover {
  color : white;
}
a:active {
  color : white;
}


#content1{
  width: 500px;
  height: 350px; 
  position: absolute;
  background-color:white;
  top: 10%;
  right: 30%;
  transform: rotate(0deg);
}

#content2{
  width: 300px;
  height: 400px; 
  position: absolute;
  top: 18%;
  right: 24%;
  transform: skew(-12deg);
}

#light {
  width: 600px;
  height: 400px;
  background-color: yellow;
  z-index: -7;
  transform: skew(-30deg);
  right: -10%;
  top: -3%;
  position: absolute;
}

#light2 {
  width: 600px;
  height: 400px;
  background-color: blue;
  z-index: -7;
  transform: skew(40deg);
  right: -15%;
  top: 60%;
  position: absolute;
}

.bb {
  position: absolute;
}

#jelly {
text-shadow :0 0 20px #96bfff;
}

#fish1 {
text-shadow :0 0 10px #ffffff;
}

#fish2 {
text-shadow :0 0 10px #ffffff;
}

#fish3 {
text-shadow :0 0 10px #ffffff;
}


#waves {
color : grey;
}

.song {
  color: #171717;
  font-weight: 900;
  font-size: 20px;
  font-family: BookkMyungjo-Bd;
  z-index: 6;
	/* ... */
}

.songmp3 {
  color: black;
  font-weight: 900;
  font-size: 30px;
  font-family: SUIT-Regular;
  z-index: 5;
	/* ... */
}

.nametag {
  color: #0f0f0f;
  font-weight: 900;
  font-size: 120px;
  font-family: Yeongdo-Rg;
}

.song:hover {
  color: #fafafa;
}

span:hover {
    /* inset | offset-x | offset-y | color */
    box-shadow: inset 0 -30px 0 blue;
    z-index: 5;
  }