/*Set default font, etc. for the whole document/body*/
html,body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin:0;
height:100vh;
background-color:#292929;
}

/*The foremost header which stays in the top of the viewport when scrolling*/
.header {
width:100%;
background-color:#1c1c1c;
color:#00d6a8;
text-align:center;
padding:0.35em;
height:1fr;
box-sizing:border-box;
font-size:25pt;
font-weight:normal;
box-shadow: 0 0 40px #000000;
float:top;
position:fixed;
}

.grid-container {
display:grid;
grid-template-rows:1fr auto 10%;
grid-template-columns:1fr 3fr 1fr;
}

.grid-header {
grid-row: 1;
grid-column:1 / span 3;
background-color:#1c1c1c;
color:#00d6a8;
text-align:center;
padding:0.35em;
height:100%;
box-sizing:border-box;
font-size:25pt;
font-weight:bold;
}

.grid-content {
grid-column:2;
height:100%;
padding:1em;
box-sizing:border-box;
font-size:15pt;
}

.card {
color:#e6e6e6;
background-color:#171717;
border-radius:15px;
padding:20px;
width:auto;
margin-bottom:20px;
box-shadow:5px 5px 15px #000000;
}

.question {
line-height:200%;
}

/*Answer options*/
.vihrea {
color:#11a800;
box-sizing:border-box;
}

.keltainen {
color:#baa400;
box-sizing:border-box;
}

.oranssi {
color:#fa9f37;
box-sizing:border-box;
}

.punainen {
color:#ff5038;
box-sizing:border-box;
}

.harmaa {
color:#938aff;
}

.vihrea, .keltainen, .oranssi, .punainen, .harmaa:hover {
cursor:pointer;
}

/*Radio button styling (change cursor on hover)*/
input[type="radio"]:hover{
cursor:pointer;
}

/*Optional text fields*/
.comments {
font-size:16px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*Class for textarea based questions about the answerer's name (and department). This class is used also in the submit button because the formatting fits well there too*/
.personalq {
font-size:16px;
}

/*Text area formatting (free form answers)*/
textarea{
border-radius:10px;
padding:10px;
background-color:#292929;
color:#e6e6e6;
border:2px solid #00d6a8;
box-sizing:border-box;
font-size:13pt;
max-width:100%;
min-width:10%;
min-height:3em;
outline:none;
}

/*Text input field styling (name field)*/
input[type="text"]{
border-radius:10px;
padding:10px;
width:300px;
background-color:#292929;
color:#e6e6e6;
border:2px solid #00d6a8;
box-sizing:border-box;
font-size:12pt;
outline:none;
}

textarea:focus, input[type="text"]:focus{
border:2px solid #e959ff;
}

textarea:hover, input[type="text"]:hover{
border:2px solid #e959ff;
}

input[type="submit"] {
border:2px solid #00d6a8;
border-radius:10px;
background-color:#292929;
color:#e6e6e6;
padding:10px;
font-size:14pt;
box-sizing:border-box;
}

input[type="submit"]:hover{
cursor:pointer;
background-color:#303030;
}

#submitnote {
margin-left:0.5em;
}

.hidden {
display:none;
}

table {
border-collapse:collapse;
}

table, th, td {
border: 1px solid #ffffff;
padding:5px;
}

th {
color:#00d6a8;
}

td {
color:#e959ff;
}