* {
box-sizing: border-box;
}
html {
    background-image: url(Shield.jpeg);
    background-size: 96rem;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
.header1 {
padding: .5rem;
text-align: left;
font-weight: 900; 
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: .5rem;
}
.column3 {
padding: 0rem;
}
.column2 {
padding: 0rem;
}
.column1 {
padding: 0rem;
}
/* Style the footer */
footer {
color: rgba(0,0,0,.2);
font-weight: 700;
padding: .5rem;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {

footer {
color: rgba(250,250,250,.2);
}
.header1 {
color: rgb(250,250,250)
}
html {
background-image: url(Shield.jpeg);
background-size: 500rem;
}
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
/*BUTTONS*/
.button {
display: table;
padding: 0.2rem 0.2rem;
margin: 0.2rem;
font-size: .9rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
text-align: center;
color: rgb(250, 250, 250);
background-color: rgb(8, 31, 243);
width: 18rem;
height: 2rem;
opacity: .6;
transition: 0.3s;
border: .1rem solid rgba(0,0,0,.5);
}
.button:hover {
opacity: 1;
font-weight: 900;
}
.button:active {
background-color: rgb(250, 250, 250);
color: rgb(0,0,0);
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.button[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}