html, body
{
min-height: 100vh;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background-color: LightGray;
display: flex;
flex-direction: column;
}

h4
{
margin: 0;
padding: 0;
}

img
{
height: 100%;
width: 100%;	
}

select
{
font-size: 18px;
}

input, textarea
{
font-size: 18px;
padding: 5px;
}

@font-face {
  font-family: VT323-Regular;
  src: url('/fonts/VT323-Regular.ttf');
}


#wrapper
{
height: auto;
width: 100%;
min-width: 800px;
margin: 0;
padding: 0;
overflow:hidden;
border: solid 0px red;
box-sizing: border-box;
flex-grow: 1;
}

/* ------------------------------------------------- header section ----------------------------------------------*/
#banner
{
height: auto;
width: 100%;
margin: 10px 0px;
padding: 0;
overflow:hidden;
text-align:center;
border: solid 0px green;
text-shadow: 2px 2px white;
box-sizing: border-box;


}

#banner_image
{
height: 300px;
width: 40%;
margin: 10px auto;
padding: 0;
text-align:center;
border: solid 0px black;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-sizing: border-box;
background-image: linear-gradient(DarkSlateGray, white);
float: left;
}

.columns
{
height: 300px;
width: 30%;
margin: 0;
padding: 0;
text-align:center;
border: solid 0px blue;
box-sizing: border-box;
float: left;
}

.column_element
{
height: 70%;
width: 100%;
margin-top: 7.5%;
padding: 0;
text-align:center;
border-style: solid;
border-image-slice: 1;
border-width: 5px 0px 5px 0px; 
box-sizing: border-box;
}

.border_gradient_left {
  border-image-source: linear-gradient(to left, DarkSlateGray, white);
}

.border_gradient_right {
  border-image-source: linear-gradient(to right, DarkSlateGray, white);
}

/* ------------------------------------------------- content section ----------------------------------------------*/
#content
{
height: auto;
width: 90%;
margin: 50px auto 100px;
padding: 20px;
overflow:hidden;
border: solid 0px green;
text-align:center;
box-sizing: border-box;
font-family: VT323-Regular;
font-size: 28px;
color: Chartreuse;
background-color: black;
}

#click_here
{
text-align: center;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}

.switch_on
{
border: solid 1px Chartreuse;
color: Chartreuse;
}

.switch_off
{
border: solid 1px black;
color: black;
}

.align_left
{
text-align: left;
}


/* ------------------------------------------------- footer section ----------------------------------------------*/
#footer
{
height: auto;
width: 100%;
margin: 0 auto;
padding: 0;
overflow:hidden;
border: solid 0px green;
text-align:center;
box-sizing: border-box;
color: white;
background-color: DarkSlateGray;
}