:root {
    --highlight-color: rgb(191, 235, 255);
}
html {
    background-image: url(Blue_background.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: Inter;
}
p {
    font-weight: 400;
}
li {
    font-weight: 400;
}
body {
    padding: 0;
    margin: 0;
}
nav {
    font-family: Comfortaa;
    z-index: 100;
    font-weight: 600;
    background-color: rgb(80, 80, 238);
    border-bottom: 5px solid rgb(27, 27, 128);
    color: white;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;

    transition: transform 0.3s ease;
    will-change: transform;
}
.shown {
    transform: translateY(0);
}
.hidden {
    transform: translateY(-100%);
}
#navtitle {
    align-self: center;
    justify-self: center !important;
    font-size: 2rem;
    text-align: center;
    margin: auto;
    padding: 15px 0;
}
#navoptions {
    display: grid;
    font-size: 2rem;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2vw;
    margin: auto;
    padding: 8px 15px 8px 0;
}
nav li {
    list-style: none;
    margin: auto;
    transition: transform 0.2s ease;
    will-change: transform;
    transform: scale(100%);
}
nav li:hover, #detailgrid a:hover{
    color: var(--highlight-color);
    transform: scale(120%);
}

#booking {
    color: white;
    background-image: url(Purple_background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
}
#booking p {
    font-size: clamp(1.6rem, calc(0.4rem + 2vw), 1.8rem);
    text-align: center;
    width: 90%;
    margin: auto;
}
#booking h2 {
    text-align: center;
    font-size: clamp(2.4rem, calc(1rem + 2vw), 5rem);
    font-weight: 700;
}
#booking a {
    display: inline-block;
    color: white;
    font-weight: 600;
    text-decoration: underline;
    transition: transform 0.2s ease;
    will-change: transform translate;
    transform: scale(100%) translateX(0);
}
#booking a:hover {
    transform: scale(120%) translateX(8%);
    color: var(--highlight-color);
}

@media only screen and (max-width: 799px) { 
    html {
        background-image: url(Blue_background_small.jpg);
    }
    nav {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        font-size: clamp(0.2rem, calc(0.6rem + 3vw), 5rem);
    }
    #navtitle, #navoptions {
        font-size: clamp(0.2rem, calc(0.6rem + 3vw), 5rem);
        column-gap: 15px;
        padding-left: 0;
        padding-right: 0;
    }
}