*{
    box-sizing: border-box;
}

:root {
  --base-size: 1rem;
  --type-scale: 1.44;
  --h5: calc(var(--base-size) * var(--type-scale));
  --h4: calc(var(--h5) * var(--type-scale));
  --h3: calc(var(--h4) * var(--type-scale));
  --h2: calc(var(--h3) * var(--type-scale));
  --h1: calc(var(--h2) * var(--type-scale));
}

body{
    font-size: 1.4rem;
    background-color: #2C0C47;
}

main{
    background-color: #5B3779;
    width: 100%;
    margin: 0 auto;
    padding: 11px;
    border-radius: 10px;
}
header{
    text-align: center;
}

#txt_input{
    background-color: #B3AF4A;
    padding: 6px;
}

#button{
    background-color: #7DA544 ;
    border: none;
    color: white;
    padding: 10px;
}

#reset_list{
    background-color: #973E66 ;
    border: none;
    color: white;
    padding: 10px;
}
li{
    color: white;
    list-style-type: square;
}
legend{
    color: white;
}
h1{
    color: white;
}

@media screen and (min-width: 500px) {
    
main{
    width: 50%;
}

#button, #reset_list, #txt_input{
    font-size: 1.5rem;
    height: 2em;
}

}