/* .space-grotesk-<uniquifier> {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
} */

body{
    background-color: #d4d4bc;
    margin: 0;
    padding: 0;

    p, ul, li{
        font-size: 20px;
    }
}

header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    margin: 1%;
    background-color: #d4d4bc;
    margin: 0;
    padding: 1%;

    .header-intro{
        display: flex;
        flex-direction: row;
    }
}

.logos{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    img{
        width: 5%;
        height: 5%;
    }
}

header,
.what-how{
    font-weight: 900;
    color: #ef4623;
    text-transform: uppercase;
    font-family: "Space Grotesk", sans-serif;

    p{
        text-transform: none;
        font-weight: normal;
    }
}

details{
    min-height: 12vh;
    height: auto;
    position: relative;
    border-top: solid 0.5px;
    /* border-bottom: none; */
    padding: 1%;
    font-family: "Space Grotesk", sans-serif;



    .img-wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img{
            width: 20%;
        }

    }


}

details:first-child{
    border-top: none;

    summary{
        display: block;
    }
}

details summary:last-child{    
        display: block;
        color: #ef4623;
}

summary{
    display: flex;
    flex-direction: column;
    text-align: center; 
    font-size: 50px;
    margin-bottom: 30px;
    cursor: pointer;

    span{
        font-size: 20px;
    }
}

.wkshp-1{
    
    background-color: rgb(194, 151, 238);
}

.wkshp-2{
    background-color: rgb(92, 198, 106);
}

.wkshp-3{
    background-color: rgb(238, 117, 48);
}

.wkshp-4{
    /* background-color: rgb(241, 73, 47); */
    background-color: rgb(197, 249, 80);
}

.wkshp-5{
    background-color: #d4d4bc;
    color: #ef4623;
    min-height: auto;
}

@media (max-width: 768px) {
    header{
        font-size: 40px;

        em{
            text-align: center;
        }
    
        .header-intro{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    
        img{
            width: 20%!important;
        }
    }

    img{
        width: 70%!important;
    }

    summary{
        font-size: 30px;
/*     
        span{
            font-size: 20px;
        } */
    }

    .what-how summary{
        font-size: 40px!important;
    }
}