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

html{
    font-size: 62.5%;
}

:root{
    --size-default: 1.6rem;
    --fs-body: var(--size-default);

    --primary-blue-clr: rgb(20, 61, 173);
    --circle-clr: rgba(40, 40, 57, 0.858);
}

body{
    background-image: url("/assets/qa-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    min-height: 100vh;
    color: white;
    font-size: 1.6rem;
}

.container{
    flex-direction: column;
    gap: 2rem;
}

.controls {
    border: 2px solid var(--primary-blue-clr);
    padding: .5rem;
    border-radius: 1rem;
    padding-left: 2rem;
    width: 50rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

:is(body, .container, .result-circle, .result, .controls-btns){
  display: flex;
  justify-content: center;
  align-items: center;
}

input{
    background: transparent;
    border: none;
    color: inherit;
    height: 100%;
    font-size: 2rem;
    width: 100%;
}

input:focus{
    outline: none;
}

button{
    padding: 1rem 2rem;
    font-size: inherit;
    background: var(--primary-blue-clr);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: .5rem;
    width: 15rem;
}
a{
    color: inherit;
    text-decoration: none;
}

.result-circle{
    background: var(--circle-clr);
     width: 22rem;
     aspect-ratio: 1;
     padding: 1rem;
     border-radius: 50%;
}

.result{
    background: white;
    width: 17rem;
    aspect-ratio: 1;
    border-radius: 1rem;
}

.controls-btns{
    gap: 2rem;
    width: 100%;
    margin-top: 1rem;
}

.controls-btns button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}