@font-face {
    font-family: Gabarito-VariableFont_wght;
    src: url(../Gabarito-VariableFont_wght.ttf);
    font-weight: 100;
    font-weight: 200;
    font-weight: 300;
    font-weight: 400;


}



body {
    font-family: Gabarito-VariableFont_wght;
    src: url(../Gabarito-VariableFont_wght.ttf);
    color: #000000;
    font-size: 14px;
    overflow-x: hidden;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.5s ease;
    background-color: #EEEAD5;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

nav a:hover {
    color: rgb(136, 111, 11);
}

.footer a:hover {
    text-decoration: underline;
}


.ideapagecontent {
    overflow-x: hidden;
    padding: 7rem 3vw 5rem 3vw;
}

.donate {
    font-weight: 600;
    padding-right: 2vw;
    font-size: 1.3rem;
    color: #5a4722;
}


.leftnav {
    display: flex;
    gap: 3vw
}

.bothnavs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;

}

nav {
    background-color: rgb(238, 234, 213, 0.8);
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2%;
    align-items: center;
    justify-self: center;
    font-size: 1.1rem;
    position: fixed;
    transition: background-color 0.3s ease;
    color: #000000;
    z-index: 1000;
}

.about,
.ourphilosophy,
.ideaspace,
.donate {
    align-self: center;
    text-align: center;
}

.logo1 {
    height: auto;
}

.logo1 svg {
    width: 4rem;
    height: 4rem;
    padding: 0.2rem 0rem 0rem 0.4rem;
}

.logo2 {
    height: auto;
}

.logo2 svg {
    width: 4rem;
    height: 4rem;
    padding: 0.2rem 0rem 0rem 0.4rem;
}

.logo1,
.logo2 {
    transition: opacity 0.4s ease;
}

ul {
    font-size: 1rem;
    font-weight: 100;
    list-style-type: circle;
}

li {
    margin: 0.3rem;
}

h1,
h3,
h4,
h5,
h3,
p {
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-weight: 200;

}

.ideapagecontent a,
h4 {
    text-decoration: underline;
    font-weight: 400;
}

.opencallimage img {
    width: 40vw;
    padding-bottom: 3rem;

}
/*
 * This CSS rule is the key to preventing the link (<a>) 
 * from taking up the full width of the screen.
 */
.image-wrapper {
    display: inline-block;
}

.opencallimage {
    display: flex;
    flex-direction: row;
    justify-self: center;
}

.fragments {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    padding-bottom: 2rem;
}

.guidelines,
.artforms,
.application {
    padding: 2rem 0rem 2rem 0rem;
}

.application h4 {
    font-size: 1rem;
    font-weight: 400;
}

@media (max-width: 920px) {

    .donate {
        font-size: 1rem;
    }


    nav {
        font-size: 1rem;
    }

}





@media (max-width: 465px) {
    nav {
        font-size: 3.5vw;

    }

    .donate {
        font-size: 3.5vw;
    }

    .opencallimage img {
        width: 100%;
        padding-bottom: 3rem;

    }

    .ideapagecontent {
        overflow-x: hidden;
        padding: 7rem 5vw 5rem 5vw;
    }

}