:root {
    --black:#333;
    --red:#E11B3C;
    --yellow:#D89E00;
    --blue:#1268CD;
    --green: #44772C;
}

* {
    box-sizing: border-box;
}

/*-------Algemeen------*/

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-style: normal;
    font-size: 24px;
    line-height: 32px; 
    color: #F4F4F4;
    margin: 0;
    height: 100vh;
    width: 100vw;

}

body::before{
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    position: absolute;
    top:0;
    left: 0;
    background: linear-gradient(72deg, #8FB6D9 0%, #44772C 100%);
    mix-blend-mode: color;
    z-index: -1;
}

.container{
    width: 100%;
    max-width: 1432px;
    margin: auto;
    background:url(../media/background-content.svg) no-repeat;
    background-size: cover;
    display: block;
    top:50%;
    left:50%;
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 80px 48px 100px 48px;
    text-align: center;
    align-content: center;
    height: 100%;
}

/*-------Startpagina------*/
.start h1{
    color: #333;
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 80px;
    font-weight: 400;
    line-height: 96px; 
    padding:80px;
    margin:0;
    
}

.start h1 span{
    font-weight: 700;
}

.start  .buttons{
    display: flex;
    flex-direction: row;
    gap:24px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    width: fit-content;
}

.start .button{
    background:var(--green);
    color:#fff;
    text-decoration: none;
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    padding:24px 32px;
    display: block;
    width: fit-content;
    left:50%;
    
    transition: all ease 0.3s;
    border-radius: 4px;
}

.start .button:hover{
background:#8FB6D9;
}

.start .button span{
    display: flex;
    flex-direction: row;
    gap:10px;
}

.start .button span::before{
    width: 25px;
    height: 32px;
    content:"";
    display: block;
    background: url(../media/Firework-icon.svg);
    
}

/*-------Vragen paginas-------*/
.answer .container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.answer h1{
    color: var(--black);
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px; 
    margin: 0;
    max-width: 1136px;
    left:50%;
    transform: translateX(-50%);
    position: relative;
}

.answer .container .answers-block{
    display: flex;
    flex-direction: row;
    gap:48px;
    flex-wrap: wrap;
    padding: 48px 0px;
}


.answer .container .answers-block .column{
    width: 100%;
    text-align: left;
    height: 144px ;
    position: relative;
    align-content: center;
     border-radius: 4px;
}

.answer .container .answers-block .column p{
    color: #FFF;
    font-family: "Plus Jakarta Sans";
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    padding-left:96px;
    padding-right: 48px;
  
}

.answer .container .answers-block .column.text p{
    color:var(--black);
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
}

.answer .container .answers-block .column.text p span{
    font-weight: 800;
}

.answer .container .answers-block .column.anwser-a{
    background-color: var(--red);
}

.answer .container .answers-block .column.anwser-a p::before{
    width: 40px;
    height: 48px;
    content: "";
    background:url(../media/Vuurpijl-icon.svg) no-repeat;
    display: block;
    background-size: contain;
    background-position: center center;
    position: absolute;
    left:32px;
    top:50%;
    transform: translateY(-50%);
}

.answer .container .answers-block .column.anwser-b{
    background-color: var(--blue);
}

.answer .container .answers-block .column.anwser-b p::before{
    width: 40px;
    height: 48px;
    content: "";
    background:url(../media/Firework-icon.svg) no-repeat;
    display: block;
    background-size: contain;
    background-position: center center;
    position: absolute;
    left:32px;
    top:50%;
    transform: translateY(-50%);
}

.answer .container .answers-block .column.anwser-c{
    background-color: var(--yellow);
}

.answer .container .answers-block .column.anwser-c p::before{
    width: 40px;
    height: 48px;
    content: "";
    background:url(../media/lucifer-icon.svg) no-repeat;
    display: block;
    background-size: contain;
    background-position: center center;
    position: absolute;
    left:32px;
    top:50%;
    transform: translateY(-50%);
}

.answer .container .answers-block .column.anwser-d{
    background-color: var(--green);
}

.answer .container .answers-block .column.anwser-d p::before{
    width: 40px;
    height: 48px;
    content: "";
    background:url(../media/Sterretje-icon.svg) no-repeat;
    display: block;
    background-size: contain;
    background-position: center center;
    position: absolute;
    left:32px;
    top:50%;
    transform: translateY(-50%);
}

.answer .container .pagination{
    display: flex;
    flex-direction:row;
    width: 100%;
    position: relative;
    height: 80px
}

.answer .container .pagination .button{
    right: 0;
    position: absolute;
    background-color: var(--black);
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    padding:24px 32px;
    width: fit-content;
    transition: all ease 0.3s;
    border-radius: 4px;
}

.answer .container .pagination .button:hover{
    background:#8FB6D9;
    color:var(--black);
}

.answer .container .pagination .numbers{
    left:50%;
    position: absolute;
    transform: translateX(-50%);
    color: var(--black);
    font-family: "Plus Jakarta Sans";
    font-size: 24px;
    font-weight: 700;
    line-height: 56px;
    margin:0;
}
.answer .container .pagination .numbers p{
    margin:0;
}

.answer .container .pagination .numbers span{
    font-size: 48px;
    line-height: 56px
}

.answer .container .pagination .back{
    height: 80px;
    width: 80px;
    position: relative;
}
.answer .container .pagination .back img{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    transition: all ease 0.3s;
}

.answer .container .pagination .back:hover img{
    left:45%;
}

/*--------Andwoord pagina------*/
.answer .container .awnser-explain{
    flex-direction: row;
    display: flex;
    gap:48px;
    justify-content: space-between;
   
}

.answer .container .awnser-explain .answers-block{
    flex-direction: column;
    padding-top:0;
    gap:24px;
}

.answer .container .awnser-explain .picture-block{
    max-width: 644px;
    width: 100%;
}

.answer .container .awnser-explain .picture-block img{
    max-width: 644px;
    width: 550px;
    max-height: 350px;
    object-fit: cover;
	object-position: center;
}

.answer .container .awnser-explain .answers-block .column{
    width: 644px;
    
}

.answer .container .awnser-explain .answers-block .column.text{
    color:var(--black);
    padding:0;
    height: unset;
    text-align: left;
}

.answer .container .awnser-explain .answers-block .column.text p{
    padding:0;
}

.answer .container .awnser-explain .answers-block .column.text p span{
   font-weight: 700;
    
}

.form{
    padding-top:150px;
}

.form h1{
    padding-bottom:48px;
}

.form input{
    width: 632px;
    height: 144px;
    border-radius: 4px;
    border: 1px solid var(--black);
    background: linear-gradient(0deg, rgba(143, 182, 217, 0.10) 0%, rgba(143, 182, 217, 0.10) 100%), #FFF;
    color: var(--black);
    text-align:center;
    font-family: "Plus Jakarta Sans";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px;
}

/*--------Afsluiting-------*/
.afsluiting p{
    color:var(--black);
    width: 1136px;
    position: relative;
    left:50%;
    transform: translateX(-50%);
    padding:80px 0px;
}

.afsluiting p span{
    font-weight: 700;
}

.afsluiting .button{
    background:var(--green);
    color:#fff;
    text-decoration: none;
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    padding:24px 32px;
    display: block;
    width: fit-content;
    transition: all ease 0.3s;
    border-radius: 4px;
}

.afsluiting .button:hover{
background:#8FB6D9;
}

.afsluiting .button span{
    display: flex;
    flex-direction: row;
    gap:10px;
}

.afsluiting .button span::before{
    width: 32px;
    height: 32px;
    content:"";
    display: block;
    background: url(../media/restart.svg);
    background-size: contain;
    
}
.afsluiting .button.video{
    background:#F03;
    color:#fff;
    text-decoration: none;
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    padding:24px 32px;
    display: block;
    width: fit-content;
    transition: all ease 0.3s;
    border-radius: 4px;
}

.afsluiting .button.video:hover{
    background:#8FB6D9;
}

.afsluiting .button.video span{
    display: flex;
    flex-direction: row;
    gap:16px;
}

.afsluiting .button.video span::before{
    width: 14px;
    height: 32px;
    content:"";
    display: block;
    background: url(../media/Video.svg) no-repeat;
    background-position: center center;
}

.afsluiting .buttons{
    display: flex;
    flex-direction: row;
    gap:24px;
    justify-self: center;
}



@media only screen and (min-width: 480px) {
}

@media only screen and (min-width: 640px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1280px) {
}

@media only screen and (min-width: 1440px) {
    .container{
        width: 100%;
        max-width: 1432px;
        height: 831px;
    } 

    body{
        background: url(../media/Vuurwerk-bg.jpg) no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .answer .container .answers-block .column{
        width: 50%;
        max-width: 644px;
        height: 144px ;
    }
}

@media only screen and (min-width: 1680px) {
}