* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif
}

a {
    text-decoration: none;
    color: #2e2e33;
}

.logo {
    height: 50px;
    margin-left: 30px;
    float: left;

     
}

input[type=text] {
    width: 70%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
  }


.logo-container {
    background-color: #ffffff;
    padding: 2rem calc((100vw - 1300px) / 2);
    overflow: hidden;
    z-index: 9999;
    min-height: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Add a subtle shadow */
}

.nav-container {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99999;
}

.topnav {
    background-color: #ffffff;
    overflow: hidden;
    z-index: 9999;
    height: 150px;
    min-height: 50px;
    height: 100%;
    float: right
}


    /* Style the links inside the navigation bar */
    .topnav a {
        float: right;
        height: 70px;
        color: #2e2e33;
        padding-left: 30px;
        padding-right: 30px;
        text-decoration: none;
        font-size: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        float: right;

    }

        /* Change the color of links on hover */
        .topnav a:hover {
            color: #707070;
        }

        /* Add an active class to highlight the current page */
        .topnav a.active {
            color: #2e2e33;
        }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        display: none;
    } 




.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3rem calc((100vw - 1300px) / 2);
}

pricing-container {
    padding: 3rem calc((100vw - 1300px) / 2);
}

/* iDeal Button Styling */
#startPayment {
    background-color: #616cd6; /* iDeal blue */
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 5px;
    padding: 15px 50px; /* Adjust padding for size */
    width: 70%;
    font-size: 16px; /* Font size */
    font-family: 'Roboto', sans-serif; /* Font style */
    cursor: pointer;
    transition: background-color 0.1s ease; /* Transition effect */
    display: inline-block; /* Center button horizontally */
    text-align: center; /* Center text */
}

#startPayment:hover {
    background-color: #4a55a5; /* Darker blue on hover */
}

#startPayment:disabled {
    background-color: #a0a0a0; /* Disabled button color */
    cursor: not-allowed;
}

.column-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 30%;
    padding-left: 10%;
    padding-right: 10%

}

    .column-left h1 {
        font-size: 3rem;
    }

    .column-left p {
        font-size: 1.5rem;
        line-height: 1.5;
    }

.column-left-aligned {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center to flex-start */
    align-items: flex-start;
    padding-top: 200px; /* Adjust or remove this if needed */
    padding-left: 10%;
    padding-right: 10%;
}

.column-left-aligned h1 {
    font-size: 3rem;
}

.column-left-aligned p {
    font-size: 1.5rem;
    line-height: 1.5;
}

.text-article {
    flex-direction:initial;
    padding-top: 0px;
    align-items:start
}



.column-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 30%;
    padding-left: 10%;
    padding-right: 10%
}
.column-right h1 {
    margin-bottom: 1rem;
    font-size: 3rem;
}

.column-right p {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 1.5;
}

.shift-up-text {
    justify-content: left;
    padding: 50px;
}

.bluebackground {
    background-color: #f4f3ff;
    border-radius: 5px;
}

.column-middle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 2%;
}

    .column-middle h1 {
        margin-bottom: 1rem;
        font-size: 3rem;
    }

    .column-middle p {
        margin-bottom: 2rem;
        font-size: 1.5rem;
        line-height: 1.5;
        font-weight: normal;
    }

.column-middle-divided {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centers content horizontally */
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%
}

    .column-middle-divided h1 {
        margin-bottom: 1rem;
        font-size: 3rem;
    }

    .column-middle-divided p {
        margin-bottom: 2rem;
        font-size: 1.5rem;
        line-height: 1.5;
        font-weight: normal;
    }

.center-image {
    margin: auto;
    padding: 9px;
}

.blue-text {
    color: #262654
}

.light-blue-text {
    color: #616cd6
}

.information {
    background: #ffffff;
}

.information-container {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}


button {
    padding: 1rem 3rem;
    font-size: 1.5rem;
    border: none;
    color: #ffffff;
    background: #616cd6;
    cursor: pointer;
    border-radius: 15px;
}

    button:hover {
        background: #4a55a5;
    }

button-login {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: none;
    color: #ffffff;
    background: #616cd6;
    cursor: pointer;
    border-radius: 10px;
}

    button-login:hover {
        background: #4a55a5;
        
    }

#logOutButton:hover {
    cursor: pointer;
}

button-register {
    padding: 1.2rem 2rem;
    font-size: 1rem;
    border: none;
    color: #ffffff;
    background: #616cd6;
    cursor: pointer;
    border-radius: 7px;
    font: bolder;
}

    button-register:hover {
        background: #4a55a5;
    }

.g_id_signin {
    width: 100%; /* Adjust as needed */
    height: auto; /* Ensures it scales based on content */
    padding: 0px 0px; /* Custom padding */
    font-size: 1.6em; /* Custom font size */
    border-radius: 8px; /* Rounded corners */
}

.block-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3rem calc((100vw - 1300px) / 2);
    margin: 50px;
    overflow: hidden;
    align-content: center;
    justify-content: center;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.block {
    background-color: #b4c0fc;
    border-radius: 15px;
    width: 250px;
    height: 330px;
    padding: 30px;
    margin: 10px;
    text-align: center;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.2s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    overflow: hidden
}

    .block:hover {
        transform: translateY(-8px);
    }

    .block[name="foundation"] {
        background-color: #b4c0fc;
    }

    .block[name="disability"] {
        background-color: #f7edf2;
    }

    .block[name="hospital"] {
        background-color: #c5e8ff;
    }

    .block[name="software"] {
        background-color: #a2ddb9;
    }

.invalid {
            border-color: red;
            position: relative;
        }
        .invalid::after {
            content: "\f06a";
            font-family: FontAwesome;
            color: red;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

buttongradient {
    background: linear-gradient(-45deg, #f4c42a, #f44d4d, #616cd6, #4855b7);
    background-size: 400% 400%; /* Set background size for animation */
    animation: gradient-anim 3s ease infinite;
    padding: 1rem 3rem;
    font-size: 2rem;
    border: none;
    color: #ffffff;
    cursor: pointer;
    border-radius: 25px;
}



.hero-image {
    width: 100%;
    height: 100%;
}

.smaller-image {
    min-width: 70px;
    min-height: 70px;
    width: 60%;
    height: 70%;
}

.medium-image {
    margin-top: 10px;
    min-width: 400px;
    width: 40%;
    height: 40%;
    min-width: 300px;
    min-height: 300px
}

.logo-external {
    margin-top: 10px;
    width: 20%;
    height: 20%;
    min-width: 200px;
    min-height: 200px
}

.green {
    color: #204911;
    border-radius: 15px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #86e2ad;
    animation: wipe-in-right 1s;
    -moz-animation: wipe-in-right 1s; /* Firefox */
    -webkit-animation: wipe-in-right 1s; /* Safari and Chrome */
    -o-animation: wipe-in-right 1s; /* Opera */
}

@keyframes wipe-in-right {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

[transition-style="in:wipe:right"] {
    animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}

.sparkle-green {
    animation: fadeInUp 1s;
    -moz-animation: fadeInUp 1s; /* Firefox */
    -webkit-animation: fadeInUp 1s; /* Safari and Chrome */
    -o-animation: fadeInUp 1s; /* Opera */
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}


.blue {
    color: #262654;
    border-radius: 15px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #acb5ea;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; /* Firefox */
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -o-animation: fadein 0.5s; /* Opera */
}


.green-mark {
    position: relative;
    color: #204911
}

    .green-mark:after {
        color: #204911;
        border-radius: 15px;
        padding-left: 4px;
        padding-right: 4px;
        content: "";
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1; /* Place the pseudo element right under the content */
        top: 0;
        left: 0;
        background: #86e2ad;
        animation-name: highlight;
        animation-duration: 2s;
        animation-iteration-count: initial;
        animation-direction: alternate; /* Make the animation run back and forth */
    }

@keyframes highlight {
    0% {
        width: 0;
        opacity: 0;
    }

    20% {
        width: 10%;
        opacity: 0.5;
    }

    50% {
        width: 100%;
        opacity: 1;
    }
}


.freeform {
    width: 100%;
    height: 300p;
    box-sizing: border-box;
    border: 2px solid #cfd1d2;
    border-radius: 6px;
    color: #2e2e33;
    font-family: 'Roboto';
    font-weight: normal;
    font-size: 1.3em;
    padding: 20px;
}

.blue-border {
    border-color: #616cd6;
}

.floated {
    float: left;
}

.floated-right {
    float: right;
}

.icon-app {
    position: relative;
    height: 1.7em;
    width: 1.7em;
    margin-right: 20px;
    margin-left: 7px;
    top: 0px;
    margin-bottom: 5px;
    vertical-align: middle;
}


statisticstag {
    color: #2e2e33;
    font-family: 'Roboto';
    font-weight: normal;
    font-size: 16px;
    background-color: #bfbfbf;
    padding: 9px;
    border-radius: 8px;
    display: table-cell;
    border: none;
    height: 46px;
    width: 240px;
    margin: auto;
    text-align: left;
    display: block;
    text-decoration: none;
    line-height: 25px;
}

    statisticstag[name="moeilijke woorden"] {
        background-color: #ea947d;
    }

    statisticstag[name="verbindingswoorden"] {
        background-color: #86e2ad;
    }

    statisticstag[name="lange zinnen"] {
        background-color: #ffe67b;
    }

    statisticstag[name="opsommingen"] {
        background-color: #a2d2f9;
    }

    statisticstag[name="lange alineas"] {
        background-color: #bfbfbf;
    }

    statisticstag[name="leestijd"] {
        background-color: #9dafed;
    }


.highlightmoeilijkewoorden {
    color: #4c1d14;
    border-radius: 3px;
    background-color: #ea947d;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; /* Firefox */
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -o-animation: fadein 0.5s; /* Opera */
}

.highlightverbindingswoorden {
    color: #204911;
    border-radius: 3px;
    background-color: #86e2ad;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; /* Firefox */
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -o-animation: fadein 0.5s; /* Opera */
}

.highlightlangezinnen {
    border-radius: 3px;
    /*background-image: linear-gradient(to right,rgba(229,202,90,1), rgba(229,202,90,0));*/
    background-color: #ffe67b;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; /* Firefox */
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -o-animation: fadein 0.5s; /* Opera */
}

.highlightlangealineas {
    border-radius: 3px;
    background-color: #e8b3c7;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; /* Firefox */
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -o-animation: fadein 0.5s; /* Opera */
}

.highlightopsommingen {
    border-radius: 3px;
    background-color: #a2d2f9;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; /* Firefox */
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -o-animation: fadein 0.5s; /* Opera */
}

@keyframes fadein {
    from {
        background-color: #FFFFFF;
    }
}


@-moz-keyframes fadein { /* Firefox */
    from {
        background-color: #FFFFFF;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        background-color: #FFFFFF;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        background-color: #FFFFFF;
    }
}


.animation {
    vertical-align: sub;
    display: inline-block;
    margin-top: -.1em;
    margin-bottom: -.1em;
    border-width: 1px;
    height: 1.2em;
    color: #2e2e33;
    margin-bottom: 1rem;
    font-size: 3rem;
}

.animation-window {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.animation-gray-list {
    position: absolute;
    color: transparent;
}

.animation ul {
    position: relative;
    list-style: none;
    top: 0;
    padding: 0;
    margin: 0;
    transition: top 300ms;
}

.animation li {
    margin: 0 .2em;
    text-align: center;
}

.video {
    width: 100%;
    overflow: hidden;
    -webkit-transform: translateZ(0);
}

.footer-basic {
    padding: 40px 0;
    background-color: #ffffff;
    color: #4b4c4d;

}

    .footer-basic ul {
        padding: 0;
        list-style: none;
        text-align: center;
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 0;
    }

    .footer-basic li {
        padding: 0 10px;
        display: inline-block;
        margin-right: 10px;
    }

    .footer-basic ul a {
        color: inherit;
        text-decoration: none;
        opacity: 0.8;
    }

        .footer-basic ul a:hover {
            opacity: 1;
        }

    .footer-basic .social {
        text-align: center;
        padding-bottom: 25px;
    }

        .footer-basic .social > a {
            font-size: 24px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            border: 1px solid #ccc;
            margin: 0 8px;
            color: inherit;
            opacity: 0.75;
        }

            .footer-basic .social > a:hover {
                opacity: 0.9;
            }

    .footer-basic .copyright {
        margin-top: 15px;
        text-align: center;
        font-size: 13px;
        color: #aaa;
        margin-bottom: 0;
    }


/* Create three columns of equal width */
.columns {
    float: left;
    width: 500px;
    padding: 8px;
    padding-top: 10%;
}

/* Style the list */
.price {
    list-style-type: none;
    overflow: hidden;
    border-radius: 20px;
    border: 2px solid #eee;
    margin: 0;
    padding: 20px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #2e2e33;
    align-items: left; 
}

    /* Pricing header */
    .price .header {
        background-color: #bfbfbf;
        color: white;
        font-size: 25px;
    }

    /* List items */
    .price li {
        padding: 20px;
        text-align: left;
    }


/* The "Sign Up" button */
.button-signup {
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}







@media screen and (max-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr;
    }

    .block-container {
        grid-template-columns: 1fr;
    }

    .column-middle h1 {
        font-size: 1.5rem;
    }

    .animation {
        font-size: 1.5rem;
    }
    .freeform {
        font-size: 1,5em;

    }
    .nav a:not(:first-child) {
        display: none;
    }

}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
    .topnav a {
        display: none;
        float: right;
    }

    .topnav a.icon {
        display: flex;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
    .topnav.responsive {
        position: relative;
        height: 1000px;
        width: 100%;
    }
        /*the hamburger icon*/
        .topnav.responsive a.icon {
            float: right;
            height: 300px;

        }
        /*each menu item I think*/
        .topnav.responsive a {
            padding: 40px;
            height: 50px;
            margin-top: 40px;
            text-align: center;
            float: none;
            display: block;
            text-align: left;
            background-color: white;
            font-size: 18px;
        }
}