@import url('https://fonts.googleapis.com/css2?family=Roboto');

:root{
    --bg-color: #112d02;
    --primary-color: #fafafa;
    --btn-color: #000000;
    --green-light: #33e233;
}

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

body{
    background-color: var(--bg-color);
    font-family: "Roboto", sans-serif;
}

a{
    text-decoration: none;
    color: var(--btn-color);
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    max-width: 30rem;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--primary-color);
    height: 100vh;
    height: 100svh;
}

section{
    display: grid;
    place-items: center;
    gap: 1rem;
}

canvas{
    border: 2px solid var(--green-light);
    width: 50%;
    aspect-ratio: 1;
    border-radius: 0.25 rem;
    display: none;
}

input{
    width: 100%;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;;
    border: 1px solid var(--btn-color);
    border-radius: 0.25rem;
}

button{
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    background-color: var(--btn-color);
    color: var(--primary-color);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    box-shadow: 0.25 rem 0.25rem 0.5rem rgba(241, 102, 102, 0.2);
}

@media Screen and (min-width: 30rem){
   main{
    height: min-content;
    border-radius: 1rem;
    position: absolute;
    inset: 0;
    margin: auto;
   }
}