/* || General Styles*/
* {
    box-sizing: border-box;
}

@font-face {
    font-family: auroraFont;
    src: url(riesling.ttf);
}

.libertinus-sans-regular {
    font-family: "Libertinus Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.libertinus-sans-bold {
    font-family: "Libertinus Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.libertinus-sans-regular-italic {
    font-family: "Libertinus Sans", sans-serif;
    font-weight: 400;
    font-style: italic;
}

body {
    background-color: #e4e1e7;
    font-family: "Libertinus Sans";
    margin: 0px;
    padding: 0px;
    overflow-x: auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* || SITEWIDE */
/* || Style the header */
header {
    /*background-color: #DFA4CF;
  color: black;*/
    background-color: black;
    padding: 10px;
    text-align: center;
    border: none;
}

p {
    font-size: 20px;
}

.gridContainer {
    display: grid;
    grid-template-areas:
        'ash asher ellan mae'
        'social social social social';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
    text-align: center;
}

.gridContainer a{
    grid-area: social;
}

.ashContact{
    grid-area: ash;
}

.asherContact{
    grid-area: asher;
}

.ellanContact{
    grid-area: ellan;
}

.maeContact{
    grid-area: mae;
}

/* || Nav Bar*/
.topnav {
    overflow: hidden;
    /*background-color: #090642;*/
    background-color: #DFA4CF;
}

    .topnav a {
        float: left;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 22px;
    }

        .topnav a:hover {
            /*background-color: #c3d7e4;*/
            background-color: #CE7AAE;
            color: black;
        }

        .topnav a.active {
            background-color: #4c3f87;
            /*background-color: #CE7AAE;*/
            color: white;
        }

    .topnav input {
        float: right;
        text-align: right;
        font-family: "Libertinus Sans";
        background-color: #debad4;
        padding: 8px 16px;
        margin: 6px;
        font-size: 22px;
        border: 0px;
    }

/* || Style the footer - uses a grid format*/
footer {
    /*background-color: #DFA4CF;
    color: black;*/
    background-color: black;
    color: white;
    display: grid;
    grid-auto-flow: column;
    width: 100%;
    padding: 5px;
    text-align: center;
    column-gap: 20px;
    overflow-x: auto;
    overflow-y: auto;
}

.footer-left {
    text-align: left;
    align-content: center;
}

.footer-right {
    text-align: right;
    align-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

img.gomaLogo {
    width: calc(40% - 20px);
    min-width: 275px;
    filter: invert(95%) sepia(95%) saturate(20%) hue-rotate(338deg) brightness(105%) contrast(105%);
}


div.content {
    padding-left: 10px;
    padding-right: 10px;
}


/* || GALLERY PAGE */
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
    nav, article {
        width: 100%;
        height: auto;
    }
}

div.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

div.galleryItem {
    cursor: pointer;
    max-width: 780px;
    margin: 5px;
    /*border: 1px solid #ccc;*/
    width: calc(25% - 20px);
}

    div.galleryItem img {
        width: 100%;
        max-width: 960px;
        height: auto;
        transition: 0.3s ease-in-out;
    }

        div.galleryItem img:hover {
            border: 1px solid #777;
            transform: scale(1.02);
            opacity: 0.7;
            background: rgba(223, 164, 207, 0.5);
        }

    div.galleryItem div.caption {
        padding: 15px;
        text-align: center;
    }

    div.galleryItem div.captionLeft {
        text-align: right;
    }

@media only screen and (max-width: 768px) {
    div.galleryItem {
        width: calc(50% - 20px);
    }

    div.galleryItem img {
            width: calc(50%-20px);
            height: auto;
    }

    .modal-content {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    div.galleryItem {
        width: calc(100% - 20px);
    }

        div.galleryItem img {
            width: calc(100% - 20px);
        }
}

/* || IMAGE MODAL */
.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.733);
    margin-top: -1px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    animation: zoom 0.3s ease-in-out;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.modal img {
    max-height: 90%;
    width: 50%;
    object-fit: cover;
}

.closeBtn {
    color: rgba(255, 255, 255, 0.4);
    font-size: 25px;
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

    .closeBtn:hover {
        color: rgb(255, 255, 255);
    }