*{
    box-sizing: border-box;
}

html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.row{
    display: flex;
    gap: 1rem;
}

.col{
    flex:1 1 auto;
    margin:1rem auto;
}

h1{
    text-align: center;
}

header{
    background-color: orange;
    border: solid 1px black;
}

form{
    border:solid 5px green;
    border-radius: 10px;
    padding:1rem;
    margin:1rem auto;
    box-shadow: 5px 5px 5px gray;
}

form label, form input[type="submit"], footer p{
    font-weight: 900;
}

form input, form select{
    position: sticky;
    left:50%;
    width:50%;
    padding:1rem;
    border-radius: 10px;
    margin:1rem;
}

form input[type="submit"], form input[type="reset"]{
    background-color: orange;
}

footer{
    background-color: orange;
    position: absolute;
    bottom: 0%;
    left:0;
    width:100%;
    text-align: center;
    margin:0 auto;
    border: solid 1px black;
}

footer p{
    margin: 1rem auto;
    width:50%;
    padding:2rem;
    font-size: 2rem;
}

#display{
    word-break: break-word;
}

@media (min-width:750px){
    form{
        width:50%;
    }
}

@media (min-width:1250px){
    form{
        width:25%;
    }
}

@media(prefers-color-scheme: dark){
    body, input, select{
        background-color: black;
        color:white;
    }
    input{
        border:solid 1px white;
    }
}