@import url("reset.08bc1c485674.css");

body 
{
    font-family: 'Open Sans', sans-serif;
    background-color: rgb(9, 4, 26);
    color: rgba(255, 255, 255, 0.849);
}

h1 
{
    font-size: 2.5em;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
    padding-left: 0.5em;
}
h2
{
    font-size: 1.5em;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
    padding-left: 0.5em;
}
p 
{
    font-size: 1.25em;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

#skillcheck-parent 
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
    /* background-color: rgba(79, 28, 245, 0.171); */
}
#skillcheck 
{
    /* background-color: rgba(226, 99, 39, 0.123); */
    width: 150px;
    height: 150px;
    border-radius: 5px;
}
#skillcheck-circle 
{
    background-color: rgba(233, 215, 253, 0.24);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: -1;
}
#skillcheck-circle-inner 
{
    background-color: rgb(9, 4, 26);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    /* display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 25px;
    left: 25px; */
}
#skillcheck-circle-inner-dot
{
    background-color: rgba(51, 240, 215, 0.938);
    width: 15px;
    height: 15px;
    border-radius: 10px;
    position: absolute;
    top: calc(130px/2);
}
#skillcheck-circle-cursor 
{
    background-color: rgba(141, 91, 199, 1);
    width: 11px;
    height: 11px;
    border-radius: 10px;
    position: absolute;
    z-index: 10000;
}
#skillcheck-circle-trap
{
    background-color: rgba(218, 23, 23, 0.534);
    position: absolute;
    padding: 5px;
    display: flex;
    align-items: flex-start;
    height: 100px;
}
#skillcheck-circle-trap-normal
{
    background-color: rgba(233, 215, 253, 0.507);
    width: 15px;
    height: 60px;
    border-radius: 5px;
    position: relative;
}
#skillcheck-circle-trap-great
{
    background-color: rgb(233, 215, 253);
    width: 15px;
    height: 20px;
    border-radius: 5px;
    position: relative;
}

#skillCheckCanvas {
    position: absolute;
    /* background-color: rgba(86, 51, 240, 0.108); */
    z-index: -100;
}
#skillCheckCanvasDebug {
    position: absolute;
    z-index: 200;
}

.debug 
{
    top: 30%;
    left: 48%;
    position: absolute;
}
.debug#trapdebug {

}
.debug#cursordebug {
    top: 33%;
}

#bouncing-ball 
{
    background-color: rgba(86, 51, 240, 0.808);
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    z-index: -1000;
}