body {
    font-family: 'Cormorant', serif;
    background: linear-gradient(to right, #44a08d, #093637);
    /* background: linear-gradient(to left, #0f2027, #203a43, #2c5364); */
}

h1 {
    font-weight: lighter;
    display: inline-block;
    margin: 0 32px 0 0;
}

h2:hover {
    color: orange;
}

.links {
    display: inline-block;
    margin: 0 32px 0 0;
    padding-left: 41rem;

}

.links li {
    display: inline-block;
}

.links a {
    font-size: 20px;
    color: black;
    text-decoration: none;
    margin: 0 8px;
}

.links a:hover {
    color: darkorange;
}

.links ul {
    padding: 0;
}

.navbar {
    margin: 32px;
}

/* a.active {
    border-bottom: 1px solid black;
} */

.gallery {
    padding: 16px;
}

.card img {
    height: 500px;
    width: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease-in-out;   
}

.card img:hover {
    opacity: 0.8;
    box-shadow: 0 6px 20px black;
    /* transform: scale(1.1); */
    transform: translateY(-5px);
    background-color: #f6f6f4;
    cursor: pointer;
}

.card {
    width: 49.75%;
    display: inline-block;
    box-sizing: border-box;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease-in-out;
}

.card h2 {
    display: inline-block;
    margin: 8px 0 16px 0;
    font-weight: 300;
}

.about {
    width: 40%;
    min-width: 600px;
    margin: 100px 0 100px 20px;
}

.about h3 {
    font-size: 30px;
    font-weight: 300;
}

.contact {
    margin-top: 100px;
}

.contact p {
    margin: 0;
    font-size: 20px;
}

.contact p:hover {
    color: orange;
}

.cta {
    border-bottom: 1px solid black;
    display: inline-block;
    padding-bottom: 8px;
    margin-top: 0;
}

@media only screen and (max-width: 1000px) {
    .card {
        width: 100%;
    }
    .about {
        margin: 100px 0 100px 100px;
    }
}

@media only screen and (max-width: 700px) {
    .card {
        padding: 0;
    }
    .gallery {
        padding: 8px;
    }
    .about {
        margin: 100px auto;
        min-width: 400px;
    }
}

@media only screen and (max-width: 400px) {
    .card {
        padding: 0;
    }
    .gallery {
        padding: 8px;
    }
    .about h3 {
        font-size: 20px;
        font-weight: 200;
    }
}