body{
    font-family: sans-serif;
    padding:0;
    margin:0;
}

nav{
    background: #ffb20f;
    padding:10px;
}

nav h1{
    display:inline-block;
}

nav img{
    height:40px;
    padding:0;
}

.container img{
    height:100px;
    float: left;
    padding:10px;
}

.container{
    display:grid;
    grid-template-columns: 45% 45%;
    width:90%;
    margin: 0;
    position: absolute;
    top: 20%;
    left:5%;
    right:5%;
    border: 2px dashed #582707;
    column-gap: 10%;
    border-radius: 15px;
    padding:10px;
}

.main{
    border:solid 1px pink;
    border-radius:15px;
    background: #ffb20f;
    padding:20px;
}

.main h3{
    text-align: center;
}

.main p span{
    background: #582707;
    color: #ffe548;
    font-weight: bold;
}

.input-group{
    width:90%;
    margin: auto;
    padding:0.5em;
}

label{
    font-size: large;
    color: #582707;
    display:inline-block;
    width: 40%;  
}

select,input{
    font-size: large;
    width:40%;
    border: pink;
    background: #ffe548;
    
}

button{
    display:block;
    margin:auto;
    background: #582707;
    color: #ffe548;
    font-size: large;
    margin-top: 5%;
}
hr{
    border: none;
   border-top:2px dashed #582707;
}
.names{
    border: solid #582707 1px;
    border-collapse: collapse;
    width:100%;
    background:#ffe4482c;
    

}

.names th{
    color: #582707;
    background: #ffb20f;
    text-align: left;
    padding: 8px;
    
}

.names td, .names tr{
        border: 1px solid #ffe548;
        padding: 8px;
        border-radius:15px;
}

#output p{
    font-size: x-large;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .container{
        display:grid;
        grid-template-columns: 100%;
        position: relative;
        left:0;;
        border:none;
        margin: auto;
    }

    body {
        background-color: rgb(44, 1, 1);
        color: #f7efc0;
    }
}