@import url('https://fonts.googleapis.com/css2?family=Allura&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

/* VARIABLES */
:root {
    --FONT: "Poppins", sans-serif;
    --FONT-TITLE: "EB Garamond", serif;
    --FONT-S: 0.7rem;
    --SCROLL-MARGIN-TOP: 50px;
    --TEXT-MAGIN: 0 3rem;
}


/* UTILITY CLASS */
.nowrap {
    white-space: nowrap;
}

.spacer {
    height: 50px; 
}

/* GENERAL STYLES */
html {
    scroll-behavior: smooth;
    position: relative;
  }

body {
    font-family: var(--FONT);
    height: 100%;
    display: flex;
    flex-direction: column;
    /* flex-flow: wrap; */
    background: linear-gradient(to left, rgb(254, 250, 224), white);
}

.cover {
    background-image: url(/img/functionhall.jpg);
    background-size: cover;
    height: 17rem;
    background-position: center center;
}

.cover h1 {
    text-align: center;
    color: rgb(241, 237, 231);
    text-shadow: 2px 2px 5px black;
    font-family: "Allura", serif;
    font-size: 3.5rem;
    position: relative;
    top: -200px;
    animation: showWelcome 2s ease-in-out 1s forwards;
}

/* NAV */
.nav {
    display: flex;
    justify-content: space-evenly;
    font-family: var(--FONT);
    font-size: 0.85rem;
    padding: 0.3rem;
    background-color: rgb(212, 163, 115);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: #000000;
    box-shadow: 0 8px 6px -5px #333;
}

.nav a:link,
.nav a:visited {
    color: rgb(233, 237, 201);
    text-decoration: none;
}

.nav a:hover,
.nav a:focus {
    color: black
}

.nav a:active {
    color: rgb(112, 124, 71);
}

/* PARAGRAPHS */
.mensahe {
    max-width: 800px;
    margin: 0 auto;
}

.mensahe h2,
.about h2,
.contact h2,
.amenities h2 {
    font-family: var(--FONT-TITLE);
    text-align: center;
}

.mensahe p,
.about p,
.contact p,
.contact .top {
    font-family: var(--FONT);
    font-size: var(--FONT-S);
    font-weight: 300;
    align-content: center;
    text-align: center;
}

.mensahe p {
    margin: var(--TEXT-MAGIN);
}

.location {
    color: inherit;
}

/* ABOUT */
.about {
    scroll-margin-top: var(--SCROLL-MARGIN-TOP);
    max-width: 800px;
    margin: 0 auto;
}

.about div {
    display: flex;
    flex-direction: row;
    margin: var(--TEXT-MAGIN);
    padding: 0.7rem;
    box-shadow: 1px 1px 7px 1px rgb(156, 148, 148);
    background: white;
    text-align: center;
    align-items: center;
}

/* AMENITIES */
.amenities {
    place-items: center;
    scroll-margin-top: var(--SCROLL-MARGIN-TOP);
    margin: 0 3rem;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(9, auto);
    width: 700px;
    align-content: center;
    justify-content: center;
    row-gap: 7rem;
}

.grid-item {
    padding: 0.75rem;
    text-align: center;
    align-content: center;
    font-family: var(--FONT);
    font-weight: 300;
    font-size: var(--FONT-S);
    list-style: none;
    width: 100%;
    height: 300px;
     /* Ensures the item fill the grid cell */
    /* Adjust the height as needed */

}

.grid-item ul {
    list-style: none;
    line-height: 1.2rem;
}

.grid-item strong{
    font-family: "Allura", serif;
    font-size: 2rem;
}

.pictures {
    transition: box-shadow 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    /* provide effects for the hover, it will fade out immediately if placed this code on hover */
    border-radius: 0.5rem;
    box-shadow: 0px 10px 20px rgba(109, 101, 101, 0.5);
}

.pictures img {
    width: 100%; 
    height: 100%;
    /*Ensures the image fit horizontally */
     /*Ensures the image fit Vertically */
    object-fit: cover; /*Maximizes the image to cover the container area*/
}


.pictures:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
    transform: scale(1.065);
}

/* CONTACT */
.contact {
    scroll-margin-top: var(--SCROLL-MARGIN-TOP);
}

.contact a {
    font-size: 1.4rem;
}

.offscreen {
    visibility: hidden;
}

.messanger,
.facebook,
.top {
    text-decoration: none;
    color: black;
}

.facebook:hover, 
.messanger:hover,
.top:hover,
.facebook:active, 
.messanger:active,
.top:active {
    color: #0099FF;
}

/* ANIMATION */
@keyframes showWelcome {
    0% {
        top: -20px; 
    }

    100% {
        top: 20px;
    }
}

/* SCREEN SIZE APPEARANCE */
@media screen and (max-width: 700px) {
    .about div {
        display: flex;
        flex-flow: column wrap;
    }

    .imglogo {
        width: 12.5rem;
        height: 10rem;
    }

    
    .collage { /* for order 13/14 and 16 */
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .collage img { /* for order 13/14 and 16 */
        height: 8.5rem;
        width: 8.5rem;
    }

    .offscreen { /* for order 13/14 and 16 */
        visibility: unset;
    }

    .moveup { /* for order 13/14 */
        position: absolute;
        top: 2rem;
        left: 2rem;
    }

    .movedown { /* for order 13/14 */
        position: absolute;
        bottom: 2rem;
        right: 2rem;
    }

    :root {
        --FONT-S: 0.75rem;
    }

    /* FLEX TRIAL */

    .grid-container {
        display: flex;
        flex-flow: column nowrap;
        width: 350px; /*350px*/
        row-gap: 0;
        margin: 0 auto;
        max-width: 100%;
        justify-content: center;
    }

    .grid-item {
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    /* explicit set and changing orders to fit screen properly*/
    .grid-item:nth-child(1) { order: 2; }
    .grid-item:nth-child(2) { order: 1; }
    .grid-item:nth-child(3) { order: 3; }
    .grid-item:nth-child(4) { order: 4; }
    .grid-item:nth-child(5) { order: 6; }
    .grid-item:nth-child(6) { order: 5; }
    .grid-item:nth-child(7) { order: 7; }
    .grid-item:nth-child(8) { order: 8; }
    .grid-item:nth-child(11) { order: 11; }
    .grid-item:nth-child(12) { order: 12; }
    .grid-item:nth-child(14) { order: 13; }
    .grid-item:nth-child(13) {
        order: 14;
        position: relative;}
    .grid-item:nth-child(15) { order: 15; }
    .grid-item:nth-child(16) { order: 16; }
    .grid-item:nth-child(9) { order: 10; }
    .grid-item:nth-child(10) { order: 9; }
    .grid-item:nth-child(17) { order: 18;}
    .grid-item:nth-child(18) { order: 17;}

}