#Cycling {background-color: rgb(220, 245, 220);}
#Road-Trips {background-color: beige;}
#Mexico {background-color: rgb(254, 255, 203);}
#Chicago {background-color: rgb(255, 220, 220);}
#Vacations {background-color: rgb(228, 246, 255);}
#Academic {background-color: rgb(255, 255, 255);}

section.dark-mode  {
    background-color: #333 !important;
    color: #fff;
}
.left, .right {display: flex;}
.left img, .right img {
    margin: 15px;
    width: 50%;
    height: auto;
    min-width: 200px;
    min-height: 200px;
    max-height: 45dvh;
    border-radius: 10px;
    animation: fade-in linear;
    animation-timeline: view(80% 0px);
}

.section-description {
    background-color: #333;
    color: white;
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px;
    font-size: larger;
}

@media screen and (max-width: 1100px){
    .left {
    flex-direction: column;
    align-items: center;
    text-align: center;
    }
    .right {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    }
}

@keyframes fade-in {
    from {scale: .8; opacity: 0;}
    to {scale: 1; opacity: 1;}
}