html, body{
    margin: 0;
    color: #1e1710;
    font-family: 'Lusitana';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

H1{
    font-weight: 400;
    color:rgb(16, 30, 19);
    text-align: center;
}


.payoff{
    font-size: 2rem;
    text-align: center;
    padding-bottom: 2rem;
}

.emphasis{
    color:rgb(16, 30, 19);
    font-size: 1.5rem;
    text-align: center;
}

h3, h3:visited{
    color:rgb(16, 30, 19);
    font-weight: 400;
}

    #showhide{
        display: none;
    }


    #hero-icon-container{
        width: 125px;
        height: 125px;
        margin: 0 auto;
        padding-top: 3rem;
        padding-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #support-hero-icon-container{
        width: 75px;
        height: 75px;
        margin: 0 auto;
        padding-top: 3rem;
        padding-bottom: .5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-icon{
        display: inline-block;
        font-size: 90px;
        margin-top: 14.77%;
    }

    .smaller{
        font-size: 70px;
    }

  .rotatecw{
        display: inline-block;
        animation: cw 60s infinite ease-in-out;
    }

    .rotateccw{
        display: inline-block;
        animation: ccw 60s infinite ease-in-out;
    }

    @keyframes cw {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes ccw {
        from {
          transform: rotate(360deg);
        }
        to {
          transform: rotate(0deg);
        }
      }



.content{
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
    padding: 1rem 2rem;
}

    .content a, .content a:visited{
        color: inherit;
    }

    .no-decoration{
        text-decoration: none;
    }

    .page-end{
        margin-top: 3rem;
    }

    .introduction{
        padding-top: 3rem;
        min-height: 90vh;
        display: flex;
        align-items: center;    
    }



nav{
    height: 4rem;
}

header{
    margin: 0 auto;
}

    header h1{
        font-size: 4rem;
        text-align: center;
        line-height: 82%;
        padding-right: 1.1rem;
    }

    .opzij{
        margin-right: -.65em;
    }

main{
    text-align: center;
}

.projectview{
    padding-top: 2rem;
    margin: 2rem 0;
    width: 100%;
    background: #fcfcfc;
}

.projects-container{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
    padding: 3rem 2rem;
    padding-bottom: 0;
}

    .scrollpane{
        margin: 0 auto;
        overflow-x: scroll;
        padding: 0 1rem;
    }

        .scrollpane::-webkit-scrollbar {
            height: 50px;
            width: 25px;
        }
        
        .scrollpane::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 25px;
            border: 20px #fcfcfc solid;
        }

    .project{ 
        display: block;
        width: 300px;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
        margin: 1rem;
    }

        .begin{
            margin-left: auto;
        }

        .end{
            margin-right: auto;
            padding-right: 2.5rem;
        }



    .project:hover{
        transform: translateY(-5px);
    }

    .project-photo{
        width: 100%;
        aspect-ratio: 1 /1;
        object-fit: cover;
        margin: 0;
        padding: 0;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 20px 0 rgba(0, 0, 0, 0.05);
    }



    
   .partnerview{
    width: 100%;
    margin-top: 7rem;
    background: #fcfcfc;
   }

    .partnerview p{
        opacity: 0.
    }
    
    .partners{
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
        align-items: center;
        //flex-shrink: 1;
        flex-wrap: wrap;
    }

    .partner{
        max-width: 100px;
        aspect-ratio: 1 / 1;
        padding: 1rem;
    }

    .partnerimg{
        width: 100%;
        aspect-ratio: 1 / 1;
        display: block;
        object-fit: contain;
    }

    footer{
        //max-width: 600px;
        margin: 0 auto;
        text-align: center;
        padding: 5rem 0;
        background: #fcfcfc;
    }
    
    footer a, footer a:visited{
        color: inherit;
    }
    
    footer p{
        opacity: 0.5;
    }

    @media screen and (max-width: 600px){
        header h1{
            font-size: 3rem;
            padding-top: 2rem;
        }

        #hero-icon-container{
            margin-bottom: -3rem;
        }

        .hero-icon{
            font-size: 70px;
        }

        .smaller{
            font-size: 55px;
        }

        .content{
            font-size: 1.1rem;
            padding: 1rem 1.5rem;
        }

        .payoff{
            margin-top: -.6rem;
            font-size: 1.3rem;
            margin-bottom: 1rem !important;
        }

        #showhide{
            display: inline;
        }

        .introduction{
            padding-top: 2rem;
        }

        .introduction p{
            
            margin-bottom: 3rem;
        }
        
        .project-content{
            font-size: 1rem;
        }

        .project-content h2{
            font-size: 3rem !important;
        }

        .Budgetteermeneer h2{
            text-shadow: -2px 2px 0px #b67a5c; 
        }

        .Friendwallet h2{
            font-size: 2.6rem !important;
        }
    }

    @media screen and (max-width: 320px){
        header h1{
            font-size: 3rem;
        }
        
        .project-content h2{
            font-size: 2.5rem !important;
        }
    }

    /*

    .project{
    //height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}
    .project-content{
        position: relative;
        max-width: 700px;
        margin: 0 auto;
        font-size: 1.2rem;
        padding: 2.6rem 1rem 2rem 1rem;
    }

    .project a, .project a:visited{
        color: inherit;
    }

    .project-content p{
        padding: 1rem;
    }

    .project-content h2{
        margin: 0;
        padding-top: 1rem; 
    }

        .Budgetteermeneer{
            background:#ffb388;
            font-family: 'Open Sans', sans-serif;
            font-weight: 500;
        }

            .Budgetteermeneer h2{
                font-size: 5rem;
                line-height: 1.15;
                color: #ff84e2;
                -webkit-text-stroke: .026em #322a25;
                text-shadow: -3.5px 2.5px 0px #b67a5c; 
                font-family: 'Abril Fatface';
                font-weight: 400;
                font-style: italic;
                transform: rotate(-3deg);  
            }
            
        .Spaarlokaal{
            background-color: #f9fdff;
            box-sizing: border-box;
            color: #3C3091;
            font-family: 'ABeeZee';
            background-image: linear-gradient(rgb(248, 211, 211) 1px, transparent 1px), linear-gradient(90deg, rgb(248,211,211) 1px, transparent 1px);
            background-size: 10rem 10rem;
            background-position: center;
        }
            .Spaarlokaal h2{
                font-size: 4rem;
                color: #FF0808;
                text-shadow: -2px 2px 0px rgba(60, 48, 145, 1);
            }

        .Friendwallet{
            background:rgb(42, 56, 255);
            font-family: 'Lato';
        }    

            .Friendwallet .project-content{
                height: 80vh;
                display: flex;
                align-items: center;
                background: #fff;
                border-radius: 30px;
                border: 1rem solid rgb(220,226,255);
                box-sizing: border-box;
                padding: 2.6rem 0rem 2rem 0rem;
            }

            .Friendwallet h2{
                color: rgb(42, 56, 255);  
                font-family: 'ABeeZee';
                font-size: 4rem;
            }

            #notch{
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 0px 0px 20px 20px;
                background: rgb(220,226,255);
                width: 40%;
                height: 4vh;
            }

            */