/* CSS HEX */
/* 
--mint-green: #defffcff;
--penn-red: #960200ff;
--night: #171614ff;
--true-blue: #586ba4ff;
--atomic-tangerine: #f68e5fff;
*/

@font-face {
    font-family: 'chivo-mono'; /* Gewünschter Name */
    src: 
        url('../fonts/Chivo_Mono/ChivoMono-VariableFont_wght.woff') 
        format('woff'), 
        /* für moderne Browser */
        url('../fonts/Chivo_Mono/ChivoMono-VariableFont_wght.ttf') 
        format('truetype');
        /* für Safari, Android, iOS */
}

* {
    background-color: #171614ff;
    color: #defffcff;
    font-family: 'chivo-mono' ;
}

#introimg {
    width: 60vw;
}

#slogan {
    background-color: transparent;
    position: fixed;
    top: 10vw;
    left: 50vw;
    backface-visibility: visible;
    font-size: 8vw;
    transition: transform 0.5s ease-in-out;
}

#slogan:hover {
    color: #960200ff;
    transform: translate(0.5em);
}

#goal-carousell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.goal {
    border: #f68e5fff solid 0.5em;
    border-radius: 2rem;
    width: 23vw;
    height: 12em;
    padding: 2em;
}

.goal:hover .keyword {
    color: #586ba4ff;
}