:root {
    --dark-blue: #333446;
    --blue: #7f8caa;
    --light-blue: #b8cfce;
    --grey: #eaefef;
}

body {
    margin: 0px;
    background-color: var(--grey);
}

.container {
    display: flex;
    height: 100vh;
}

.col-header {
    background-color: var(--blue);
}

.navbar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--blue);
}

.navbar a {
    padding: 10px;
    background-color: var(--blue);
    float: top;
    color: white;
}

.navbar a:hover {
    background-color: var(--light-blue);
}

.interactive {
    flex: 1;
    background-color: var(--grey);
    justify-content: center;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.img-wrapper {
    position: relative;
    aspect-ratio: 3/2;
    width: 60%;
    background-color: var(--light-blue);
    background-image: url("../../img/weedtree.jpg");
    background-size: cover;
    background-position: center;
}

@keyframes swipeRight {
    0% {
        transform: rotate(0deg) translateX(0) scale(1);
    }
    100% {
        transform: rotate(45deg) translateX(1000px) scale(0.3);
    }
}

.flyRight {
    animation: swipeRight 0.5s ease-in;
}

@keyframes swipeLeft {
    0% {
        transform: rotate(0deg) translateX(0) scale(1);
    }
    100% {
        transform: rotate(-45deg) translateX(-1000px) scale(0.3);
    }
}

.flyLeft {
    animation: swipeLeft 0.5s ease-in;
}

.overlay {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(183, 222, 237, 0.7);
    /* background-color: var(--blue); */
}

.overlay h1 {
    opacity: 100%;
    font-size: 20px;
    padding: 10px;
    padding-bottom: 0px;
    margin: 0px;
}

.overlay p {
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 100%;
    padding: 10px;
    text: wrap;
    margin: 0px;
}