@import url('https://fonts.googleapis.com/css?family=Baloo+Da|Roboto');

* {
    box-sizing: border-box;
}

body {
    display: grid;
    min-height: 100vh;
    margin: 0;
    background: #5F1C1C;
    font: 1rem 'Roboto', sans-serif;
}

.formulier {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 400px) 1fr;
    grid-template-areas: ". content .";
    background: url("../img/background.png") center no-repeat;
    background-size: 100%;
}

[class*="formulier-"] {
    grid-area: content;
    min-height: 100vh;
    background: rgba(255,255,255,0.6);   
    -webkit-box-shadow: 4px 4px 11px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 4px 4px 11px 3px rgba(0,0,0,0.3);
    box-shadow: 4px 4px 11px 3px rgba(0,0,0,0.3);
}

.formulier-grid {
    display: grid;
    grid-template-rows: repeat(3, auto);
    align-items: start;
}

header,
footer {
    position: sticky;
    background-color: #bfa4a4;    
}

header {
    top: 0;
    align-self: center;
}

footer {
    bottom: 0;
    padding: .2rem 2rem;
    align-self: end;
}

h1 {
    color: #611BBD;
    font-family: 'Baloo Da', cursive;
    font-weight: 900;
    text-align: center;
    font-size: 2.5rem;
    margin: 0;
    text-shadow: 0.01rem 0.05rem 0.17rem #eee;
}

form {
    padding: 0 2rem;
}

.grid-column {
    display: grid;
    gap: .2rem;
}

label {
    font: 1rem 'Roboto', sans-serif;
    line-height: 1.25rem;
    padding: .5rem .3rem .5rem 0;
}

input,
select {
    font: 1rem 'Roboto', sans-serif;
    line-height: 1.25rem;
    padding: .5rem .5rem;
    border: .15rem solid #611BBD;
    border-radius: 4px;
}

input[type='text']:focus,
input[type='password']:focus,
select:focus {
    outline: none;
    border: .15rem dashed #611BBD;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

input[type='submit'] {
    width: 100%;
    color: #ffffff;
    text-shadow: .15rem .15rem .13rem #444;
    background-color: #611BBD;
    background-image: linear-gradient(rgb(97,27,189,1), rgb(138 74 222), rgb(97,27,189,1));
    border-color: #2d0e5a;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

input[type='submit']:active {
    background-color: rgb(45, 14, 90);;
    background-image: linear-gradient(rgb(45, 14, 90), rgb(94, 52, 148), rgb(45, 14, 90));
    box-shadow: 0.1rem 0.1rem 0.4rem 0.06rem rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    transform: translateY(.1rem);
}

input[type='submit'].disabled {
    color: rgb(158, 115, 214);
    text-shadow: none;
    background-color: rgb(158, 115, 214);
    background-image: none;
    border-color: rgb(53, 39, 120);
    box-shadow: none;
    animation-name: disable;
    animation-duration: .8s;
    pointer-events: none;
}

input[type='submit'].enabled {
    animation-name: enable;
    animation-duration: .4s;
}
  
@keyframes disable {
    from {background-color: rgb(138 74 222);}
    to {background-color: rgb(158, 115, 214);}
}

@keyframes enable {
    from {
        color: rgb(158, 115, 214);
        text-shadow: none;
        background-color: rgb(158, 115, 214);
        background-image: none;
        border-color: rgb(53, 39, 120);
        box-shadow: none;

    }
    to {
        color: #ffffff;
        text-shadow: .15rem .15rem .13rem #444;
        background-color: #611BBD;
        background-image: linear-gradient(rgb(97,27,189,1), rgb(138 74 222), rgb(97,27,189,1));
        border-color: #2d0e5a;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
}

@media screen and (min-width: 800px) {
    .formulier-grid {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: stretch;
        background: rgba(255,255,255,0.8);
    }
    
    header,
    footer {
        background-color: #dfd2d2;
    }

    footer {
        align-self: initial;
    }

    input[type='submit']:hover {
        background-color: rgb(45, 14, 90);;
        background-image: linear-gradient(rgb(45, 14, 90), rgb(94, 52, 148), rgb(45, 14, 90));
    }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
  
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
  
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.modal-body {
    padding: .6rem;
}

.modal-header {
    padding-inline-end: .5rem;
}
  
/* The Close Button */
.close {
    color: black;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

form > div {
    padding: .3rem;
}

form > div > small {
    display: block;
    line-height: 1.25rem;
}

.wrong::after {
    content: '!';
    color: red;
    margin-left: .3rem;
}

.correct::after {
    content: '\2713';
    color: green;
    margin-left: .3rem;
}

.emergency {
    color: #fff;
    text-shadow: 0 0 .1rem red;
    background-color: rgb(249, 79, 79);
    border: .15rem dashed red;
}

.vinkje {
    color:black;
    background-color: #8ae193;
    background-image: none;
    border: .15rem dashed #32d342;
    cursor: default;
}