*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    width:100%;
    height:100vh;
    overflow:hidden;
    background:#000;
    font-family:Arial, Helvetica, sans-serif;
    
    background: orangered;
}

#container{
    width: 80%;
    height: 80%;
    position: relative;
}
#x-axis{
    width:100%;
    height:1px;

    background:white;

    position:fixed;
    top:50%;
    left:0;

    transform:translateY(-50%);
}

#y-axis{
    width:1px;
    height:100vh;

    background:white;

    position:fixed;
    top:0;
    left:50%;

    transform:translateX(-50%);
}
.circle{
   width:500px;
    height:500px;

    border-radius:50%;

    background:transparent;
    border:1px solid black;

    position:absolute;

    top:50%;
    left:50%;
    /* margin: 20px; */

    transform:translate(-50%, -50%);
}