@keyframes banner-scroll {
    from {background-position: -400px -213.3px;}
    to {background-position: 400px 213.3px;}
}

#banner {
    width: 100%;
    height: 500px;
    padding-top: var(--header-height);
    background-color: rgb(208, 30, 30);
    background-image: url("/resources/img/BannerBackground.png");
    background-repeat: repeat;
    background-size: 800px;
    background-position: center;
    animation-name: banner-scroll;
    animation-duration: 90s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

#banner-logo {
    width: 100%;
    max-width: 400px;
    margin:20px;
}

#banner-logo g path, #logo g circle {
    transition: all 0.15s;
    transform-origin: center;
    transform: scale(100%)
}

#banner-logo g:hover[data-name="G"] path:first-child,#banner-logo g:hover[data-name="A"] path:first-child,#banner-logo g:hover[data-name="E"] path:first-child,#banner-logo g:hover[data-name="L"] path:first-child,#banner-logo g:hover[data-name="TremaLeft"] circle:first-child,#banner-logo g:hover[data-name="TremaRight"] circle:first-child{
    transition: 0s fill;
    fill: var(--hover-color);
    cursor: pointer;
}

#banner-logo g:active:not([data-name="Laurin"]) path,#banner-logo g:active circle{
    transform: scale(98%);
}

#presentation {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    flex-wrap: wrap;
}