* {
    box-sizing: border-box; /* bxbb */
}
body { 
    background-color: #EAEAEA; /* bgc#EAEAEA */
    color: #555; /* c#555 */ 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* ffa */
}
#wrapper {
    background-color: #90c7e3; /* bgc#90c7e3 */
    background-image: linear-gradient(to bottom, #fff, #90c7e3);
}
header {
    background-color: #002171; /* bgc#002171 */
    background-image: url(); /* bgi */
    background-position: right; /* bgdp */
    background-repeat: no-repeat; /* bgr */
    background-size: contain; /* bgz */
    color: #fff; /* c#fff */
    padding: 0.5em;
    text-align: center; /* tac */
}
header a {
    text-decoration: none; /* tdn */
}
header a:link, 
header a:visited {
    color: #fff; /* c#fff */
}
header a:hover {
    color: #90c7e3; /* c#90c7e3 */
}
nav { 
    flex: 5; /* flex: 1 */
    font-size: 120%; 
    font-weight: bold; 
    padding: 5; /* padding: 1; */
    text-align: center; /* tac */
}
nav ul {
    font-size: 1.2em; /* fz1.2em */
    list-style-type: none; /* listn */
    margin: 0; /* m0 */
    padding-left: 0; /* pl0 */
}
nav li {
    border-bottom: 1px solid #002171; /* bdb1-solid-#002171 */
}
nav a {
    text-decoration: none; /* txd */
    transition: color 3s ease-out;
}
nav a:link {
    color: #5c7fa3; /* c#5c7fa3 */
}
nav a:visited {
    color: #344873; /* c#344873 */
}
nav a:hover {
    color: #a52a2a; /* c#a52a2a */
}
main {
    background-color: #fff; /* bgc#fff */
    flex: 7;
    padding: 1px 20px 20px 30px;
    display: block;
    overflow: auto; /* ova */
}
h1 {
    /* font-size: 3em; fz3em */
    letter-spacing: 0.25em; /* lts.25em */
    margin-bottom: 0.5em; /* mb0.5em */
    margin-top: 0.5em; /* mt0.5em */
}
h1, 
h2, 
h3,
footer {
    font-family: Georgia, "Times New Roman", serif;
}
h2 {
    color: #1976d2; /*c#1976d2 */
    text-shadow: 1px 1px #404040;
    text-align: center;
}
h3 {
    color: #003; /* c#003 */
    text-align: center;
}
p {
    text-align: center;
}
dt {
    color: #002171; /* c#002171 */
}
footer {
    background-color: #fff; /* bgc#fff */
    font-size: 75%; /* fz75% */
    font-style: italic; /* fsi */
    padding: 2em; 
    text-align: center; /* txa */
}
.restaurant {
    color: #1976d2; /* c#1976d2 */
    font-weight: bold; /* fwb */
}
#contact {
    font-size: 90%; /* fz90% */
}
#homehero {
    background-image: url(images/Logo.jpeg); /* bgi */
    background-repeat: no-repeat; /* bgr */
    background-size: 100% 100%; /* bgz100%100% */
    height: 300px; /* h300 */
}
table {
    border-bottom: 2px solid #1976d2;
    border-collapse: separate; /* Changed this style to separate because I liked the look of the white border between the cells */
}
/* This style gives the thread the blue background color with white lettering */
th {
    background-color: #1976d2;
    color: #fff;
}
td, 
th {
    padding: 0.5em; 
    /* border: 2px solid #39c; */
}
td {
    text-align: center; /* tac */
}
.text {
    text-align: left; /* ta:l */
}
tr:nth-last-of-type(odd) {
    background-color: #ffcd6f;
}
form {
    display: flex; 
    flex-flow: column nowrap;
}
input, 
textarea {
    margin-bottom: 0.5em; /* mb.5em */
}
video {
    float: right; /* flr */
    margin: 1em; /* m1em */
}
#gallery {
    display: grid;
    gap: 2em;
}
#gallery img {
    box-shadow: 10px 10px 10px #777;
    text-align: center; 
    width: 100%;
}
img {
    /* box-shadow: 10px 10px 10px #777; */   
    height: auto;
    text-align: center;
    width: 95%; /* w95% */
}
aside {
    float: right; /* fr */
    flex: 2; 
    margin-left: 15px; /* ml15 */
    padding-left: 15px; /* pl15 */
    width: 30%; /* w30% */
}
ul {
    line-height: 25px;
}

.container {
    position: relative;
    width: 100%;
}
.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}  
.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}  
.container:hover .image {
    opacity: 0.3;
}  
.container:hover .middle {
    opacity: 1;
}
.text {
    background-color: #ECBF00;
    color: white;
    font-size: 30px;
    padding: 25px 25px;
}

@media (max-width: 520px) {
    header {
        background-image: none;
    }
    #homehero {
        background-size: auto;
    }
    /* Table styles for smartphone devices */
    #special table {
        display: block; /* db */
        border-bottom: none; /* bd:n */
    }
    #special td,
    #special th {
        display: block; /* bd */
    }
    /* Hide the table header elements */
    #special thead {
        display: none; /* dn */
    }
    /* Use the :: before pseudo-element to inject these labels before each row of cell content. It is often used to add cosmetic content to an element with the concent property. The content property is a handy trick for revealing extra bits of data hidden in HTML. */
    td.package::before {
        content: "Package:";
    }
    td.description::before {
        content: "Description:";
    }
    td.nights::before {
        content: "Nights:";
    }
    td.cost::before {
        content: "Cost:";
    }
    td.package,
    td.description,
    td.nights,
    td.cost {
        padding-left: 35%; /* pl35% */
        position: relative; /* pos:r */
        text-align: left; /* ta:l */
        font-size: 4vw; /* Relative length units specify a length relative to another property. Relative length units scale better between different rendering medium. vw = relative to 1% of the height of the viewport. Viewport = use the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm. */
    }
    td::before {
        position: absolute; /* pos:a */
        top: 10px; /* t10 */
        left: 0.5em; /* l.5em */
        font-weight: bold; /* fwb */
        color: #1976d2; /* c#1976d2 */
    }
    td:last-of-type {
        border-bottom: 2px solid #1b69b2; /* bb2-solid-#1b69b2 */    
    }
}

@media (min-width: 600px) {
    nav ul {
        display: flex; /* df */
        flex-direction: row; /* fdr */
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    nav li {
        border-block-start: none; /* bbn */
        border-bottom: none;
    }
    .flow {
        display: flex; /* df */
        flex-direction: row; /* fdr */
    }
    section {
        flex: 1; /* flex: 1 */
        margin-right: 1em;
    }
    form {
        display: grid;
        grid-template-columns: 6em 1fr; 
        gap: 1em;  
        max-width: 30em; 
        width: 60%; 
    }
    input[type="submit"] {
        grid-column: 2 / 3;
        width: 9em; 
    }
    #gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 730px) {
    video {
        display: block;
        float: none;
        clear: both;
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    #wrapper {
        margin: auto; /* m:a */
        width: 80%;
        border: 1px solid #002171; /* bdb1-solid-#002171 */
        box-shadow: 3px 3px 3px #002171;
    }
    nav {
        text-align: left; /* ta:l */
        padding-left: 1em; /* pl1em */
    }
    @supports ( display: grid ) {
        .hero {
            grid-area: hero;
        }
        header {
            grid-area: header;
        }
        nav {
            grid-area: nav;
        }
        main {
            grid-area: main;
        }
        #gallery {
            grid-area: gallery;
        }
        footer {
            grid-area: footer;
        }
        #wrapper {
            grid-template: 
            "header header"
            "nav hero"
            "nav main"
            "nav footer"
            / 180px 1fr;
        }
        #gallery {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}