* {
box-sizing: border-box;
}
body {
font-family:'Times New Roman', Times, serif
}
/* Style the header */
/*Inside 1st Column*/
/* 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;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
ul{
list-style-type:square;
text-align: left;
}
/* Style the footer */
footer {
color: rgba(0,0,0,.2);
font-weight: 700;
padding: .5rem;
text-align: center;
}


/*Enter button*/
.button-container {
display: flexbox;
text-align: center;
padding: .2rem 0rem .2rem 0rem;
border-radius: 50%;
margin-bottom: 0.25rem;
width: 9rem;
font-size: .8rem;
border: 0.15rem solid black;
background-color: white;
}
.button-container:hover {
background-color: green;
cursor:pointer;
color: white;
box-shadow: 0 0.4rem 1.4rem 0 rgb(0, 0, 0);
border: 0.15rem solid rgb(250, 250, 250);
transform: translateY(-0.1rem);
transition: transform 150ms;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

/*BUTTONS*/
.button {
display: block;
padding: 0.5rem 0.5rem;
margin: 0.5rem;
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: 34rem;
height: 2rem;
opacity: .6;
transition: 0.3s;
border: .1rem solid rgba(250,250,250,.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(3px);
}
.button[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}

@media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}