body {
  background-image: url("smgrid.png");
  background-color: #000;
  overflow: hidden;
  font-family:"outfit", serif;
}

 
.coiny-regular {
  font-family: "Coiny", system-ui;
  font-weight: 400;
  font-style: normal;
}

.outfit {
  font-family: "Outfit", sans-serif;
  font-style: normal;
}

 
  #nav{
position: absolute;
bottom:25px;
right: 913px;
color:#20D0C6;
font-size:36px;
font-weight:bold;
font-family: "coiny", serif;
  text-shadow:1px 1px 10px #fff;
  text-align:right;
}
 
   #nav a{
font-size:36px;
font-weight:bold;
font-family: "coiny", serif;
  text-shadow:1px 1px 10px #fff;
  text-align:right;
   }
  

a{
text-decoration: none;
color: #FEA026;
 font-family: "coiny", system-ui;
}

b{
color: #FEA026;
font-weight: normal;
 font-family: "coiny", system-ui;

}
 
::-webkit-scrollbar{
width: 7px; 
}
 
::-webkit-scrollbar-track{
background-color: transparent;
}
 
::-webkit-scrollbar-thumb{
background-color: #AED9DE 0.5;
  background-color: rgba(174, 217, 222, 0.3); 
  border-radius: 5px;
}

h1{
margin: 0px;
color: #FF6763;
font-size: 24px;
text-transform: lowercase;
text-align:right;
font-family: "coiny", system-ui;
}

h2{
margin: 0px;
color: #fff;
font-size: 16px;
text-transform: lowercase;
text-align:right;
font-family: "coiny", system-ui;
}

#bag{
position: absolute;
top:15px;
left:150px;
}

#box{
  width: 410px;
height: 240px;
padding: 20px;
overflow: scroll;
overflow-x: hidden;
font-weight: normal;
color: #6F2727;
font-size: 14px;
font-family: "outfit", sans-serif;
line-height: 20px;
border-radius:10px;

}

#main{
position: absolute;
left: 200px;
top: 238px;
width: 410px;
height: 240px;
border-radius:10px;
}
 
#main p{
margin-top: 10px;
font-size: 12px;
}


#button1{
position: absolute;
left: 198px;
top: 178px;
transform: rotate(357deg);
}

#button2{
position: absolute;
left: 290px;
top: 173px;
transform: rotate(358deg);
}

#button3{
position: absolute;
left: 371px;
top: 174px;
transform: rotate(2deg);
}

#button4{
position: absolute;
left: 459px;
top: 178px;
transform: rotate(4deg);
}

#button5{
position: absolute;
left: 527px;
top: 190px;
transform: rotate(8deg);
}


#count{
position: absolute;
left: 635px;
top: 542px;
transform: rotate(4deg);
}


#ring1{
position: absolute;
left: 145px;
top: 550px;
transform: rotate(270deg);
}


#ring2{
position: absolute;
left: 150px;
top: 15px;
transform: rotate(35deg);
}


#ring3{
position: absolute;
left: 655px;
top: 500px;
transform: rotate(125deg);
}


#ring4{
position: absolute;
left: 115px;
top: 80px;
transform: rotate(345deg);
}

#ring5{
position: absolute;
left: 633px;
top: 8px;
transform: rotate(75deg);
}


#ring6{
position: absolute;
left: 100px;
top: 475px;
transform: rotate(35deg);
}

#ring7{
position: absolute;
left: 643px;
top: 565px;
transform: rotate(15deg);
}

#ring8{
position: absolute;
left: 650px;
top: 75px;
transform: rotate(35deg);

}

#ring9{
position: absolute;
left: 150px;
top: 155px;
transform: rotate(5deg);
}

#petra{
position: absolute;
left: 390px;
top: 528px;
color:#FF6763;
font-size: 10px;
}