*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-family: 'Raleway',sans-serif;
    line-height: 1.5;
    font-size: 16px;
}

.header{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(2,1fr);
    padding: 10px 3%;
}
table{
    border-collapse: collapse;
    background-color: #F3F8FD;
}
td{
    border: 1px groove black;
    padding: 5px 10px;
}
#bank{
    background-color: #276CA6;
    color: white;
}

.heading2 h1{
    color: #1761A0;
    font-family: sans-serif;
}

h4{
    font-family: 'Lato',sans-serif;
    background-color: #276CA6;
    color: white;
    padding: 0px 10px;
    line-height: 2;
}
.form{
    padding: 10px 3%;
}
.information{
    line-height: 3;
}
.input{
    background-color: white;
    padding: 10px 20px;
    border: 0px solid white;
    border-bottom: 2px groove rgb(100, 183, 255);
    outline: none;
    font-family: 'Lato',sans-serif;
}
.input:focus{
    background-color: #F3F8FD;
    border-color: #276CA6;
}
.radio{
    margin: 5px;
}

#other{
    margin: 10px 10px;
}

#gender{
    line-height: 1;
    margin-top: 20px;
}
select,option{
    border: 1px solid #276CA6;
    background-color: white;
    padding: 5px 10px;
}
.buttons{
    background-color: #276CA6;
    color: white;
    padding: 10px 20px;
    border: 1px solid #276CA6;
    border-radius: 5px;
    cursor: pointer;
}

.buttons:hover{
    background-color: #F3F8FD;
    color: black;
}

.personal{
    margin: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(2,1fr);
}



@media(max-width:450px){
    .header{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(1,1fr);
        padding: 10px 3%;
    }
    .personal{
        margin: 10px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(1,1fr);
    }
}