:root {
    --primary-color: #21233C;
    --secondary-color: #9191c8;
    --secondary-color-translucent: #9191c858;
    --secondary-color-dark: #5b5b93;
    --text-color: #151934;
    --reverse-text-color: #e2e5ff;
    --accent-color-1: #93b0ff;
    --accent-color-2: #9961a5;
    --accent-color-2-light: #bf7fce;
    --background-color: #c9c9ff;
    --spacing: 0.5em;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Optima, 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    background-color: var(--background-color);
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
}

.header-container  { grid-area: header; }
.nav-container     { grid-area: nav; }
.content-container { grid-area: main; }
.footer-container  { grid-area: footer; }

.header-container, .footer-container {
    padding: var(--spacing);
}

.header-container {
    background-color: var(--primary-color);
    background-image: url(images/pexels-pixabay-433155-stars-only.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    opacity: 0.92;
    color: var(--secondary-color);
}

.nav-container {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(var(--primary-color), rgba(0, 0, 0, 0))
}

#about-section {
    grid-area: 'about';
}

#packages-section {
    grid-area: 'packages';
}

#contact-section {
    grid-area: 'contact';
}

.content-container {
    color: var(--text-color);
    display: grid;
    grid-template-areas:
        "about"
        "packages"
        "contact";
}

.footer-container {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    margin-top: var(--spacing);
}

.destination-name {
    font-family: 'Lucida Calligraphy', Geneva, Verdana, sans-serif;
    text-align: center;
    margin: var(--spacing);
}

.destination-name-large {
    font-size: 2em;
    padding: var(--spacing);
}

#toggle {
    display: none;
}

.menu-hamburger {
    display: flex;
    cursor: pointer;
    margin-left: auto;
    padding: var(--spacing);
    z-index: 1;
    background-color: var(--primary-color);
    border-radius: 50%;
    border: 1px solid var(--background-color);
    margin-top: var(--spacing);
    margin-right: var(--spacing);
}

.hamburger {
    height: 1.3em;
}

.menu-container {
    background-color: var(--primary-color);
    opacity: 0.9;
}

.menu {
    text-align: center;
    display: flex;
}

.menu li {
    display: inline-block;
    flex: 1;
    padding: 0 var(--spacing);
}

.menu a {
    color: var(--background-color);
    text-decoration: none;
}

.menu a:hover {
    text-decoration: underline;
}

.content-section {
    padding: var(--spacing);
}

.content-section a {
    color: var(--accent-color-2);
}

.section-title {
    text-align: center;
    font-size: 1.9em;
}

.destination-image {
    width: 100%;
    max-width: 3400px;
    height: auto;
    display: block;
    border-radius: 50%;
}

.packages-table {
    font-size: 0.6em;
    border: 3px solid var(--primary-color);
    border-collapse: collapse;
    text-align: center;
    width: 100%;
    max-width: 100%;
}

.table-title{
    font-weight: bold;
    font-size: 1.3em;
    margin: var(--spacing);
}

.packages-table th {
    border: 2px solid var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    padding: var(--spacing);
}

.packages-table td {
    border: 1px solid var(--primary-color);
    padding: 0.1em;    
}

.packages-table tr:nth-child(odd) {
    background-color: var(--secondary-color-translucent);
}

.column-header {
    background-color: var(--secondary-color);
}

.inquiry-form {
    display: flex;
    flex-direction: column;
}

.inquiry-form fieldset{
    border: 2px solid var(--secondary-color);
    margin: var(--spacing);
    font-size: 0.71em;
}

.inquiry-form legend {
    font-weight: bold;
}

.form-input-group {
    display: flex;
    padding: 0.1em;
;}

.label {
    padding: 0.2em;
}

.form-input {
    padding: 0.1em;
    margin: 0.2em;
    border: 2px solid var(--primary-color);
    background-color: var(--accent-color-1);
    color: var(--text-color);
    font-size: 0.8em;
    font-family: Optima, 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.form-input:focus {
    outline: 2px solid var(--secondary-color);
}

.form-option:disabled {
    color: var(--secondary-color-dark);
}

/* not supported by many browsers */
.form-option:hover {
    background-color: var(--secondary-color);
}

.comments-group {
    flex-direction: column;
}

.comments-input {
    height: 10em;
    font-size: 1em;
}

.btn {
    border: none;
    border-radius: 6%;
    background-color: var(--accent-color-2);
    color: var(--reverse-text-color);
    font-family: Optima, 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    padding: var(--spacing);
    margin: var(--spacing);
    align-self: center;
}

.btn:hover {
    cursor: pointer;
    background-color: var(--accent-color-2-light);
}

/* mobile portrait layout (479px or less */
@media only screen and (max-width: 479px) {
    .menu-container {
        height: 0;
        width: 100%;
        position: fixed;
        z-index: -1;
        top: 0;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .menu {
        position: relative;
        display: inline;
        top: 30%;
        width: 100%;
    }

    .menu li {
        display: block;
        font-size: 1.5em;
        padding: var(--spacing);
        transition: 0.3s;
    }

    #toggle:checked + .menu-hamburger + .menu-container {
        height: 100%;
    }
}


/* mobile landscape layout (480px to 767px) */
@media only screen and (min-width: 480px) {
    .menu-hamburger {
        display: none;
    }

    .content-section {
        padding: 2.5em var(--spacing) 0;
    }

    .inquiry-form fieldset{
        font-size: 1.2em;
    }

    .packages-table {
        font-size: 1em;
    }
}

/* tablet layout (768px to 1023px) */
@media only screen and (min-width: 768px) {
    body {
        font-size: 1.8rem;
    }

    .destination-image {
        width: 60%;
        float: right;
        padding: var(--spacing);
    }

    .menu li {
        font-size: 1.1em;
    }
    
}

/* desktop layout (1024px or more) */
@media only screen and (min-width: 1024px) {
    .content-container {
        grid-template-areas:
            "about about"
            "packages contact";
        grid-template-columns: 1fr 1fr;
    }

    .content-section:first-child {
        grid-column: 1 / 3;
    }
    
    .destination-name-large {
        font-size: 2.5em;
    }

    .content-section {
        padding: 2em;
    }

    .menu li {
        font-size: 1.3em;
    }

    .packages-table {
        font-size: 0.8em;
    }

    .inquiry-form fieldset{
        font-size: 1em;
    }
}