*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    height: 100%;
    width: 100%;
}
#main{
    height: 100%;
    width: 100%;
    background-color: black;
}
#main #cards { 
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:300px;
    height:400px;
    background-color:burlywood;
    border-radius: 10px;
    padding-left: 20px;
    padding-top: 10px;
}
#cards #circle {
    width:100px;
    height:100px;
    border-radius:50%;
    background-color: aquamarine;
    background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQw5rIO1WzQLAzf9wfpErPKIvbAZ3tW-pXxmMEqVcBuPHlQPzFVXJLTy_w&s=10");
    background-size: cover;
    background-position: top;
    margin-left:85px;
    
}
#cards h1{
    font-size:18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color:rgb(54, 54, 82);
    margin-left: 65px;

}
#cards p{
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#cards button{
    margin-left: 65px;
    margin-top: 10px;
    width: 125px;
    height: 20px;
    background-color: rgb(92, 92, 113);
    color: aliceblue;
}