.bgcolour1 {
     background-color: white;   
    }
    
.bgcolour2 {
     background-color: bbb;   
    }
    
.bgcolour3 {
     background-color: blue;   
    }
    
.bgcolour4 {
     background-color: red;   
    }
    
#input {
    position: absolute;
    left: 500px;

    }
    
body {
min-width: 100%;
max-width: 100%;
  background-size: cover;trans
  background-color: white; /* For browsers that do not support gradients */
  //background-image: linear-gradient(40deg, #fff, #eee, #ccc, #ddd, white, white, white, yellow);
  background-repeat: no-repeat;
  background-image: linear-gradient(40deg, rgba(255,255,255,0), rgba(255,255,255,0), rgba(255,255,255,0), yellow), url("images/5.jpg");
  background-attachment: fixed;
}

h2 {
text-align: center;
}

.heading {
text-align: center;
}
    
#inputheader {
    background-color: red;
}

.container {
    margin-left: auto;
    margin-right: auto;
padding: 15px;
width: 70%;
}

.card {
background: rgba(255,255,255,0.9);
min-width: 300px;
    font-family: Verdana;
    padding: 15px;
text-align: center;
box-shadow: 0 2px 4px 4px rgb(200,200,200);
transition-property: scale;
transition-duration: 0.4s;
}

.card:hover {
box-shadow: 0 4px 8px 8px rgb(200,200,200);   
  background-image: linear-gradient(40deg, white, white, white, white, white, white, white, yellow);
  scale: 1.03;
}

.card:active {
box-shadow: inset 0 2px 4px 4px rgb(200,200,200);    
}

.supracard {
margin: auto;
background: rgba(255,255,255,0.9);
padding: 20px;
width: 50%;
    font-family: "Arial";
    //padding: 15px;
text-align: center;
box-shadow: 0 2px 4px 4px rgb(200,200,200);
}


.collapsed {
    font-family: "Verdana";
text-align: center;
max-height: 20px;
box-shadow: 0 2px 4px 4px rgb(200,200,200);
overflow: hidden;
background-color: rgba(255,255,255,0.8);

}

.collapsed:hover {
box-shadow: 0 4px 8px 8px rgb(200,200,200);   
  background-image: linear-gradient(40deg, white, white, white, white, white, white, white, yellow);
}

.expand {
font-family: "Verdana";
    padding: 5px;
text-align: center;
box-shadow: 0 2px 4px 4px rgb(200,200,200);
background-color: rgba(255,255,255,0.8);

}

.left {
font-family: "Verdana";
text-align: left;
}

.hidden {
display: none;
}

.shown {
display: block;
}

th {
font-family: "Verdana";
max-width: 250px;
}

td {
font-family: "Verdana";
max-width: 250px;

}

.submitbutton {
border-radius: 10px;
padding: 5px;
background-color: yellow;
color: blue;
transition-duration: 0.5s;
}

.submitbutton:hover {
background-color: white;
}

.mainheader {
min-width: 100%;
max-width: 100%;


}

.supra {
width: 100%;
background: linear-gradient(to right, #58B9C9, rgba(255,255,255,0));
z-index: -100;
}

.mainbox {
margin: auto;
width: 70%;
background-color: rgba(255,255,255,0.75);
box-shadow: 0 2px 4px 4px rgb(200,200,200);
}

.surveycontainer {
    margin-left: auto;
    margin-right: auto;
padding: 15px;
max-width: 700px;
min-width: 400px;
}