html{
    font-size:16px;
    font-family:sans-serif;
}

*{
    box-sizing:border-box;
}

body{
    margin:0 0 0 0;
}

p,li,td{
    line-height:1.7;
}

a:link{
    color:#F07D34;
    text-decoration:none;
}
a:visited{
    color:#F07D34;
    text-decoration:none;
}
a:hover{
    color:#F07D34;
    text-decoration:underline;
}
a:active{
    color:#F07D34;
    text-decoration:underline;
}

.logo{
    text-align:center;
}

.hero{
    text-align:center;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    color:#FFFFFF;
    padding:137px 0;
}

.hero.index{
    padding:287px 0;
    background-image:url(../images/home-hero.jpg);
}

.hero.access{
    background-image:url(../images/access-hero.jpg);
}

.hero.menu{
    background-image:url(../images/menu-hero.jpg);
}

.hero.contact{
    background-image:url(../images/contact-hero.jpg);
}

.gotop{
    text-align:center;
}

.copyright{
    margin-top:20px;
    margin-bottom:0;
    padding-top:75px;
    padding-bottom:75px;
    background-color:#263958;
    color:#FFFFFF;
    text-align:center;
}

.logo-whale{
    text-align:center;
}

main h2{
    margin:60px 0 20px 0;
    border-bottom:2px solid #253958;
    padding:0 0 5px 0;
    color:#253958;
    font-size:1.3rem;
}

main{
    max-width:1000px;
    margin:90px auto 90px auto;
}

img{
    max-width:100%;
}

.nav a:link{
    color:#253958;
}

.nav a:visited{
    color:#253958;
}

.nav a:hover{
    text-decoration:none;
}

.nav a:active{
    text-decoration:none;
}

.header{
    background-image:url(../images/stripe.png);
    background-repeat:repeat-x;
    padding-top:40px;
}

.nav ul{
    margin:30px 0 0 0;
    padding:0;
    list-style-type:none;
    display:flex;
    justify-content:center;
    gap:40px;
}

.shop-info th, .shop-info td{
    border:1px solid #DBDBDB;
    padding :20px;
}

.shop-info{
    border-collapse:collapse;
}

.shop-info th{
    width:112px;
    text-align:left;
    vertical-align:top;
}

.items{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
}

form{
    margin:0 auto;
    max-width:640px;
}

input[type="text"],textarea{
    padding:6px;
    width:100%;
    font-size:1rem;
}

textarea{
    height:140px;
}

.submit{
    text-align:center;
}

input[type="submit"]{
    border:none;
    padding: 20px;
    width:200px;
    background-color:#253958;
    color:#FFFFFF;
    font-size:1rem;
}

@media(max-width:767px){
    .nav ul{
        flex-wrap:wrap;
        gap:20px;
    }

main{
    padding:0 4%;
}

.hero.index{
    padding:28vh 0;
}

.items{
    grid-template-columns:1fr 1fr;
}
}