head {
    @font-face {
      font-family: 'Pretendard-Regular';
      src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
      font-weight: 400;
      font-style: normal;
  }
  }
  
  html{
    font-size:0.6vw;
  }
  
  body{
    font-family:'Pretendard-Regular', sans-serif;
    font-size:3rem;
    line-height:1.6;
    color: black;
    font-weight:900;
    word-break: keep-all;
    margin:0;
    background-image: url('../SVG/backyellow.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100vh;
  }

.title{
    background-color: white;
    z-index: 2;
    position: relative;
    font-size: 3.4rem;
    height: calc( 100vh - 2vw);
    width: 6vw;
    padding: 1vw;
    border-right: solid 0.1vw black;
    margin:0;
}


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


.neoguri>a{
    color: white;
    background-color: black;
}

.neoguri, .chatgi, .jakjeon{
    margin-bottom: 5px;
}

.rac1-1{
    width: 5vw;
    position: absolute;
    margin:0;
    transform: translate(-50%, -15%);
    bottom: 0;
    left: 50%;
}

.rac1-2{
    display: none;
    width: 5vw;
    position: absolute;
    margin:0;
    transform: translate(-50%, -15%);
    bottom: 0;
    left: 50%;
}

.info{
    z-index: 2;
    font-size: 2rem;
    position:fixed;
    width:80%;
    text-align: right;
    bottom: 0.5rem;
    right: 1rem;
    margin: 0;
}

.chatgi a:hover {
    color:white;
    background:black;
}

.jakjeon a:hover {
    color:white;
    background:black;
}

.where a:hover {
    color:white;
    background:black;
}

.boxes{
    position: fixed;
    top:0;
    left: 8vw;
    width: calc(100% - 8vw);
    height: 100vh;
}

h2{
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
    padding:0;
    margin: 0.8rem 0;
}


#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10,
#box11, #box12, #box13, #box14, #box15, #box16, #box17, #box18, #box19, #box20,
#box21, #box22
{
    background:#ff47df;
    width:fit-content;
    height:fit-content;
    display:flex;
    justify-content: center;
    position:absolute;
    left: 30%;
    top:50%;
    font-size: 2rem;
    text-align: center;
    padding: 0 1.8rem;
    user-select:none;
    cursor: grab;
    border: 0.1vw solid black;
    overflow: hidden;
    white-space: nowrap;
    transform: translate(-50%, 0);
}

#box1:active, #box2:active, #box3:active, #box4:active, #box5:active, 
#box6:active, #box7:active, #box8:active, #box9:active, #box10:active,
#box11:active, #box12:active, #box13:active, #box14:active, #box15:active,
#box16:active, #box17:active, #box18:active, #box19:active, #box20:active,
#box21:active, #box22:active
{
    cursor: grabbing;
}

#box2{
    background: #26ff20;
    left:12%;
    top:22%;
}

#box3{
    background:#b7e400;
    left: 84%;
    top:47vh;
}


#box4{
    background:#f4ff03;
    left: 28%;
    top:65vh;
}

#box5{
    background:#2dffb8;
    left: 44%;
    top:25vh;
}

#box6{
    background:#86ffbc;
    left: 72%;
    top:74vh;
}

#box7{
    background:#86fff9;
    left: 88%;
    top:24vh;
}

#box8{
    background:#ffe535;
    left: 52%;
    top:73vh;
}

#box9{
    background:#86fff9;
    left: 14%;
    top:43vh;
}

#box10{
    background:#86fff9;
    left: 56%;
    top:41vh;
}

#box11{
    background:#efff42;
    left:46%;
    top:58vh;
}

#box12{
    background:#00ff3c;
    left:67%;
    top:55vh;
}

#box13{
    background:#efff42;
    left:43%;
    top:5vh;
}

#box14{
    background:#42fcff;
    left:34%;
    top:78vh;
}

#box15{
    background:#efff42;
    left:27%;
    top:32vh;
}

#box16{
    background:#efff42;
    left:84%;
    top:10vh;
}

#box17{
    background:#efff42;
    left: 64%;
    top:30vh;
}

#box18{
    background:#77ff6b;
    left: 32%;
    top:13vh;
}

#box19{
    background:#77ff6b;
    left: 85%;
    top:65vh;
}

#box20{
    background:#c0ff2e;
    left: 13%;
    top:72vh;
}

#box21{
    background:#b7e400;
    left: 12%;
    top:5vh;
}

#box22{
    background:#26ff20;
    left: 66%;
    top:8vh;
}