body {
    scroll-behavior: smooth;
    font-family: "Plus Jakarta Sans Regular", sans-serif;
}

/*body > *:not(header) {*/
/*    background-color: #fafafa;*/
/*}*/

#title {
    text-align: center;
    color: black;
    font-size: 4rem;
    margin: 2.5rem 0rem 0rem 0rem;
    padding: 1.5rem 0rem 1.5rem 0rem ;
}

#accommodations-container {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    gap: 2rem; /* 2vw to rem */
    padding: 0rem 0rem 2rem 0rem;
    width: 100%;
}

.hotel {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background-color: #fff;
    border-radius: 2rem; /* 2vw to rem */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03);
    /* max-width: 54rem; */
    /*max-width: 55%;*/ /*If the hotel div is inside an anchor the width isn't the page's width but the anchor's width */
    width: 100%; /* Ensure it spans the full width within the max-width */
}

.hotel:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.3s ease-in-out;
}

.hotel img{
    display: inline-block;
    max-height: 13.5rem;
    max-width: 100%;
    /* object-fit: cover; */
    border-radius: 2rem 0rem 0rem 2rem; /* 2vw to rem */
}

.hotel h1 {
    display: inline;
    margin: 0.25rem 0rem 0.4rem 0rem;
    /* padding: 0.5vw 0vw; */
    font-size: 2rem;
}

.description {
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
}

.description p {
    font-size: 1rem;
}

.custom-anchor {
    text-decoration: none;
    color: inherit;

    /*display: block;*/
    max-width: 55%;
    width: 100%;
}

a:hover {
    cursor: pointer;
}

/*---------------------------*/
/*source: https://www.sliderrevolution.com/resources/css-star-rating/  */
:root {
    --star-size: 1.2rem;
    --star-color: #fff;
    --star-background: #808080;
  }
  
  .Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    line-height: 1;
    /*margin-left: auto;*/
    padding-top: 1rem;
    
    &::before {
      content: '★★★★★';
      letter-spacing: 3px;
      background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px){ /* tablet */
    #title {
    }
    
    .custom-anchor {
        max-width: 90%;
        /* background-color: yellow; */
    }
}

@media screen and (max-width: 768px){ /* mobil */
    #title {
        font-size: 3rem;
        /* background-color: orange; */
    }

    .custom-anchor {
        max-width: 90%;
        max-height: 7rem;
    }
    .hotel h1 {
        font-size: 0.9rem;
        margin-right: 0.5rem;
    }
    .hotel img {
        max-height: 6rem;
    }
    .hotel p {
        font-size: 0.5rem;
    }

    :root {
        --star-size: 0.7rem;
    }
    .Stars {
        padding-top: 0.5rem;
    }
    .description {
        padding-left: 1.5rem;
    }
}