header.active {
    filter:blur(10px);
}
header {
    height: 100vh;
    display: flex;
    align-items:center;
    justify-content:center;
    background:url('../img/bg.jpg') no-repeat center/cover;
}
.btn {
    background:crimson;
    padding:25px;
    border-radius:5px;
    border:none;
    color:#fff;
    font-size: 40px;
    cursor:pointer;
    font-family: 'Slabo 27px', serif;
    transition:.3s all ease-in-out;
    box-shadow:10px 10px 0px rgba(0,0,0,0.5);
    position: relative;
    z-index:1;
}
.btn:hover {
    background:tomato;
    padding:35px 60px;
    box-shadow:none;
}
.filter {
    position: absolute;
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    background:#000;
    opacity:0;
    display:none;
}
.filter.active {
    opacity:0.35;
    display:block;
}
.modal {
    background:#fff;
    max-width:700px;
    width: 90%;
    padding:50px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    text-align: center;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    visibility:hidden;
    opacity:0;
    transition:.3s all ease-in-out;
    z-index:2;
}
.modal .btn {
    align-self:center;
    font-size: 25px;
}
.modal.active {
    opacity:1;
    visibility:visible;
}
.close {
    position: absolute;
    top:10px;
    left:10px;
    background:none;
    border:none;
    padding:10px;
    width: 30px;
    height: 30px;
    font-size: 30px;
    cursor:pointer;
}