hr{
    background: url('/assets/img/divider14.gif') no-repeat center;
    display:block;
    border:0;
    height:16px;
    width:560px;
    max-width:80vw;
    image-rendering: pixelated;
    background-size: 100% 100%;
}

.banner{
    text-align:center;
}

.banner img{
    width: clamp(min(500px, 90vw), 60vw, max(80ch, 2400px));
    height:auto;
    filter: drop-shadow(0 0 0 light-dark(white, lightblue));
    transition: filter 2s ease-out;
}

.banner .bannerImage{
    transition: filter 4s ease-in;
}

.banner a:focus{
    filter: drop-shadow(0 0 4rem light-dark(blue, lightblue));
}

.banner img:hover{
    filter: drop-shadow(0 0 4rem light-dark(blue,rgb(207, 139, 255)));
}

.banner a:hover{
    filter: drop-shadow(0 0 8rem light-dark(lightblue, rgb(203, 9, 9)));
}

.banner img:active{
    filter: drop-shadow(0 0 4rem light-dark(lightblue,red));
}

.banner a:active{
    filter: drop-shadow(0 0 8rem light-dark(darkblue, lightblue));
}

.caption{
    padding-top: 2rem;
}

.highlighted-projects{
    text-align:center;
}

.highlighted-projects h2{
    padding-bottom: 1rem;
}

.highlighted-projects hr:first-of-type{
    margin-top: 5rem;
    margin-bottom: 1rem;
}
.highlighted-projects hr:last-of-type {
    margin-top: 1rem;
    margin-bottom: 5rem;
}

.gif-buttons{
    /* render images pixelated */
    image-rendering: pixelated;
    text-align:center;
    padding-bottom: 4rem;
}
/* 1rem padding-right for all children excecpt the last one */
.gif-buttons > *:not(:last-child){
    padding-right: 4px;
}
.gif-buttons a:hover{
    cursor: pointer;
}