html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    user-select: none;
    touch-action: none;
    overflow: hidden;
}

p {
    margin: 0 auto;
}

#container {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 750px;
    height: 500px;
    opacity: 0;
}

#animation_container{
    position: absolute;
    aspect-ratio: auto;
}

.elms,.form{
    position: absolute;
}

.form{
    font-family: rounded-mplus-1p-bold;
    font-size: 40px;
    text-align: center;
    opacity: 0;
}

#r-angle{
    width: 20px;
    height: 20px;
}

#red_point,#blue_point,#yellow_point,#svg_canvas {
    opacity: 0;
    z-index: 0;
}

#btn_name{
    font-family: rounded-mplus-1p-bold;
    font-size: 34px;
    color: rgb(255,255,255,0.3);
}

#button{
    width: 200px;
    height: 50px;
    background-color: #468CE6;
    border-radius: 10px;
    text-align: center;
}

#btton_bk{
    left: 265px;
    top: 413px;
    width: 200px;
    height: 50px;
    background-color: #D7D7D7;
    border-radius: 10px;
}

#form_1{
    left: 538px;
    top: 100px;
    width: 120px;
}

#form_2{
    left: 538px;
    top: 190px;
    width: 120px;
}

#form_3{
    left: 538px;
    top: 280px;
    width: 120px;
}

.title{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #ededed;
}

.aniP{
    width: 30px;
    height: 30px;
    /* border-radius: 15px; */
}

#aniP-1{
    background-color: #eb736e;
    left: 287.5px;
    top:188.708px;
}
#aniP-2{
    background-color: #468ce6;
    left:320px;
    top:254px
}
#aniP-3{
    background-color: #f5c855;
    left: 255px;
    top:254px
}

@font-face {
font-family: "rounded-mplus-1p-bold";
  src: url(fonts/rounded-mplus-1p-bold.woff) format("woff");
}