body{
  background-color: Skyblue;
  font-family: Pretendard-Regular;
  width: 1440px;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

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


#intro{
  background-color: white;
  width: 310px;
  z-index: 10;
  position: fixed; 
  left: 20px;
  top: 20px;
  
  padding: 10px 25px 25px 25px;
  border-radius: 20px;
  
  word-break: keep-all
}

#leg1{
  width: 90px;
  height: 800px;
  position: absolute;
  background: #CD853F;
background: linear-gradient(90deg, rgba(205, 133, 63, 1) 80%, rgba(156, 99, 0, 1) 80%);
  
  left: 570px;
  top: 0px;
}

#leg2{
  width: 90px;
  height: 800px;
  position: absolute;
  background: #CD853F;
background: linear-gradient(90deg, rgba(205, 133, 63, 1) 80%, rgba(156, 99, 0, 1) 80%);
  
  left: 760px;
  top: 0px;
}

#sock1{
  width: 90px;
  height: 800px;
  position: absolute;
  background: #FFFAFA;
background: linear-gradient(90deg, rgba(255, 250, 250, 1) 80%, rgba(225, 236, 237, 1) 80%);
  
  left: 570px;
  top: 120px;
}

#sock2{
  width: 90px;
  height: 800px;
  position: absolute;
  background: #FFFAFA;
background: linear-gradient(90deg, rgba(255, 250, 250, 1) 80%, rgba(225, 236, 237, 1) 80%);
  
  left: 760px;
  top: 120px;
}

#shoe{
  width: 340px;
  position: absolute;
  left: 520px;
  top: 200px;
}

#ring{
  width: 150px;
  height: 60px;
  border: 3px;
  border-radius: 50% 50% 0px 0px;
  background: #FA8072;
background: linear-gradient(90deg, rgba(250, 128, 114, 1) 82.5%, rgba(212, 97, 85, 1) 82.5%);
  float: right;
  
}

#ring1{
  width: 150px;
  height: 60px;
  border: 3px;
  border-radius: 50% 50% 0px 0px;
  background: #FA8072;
background: linear-gradient(90deg, rgba(250, 128, 114, 1) 82.5%, rgba(212, 97, 85, 1) 82.5%);
  
}

#bucket{
  width: 800px;
  height: 1900px; 
  background: #969696;
  background: linear-gradient(90deg, rgba(150, 150, 150, 1) 0%, rgba(230, 230, 230, 1) 30%, rgba(196, 196, 196, 1) 60%, rgba(46, 46, 46, 1) 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  position: absolute;
  left: 290px;
  top: 260px;
  
  word-break: keep-all;
  text-align: center;
  
  text-shadow:1px 1px white, -1px -1px #666;
  color:#ccc;
  font-size:50px;
  
  font-family: '굴림';
}

#story{
  font-size:23px;
  font-family: '굴림';
}

#back{
background-color: transparent;
border: none;
}

#back:hover{
background-color: Skyblue;
}

#bucket:hover{
 color: Crimson;
 font-weight: 900;
}