:root {

    --primary-color-blue: #021373;
    --primary-color-yellow: #BF971F;
    --primary-color-brown: #261403;
    --background-color-blue:  #d8ddf3;
    --text-color-blue: #010d2f;
}

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

html {
    font-size: 77.5%;
    line-height: 2;
}

.nav {
    background-color: var(--primary-color-blue);
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6rem;
    padding: 1.7rem;
    border-bottom: 1px solid var(--primary-color-brown);
    text-align: end;
}
.logo-container {
    display: flex;
    align-items:flex-start;
}
.logo-container .nav-title {
    margin: auto 0;
    padding: auto 0;
}
.logo {
    margin-top: 0.6rem;
    width: 5rem;
    height: 5rem;
}
.active {
    background-color: var(--primary-color-brown);
}
.nav-title {
    color: var(--primary-color-yellow);
    font-size: 2.2rem;
    text-decoration: none;
    padding: 1rem 1.5rem;
    font-family:fantasy, sans-serif;
    font-weight: 100;
}
.nav-title:hover:not(h1[class="nav-title"]) {
    background-color: var(--primary-color-brown);
}

body {
    background-color: var(--background-color-blue);
    color: var(--text-color-blue);
}
/* Home */
.home-background {
    padding-top: 9.5rem;
    width: 100%;
    background-color: var(--primary-color-blue);
}


.type{
    margin: auto;   
    width: 30rem;
    padding: 0.7rem;
    background-color: var(--primary-color-yellow);
    font-size: 2rem;
    font-weight: 600;
    border-radius: 2rem; ;
}
.type p {
    flex: 1;
    text-align: center;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.home-background h1, .about-title {
    color: var(--primary-color-yellow);
    font-size: 4rem;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    padding: 4rem 0rem;
}

.description, .description2 {
    color: var(--background-color-blue);
    margin-right: 9rem;
    margin-left: 9rem;
    font-size: 2rem;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    padding-bottom: 4rem;
}
a {
    font-size: medium;
    text-decoration: none;
}
.entertainment {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-evenly;
    width: 100%;
}
.entertainment .cinema, .entertainment .music, .entertainment .art {
    border: 1px solid var(--primary-color-brown);
    padding: 2rem;
}
.entertainment .cinema h1, .entertainment .music h1, .entertainment .art h1 {
    background-color: var(--primary-color-brown);
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
    padding: 1rem;
}
.entertainment .cinema h2, .entertainment .music h2, .entertainment .art h2 {
    color: var(--text-color-blue);
    font-size: 2.5rem;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    margin-bottom: 1rem;
}
.entertainment .cinema p, .entertainment .music p, .entertainment .art p {
    color: var(--text-color-blue);
    font-size: 1.8rem;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
}
.entertainment-image {
    margin-top: 1.5rem;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 28.5rem;
    object-fit: cover;
}

.why-this-place {
    background-color: var(--primary-color-brown);
    width: 100%;
    padding: 4rem 0;
}
.why-this-place h3 {
    color: var(--primary-color-yellow);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 2.5rem;
    margin-left: 3rem;
}
.why-this-place p {
    color: var(--background-color-blue);
    font-size: 1.6rem;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin-top: 1rem;
    margin-left: 3rem;
    margin-right: 3rem;
}

/* About */

.about-container {
    background-color: var(--primary-color-brown);
    width: 50%;
    margin: 4rem auto;
    padding: 2rem;
    border-radius: 4rem;
}
.about-title {
    margin: 0 5rem;
}
hr {
    margin-top: 2rem;
    width: 12rem;
    margin-left: 6rem;
    border: 3px solid var(--primary-color-yellow);
    border-radius: 2rem;
    box-shadow: 0 0 1rem var(--primary-color-yellow);
}
.watch, .rating, .the-vibe, .for-who, .the-basics, .when, .map {
    margin-top: 3rem;
    margin-left: 6rem;
    width: 12rem;
    padding: 0.7rem;
    text-align: center !important;
    background-color: var(--primary-color-yellow);
    font-size: 1.6rem;
    font-weight: 600;
    border-radius: 2rem; ;
    border: 0.2rem solid var(--primary-color-brown);
    box-shadow: inset 0 0 0.3rem var(--primary-color-brown);
}
.watch p, .rating p, .the-vibe p, .for-who p{
    flex: 1;
    text-align: center;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: var(--primary-color-brown);
}
.watch-description h2, .rating-description h2, .the-vibe-description h2, .for-who-description h2, .the-basics-description h2, .when-description h2, .map-description h2 {
    color: var(--primary-color-brown);
    font-size: 2.5rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 3rem 6rem 2rem 6rem;
    
}
.watch-description p, .rating-description p, .the-vibe-description p, .for-who-description p, .when-description > p, .map-description p {
    color: var(--text-color-blue);
    font-size: 2rem;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: auto 6rem;
}
video {
    display: block;
    margin: 3rem auto;
    width: 90%;
    height: 40rem;
    border: none;
    border-radius: 2rem;
}
.rating-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 3rem 6rem;
}
.who-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 3rem 6rem;
}
.rating-box h3, .who-container h3 {
    color: var(--primary-color-brown);
    font-size: 2rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.star-box-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rating-box-box, .who-container{
    box-shadow: inset 0 0 0.5rem var(--primary-color-yellow);
    border: 0.2rem solid var(--primary-color-brown);
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgb(240, 237, 226);
}
.star-box, .not-star-box {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 1rem;
    background-color: var(--primary-color-yellow);
    border-radius: 0.4rem;
    border: 0.1rem solid var(--primary-color-brown);
    box-shadow: inset 0 0 0.2rem var(--primary-color-brown);

}
.not-star-box{
    background-color: grey;
    box-shadow: inset 0 0 0.2rem var(--primary-color-yellow);
}
.rating-box-box p, .who-container p {
    color: var(--text-color-blue);
    font-size: 1.6rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-top: 1rem;
    text-align: left !important;
    margin: 1rem 0 0 0;
}
.word-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 2rem;
    margin: 0 4rem 4rem 4rem;
}
.word-container .blue, .word-container .white, .word-container .yellow {
    border: 0.2rem solid var(--primary-color-brown);
    padding: 1rem;
    border-radius: 1rem;
}
.word-container .blue {
    background-color: var(--primary-color-blue);
    box-shadow: inset 0 0 0.5rem var(--background-color-blue);
}
.word-container .white {
    background-color: rgb(240, 237, 226);
    box-shadow: inset 0 0 0.5rem var(--primary-color-yellow);
}
.word-container .yellow {
    background-color: var(--primary-color-yellow);
    box-shadow: inset 0 0 0.5rem var(--primary-color-brown);
}
.word-container .blue p, .word-container .white p, .word-container .yellow p {
    font-size: 1.6rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
}
.word-container .blue p {
    color: var(--background-color-blue);
}
.word-container .white p {
    color: var(--primary-color-brown);
}
.word-container .yellow p {
    color: var(--primary-color-brown);
}

/* Visit */
.info-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: auto 6rem;
}
.info-box {
    border: 0.2rem solid var(--primary-color-brown);
    padding: 0 2rem 1rem 2rem;
    border-radius: 1rem;
    background-color: rgb(240, 237, 226);
    box-shadow: inset 0 0 0.5rem var(--primary-color-yellow);
}
.info-box h3 {
    font-size: 2rem;
    padding: 0.5rem 0;
    
}
.info-box h4 {
    font-size: 1.8rem;
    padding: 0.5rem 0;
}
.info-box p, .info-box a[class="location"]{
    font-size: 1.6rem;
    padding: 0.5rem 0;
    text-decoration: none;
    color: var(--primary-color-brown);
}
.when-container {
    margin: 1.5rem 6rem 2rem 6rem;
    display: grid;
    grid-template-columns: 1fr;
}
.when-info {
    display: grid;
    grid-template-columns: 5rem 1fr;
    border-bottom: 0.1rem solid var(--primary-color-brown);
    padding: 1rem;
}
.day h3{
    z-index: -1;
    position: absolute;
    background-color: var(--primary-color-yellow);
    border: 0.1rem solid var(--primary-color-brown);
    text-align: center;
    width: 8rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--primary-color-brown);
    font-size: 1.8rem;
}
.day h3[class="events"]{
    background-color: var(--primary-color-blue);
    color: var(--primary-color-yellow);
}
.what-they-do h3, .detail{
    margin-left: 8rem !important;
}
.what-they-do h3 {
    color: var(--primary-color-brown);
    font-size: 1.8rem;
}
.detail {
    margin-top: 1rem;
    font-size: 1.8rem;
}

.live-map {

    height: 40rem;
    border: none;
}
.end {
    background-color: var(--primary-color-brown);
    width: 100%;
    text-align: center;
}
.end h3 {
    font-size: 2.2rem;
    padding: 2rem;
    color: var(--primary-color-yellow);
}
.end p {
    font-size: 1.8rem;
    color: var(--background-color-blue);
    padding-bottom: 2rem;
}



@media screen and (max-width: 768px ) {
    html {
        font-size: 65%;
    }
    .about-title {
        margin: 0 1rem;
    }
    .home-background h1 {
        font-size: 3rem;
    }
    .description, .description2 {
        margin: 0 4rem;
    }
    .entertainment {
        grid-template-columns: 1fr;
    }
    .entertainment .cinema, .entertainment .music, .entertainment .art {
        margin-bottom: 0rem;
    }
    .entertainment-image {
        height: 20rem;
    }
    .why-this-place h3 {
        margin-left: 4rem;
    }
    .why-this-place p {
        margin: 4rem;
    }
    .watch, .the-basics, .when, .map {
        margin-left: 4rem;
    }
    hr {
        margin-left: 4rem;
    }
    .watch-description h2, .the-basics-description h2, .when-description h2, .map-description h2 {
        margin: 3rem 4rem 2rem 4rem;
    }
    .watch-description p, .when-description p, .map-description p {
        margin: auto 4rem;
    }
    .rating {
        margin-left: 4rem;
    }
    .rating-description h2 {
        margin: 3rem 4rem 2rem 4rem;
    }
    .rating-description p {
        margin: auto 4rem;
    }
    .rating-box, .info-container, .when-container {
        margin: 3rem 4rem;
    }
    .rating-box-box p{
        margin: 1rem 0 0 0;
    }
    .the-vibe {
        margin-left: 4rem;
    }
    .the-vibe-description h2 {
        margin: 3rem 4rem 2rem 4rem;
    }
    .the-vibe-description p {
        margin: auto 4rem;
    }
    .word-container {
        margin: 0 1rem 4rem 1rem;
    }
    .for-who {
        margin-left: 4rem;
    }
    .for-who-description h2 {
        margin: 3rem 4rem 2rem 4rem;    
    }
    .for-who-description p {
        margin: auto 4rem;
    }
    .who-container {
        margin: 3rem 4rem;
    }
    .who-container p {
        margin: 1rem 0 0 0;
    }
}

@media screen and (max-width: 600px  ) {
        html {
            font-size: 57.5%;
        }
        .nav-title {
            font-size: 1.8rem;
            margin: 0;
            padding: 0.7rem;
        }
        .logo {
            margin-top: 0.2rem;
        }
        .about-title {
        margin: 0;
    }
        .description, .description2 {
            margin: 2rem;
        }
        .why-this-place h3 {
            margin: 2rem;
        }
        .why-this-place p {
            margin: 2rem;
        }
        .watch-description h2 {
            margin: 3rem 2rem 2rem 2rem;
        }
        .watch-description p {
            margin: auto 2rem;
        }
        .watch {
            margin-left: 2rem;
        }
        .rating, .the-basics, .when, .map {
            margin-left: 2rem;
        }
        hr {
            margin-left: 2rem;
        }
        .rating-description h2, .the-basics-description h2, .when-description h2, .map-description h2 {
            margin: 3rem 2rem 2rem 2rem;
        }
        .rating-description p, .the-basics-description p, .when-description p, .map-description p {
            margin: auto 2rem;
        }
        .rating-box, .info-container, .when-container {
            grid-template-columns: 1fr;
            margin: 3rem 2rem;
        }
        .detail {
            margin-right: 1rem;
            padding-right: 0;
        }
        .when-info {
            padding-right: 0;
        }
        .rating-box-box p, .who p {
            margin: 1rem 0 0 0;
        }
        .the-vibe {
            margin-left: 2rem;
        }
        .the-vibe-description h2 {
            margin: 3rem 2rem 2rem 2rem;
        }
        .the-vibe-description p {
            margin: auto 2rem;
        }
        .word-container {
            margin: 0 0 4rem 0;
        }
        .for-who {
            margin-left: 2rem;
        }
        .for-who-description h2 {
            margin: 3rem 2rem 2rem 2rem;    
        }
        .for-who-description p {
            margin: auto 2rem;
        }
        .who-container {
            margin: 3rem 2rem;
        }
        .who-container p {
            margin: 1rem 0 0 0;
        }
        .info-box p, .info-box a[class="location"]{
            margin: 0;
        }
}