body{
    font-family: Georgia, serif;
    margin-bottom: 0;
}

@-webkit-keyframes name_expand{
    from {
      font-size: 150%;
    }
    to {
      font-size: 175%;
    }
}
  
  @keyframes name_expand{
    from {
        font-size: 150%;
    }
    to {
        font-size: 175%;
    }
}


#food5-desktop{
    display: none;
}

/* hidden jump to content button inspired by homework 4 */
#jump-desktop a{
    left: 0;
    -webkit-transition: top .5s ease-out;
    transition: top .5s ease-out;
    z-index: 1;
    position: absolute;
    top: -40px;
    text-decoration: none;
    color: #535353;
    background-color: #ffffff;
    border: 1px solid #cacaca;
}

#jump-desktop a:focus{
    top:0px;
  }


.page-header{
    font-size: 175%;
    margin: 10px 10px 0px 0px;
    padding: 10px;
    -webkit-animation-name: name_expand;
    animation-name: name_expand;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

/* footer styling */
footer{
    position: relative;
    bottom: 0px;
    left: 0px;
    background-color: #d2e2ee;
    height: 75px;
}

.footer-link{
    display: inline-block;
    text-decoration: none;
    color: #535353;
    margin-top: 20px;
    width: 50px;
}

#footer-items{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

footer p{
    color: #535353;
    margin-top: 20px;
}


/* Front page styling*/
#dining-types{
    color: #000000;
    padding: 10px 10px 10px 0px;
    text-transform: uppercase;
}

#main-content{
    background-image: url(../images/swt.jpg);
    /* Photo courtesy of Candy Nation...link: https://www.candynation.com/fralingers-salt-water-taffy-candy */
    background-attachment: fixed; /* Parallax effect */     
    background-position: center;  /* Parallax effect */
    background-repeat: no-repeat; /* Parallax effect */
    background-size: cover;       /* Parallax effect */
}

.home-content{
    background-color: #ffffff;
    color: #535353;
}

.one{
    margin-bottom: 50%;
    padding: 10px;
    line-height: 20px;
}

.two{
    margin-top: 50%;
    padding: 10px;
    line-height: 20px;
}



/* top restaurants styling */
.restaurant-img{
    display: none;
}

.restaurant-intro{
    line-height: 20px;
    color: #535353;
    padding: 10px;
}

.name{
    color: #000000;
    font-size: 115%;
}

#restaurants{
    margin: 10px;
    display: flex;
    flex-direction: column;
}

.restaurant {
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px 5px 0px;
}

.restaurant-mobile{
    border: 2px solid #d2e2ee;
}

.restaurant h3{
    font-size: 90%;
}

.restaurant p, h3{
    color: #535353;
}

.restaurant p{
    line-height: 20px;
    padding: 10px;
}


/* top heading styling */
#main-title{
    font-size: 250%;
    text-align: center;
    background-color: #d2e2ee;
    color: #535353;
    padding: 10px;
}



/* top picture styling */
figure, #boardwalk{
    margin: 0px;
    margin-right: 5px;
    margin-left: 5px;
    border: 2px solid #cacaca;
    border-radius: 10px;
    padding: 5px;
}

.razza-heading{
    width: 100%;
    display: block;
    margin: 0 auto;
}

.Atlantic-City{
    width: 100%;
    display: block;
    margin: 0 auto;
} 

figcaption{
    text-align: center;
    color: #535353;
    font-size: 90%;
    padding: 5px;
}

/* Contact Page Styling */
#social-media{
    font-size: 150%;
    padding-top: 10px;
}

.find-me .find-me-link{
    text-decoration: none;
    color: #535353;
    margin: 10px;
    padding: 10px;
    font-size: 150%;
    display: block;
}

.find-me{
    text-align: center;
    margin: 10px;
}


/* Jump to content styling */

.jump{
    text-decoration: none;
    color: #535353;
    background-color: #d2e2ee;
    border: 1px solid #cacaca;
    display: inline-block;
    margin: 10px;
    padding: 5px;
    width: fit-content;
    z-index: 1;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
}

.jump:active{
    background-color: #cacaca;
    color: #535353;
    border: 2px solid #d2e2ee;
}

.jump:hover{
    background-color: #cacaca;
    color: #535353;
    border: 2px solid #d2e2ee;
}



/* Gallery styling */

#gallery-content{
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 5px;
    justify-items: center;
}

#gallery-content img{
    width: 275px;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 15px;
    border: 2px solid #d2e2ee;  
}



/* NJ Food Styling */
#nj-food-pic{
    width: 100%;
    display: block;
    margin: 0 auto;
}

.nj-food{
    border: 2px solid #d2e2ee;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px 5px 0px;
}

.nj-food-pic{
    width: 100%;
}

.food-name{
    margin: 5px;
    font-size: 125%;
}

.nj-food p{
    color: #535353;
    line-height: 20px;
}

#grid-container{
    margin: 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 5px;
    justify-items: center;
}

/* Nav Bar styling */
/* The layout was modeled after W3Schools example, I changed the colors and styling to fit my site specifically */
/* W3Schools example: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp */

.nav-tablet{
    display: none;
}
.nav-phone {
    overflow: hidden;
    background-color: #ffffff;
    position: relative;
}
  
  .nav-phone #pages {
    display: none;
}
  
  .nav-phone a {
    color: #535353;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}
  
  .nav-phone a.icon {
    background: #d2e2ee;
    border: 2px solid #ffffff;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}
  
  .nav-phone a:hover {
    background-color: #d2e2ee;
    color: black;
}
  
  .active {
    background-color: #d2e2ee;
    color: #ffffff;
    text-transform: uppercase;
}

  nav{
    width: 100%;
}

  #menu-title{
      display: flex;
      justify-content: flex-end;
      margin-right: 50px;
      text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce){
    .page-header{
      animation: none;
    }
  }

@media screen and (min-width: 750px) {
    @-webkit-keyframes name_expand{
        from {
          font-size: 175%;
        }
        to {
          font-size: 225%;
        }
    }
      
      @keyframes name_expand{
        from {
            font-size: 175%;
        }
        to {
            font-size: 225%;
        }
    }
    
    .page-header{
        font-size: 225%;
    }

    .nav-phone{
        display: none;
    }
    #menu-title{
        display: none;
    }
    .icon{
        display: none;
    }
    #pages{
        display: none;
    }

    #main-title{
        padding: 20px;
        font-size: 275%;
    }


    /* Nav styling */
    .nav-tablet{
        display: block;
        position: relative;
        width: 100%;
        left: 3%;
    }

    .nav-tablet a{
        display: inline-block;
        background-color: #d2e2ee;
        width: 17%;
        text-align: center;
        text-decoration: none;
        border: 1px solid #cacaca;
        padding: 5px;
        margin: 0 auto;
        color: #535353;
    }

    #pages-tablet a{
        margin: 0px;
    }

    .nav-tablet .active{
        font-size: 80%;
        text-decoration: underline;
        color: #000000;
    }

    /* gallery styling */
    #gallery-content{
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    #gallery-content img{
        width: 300px;
    }

    #img1{
        grid-column-start: 1;
    }
    #img2{
        grid-column-start: 2;
    }
    #img3{
        grid-column-start: 1;
    }
    #img4{
        grid-column-start: 2;
    }
    #img5{
        grid-column-start: 1;
    }
    #img6{
        grid-column-start: 2;
    }
    #img7{
        grid-column-start: 1;
    }
    #img8{
        grid-column-start: 2;
    }
    #img9{
        grid-column: 1/span 2;
    }

    /* NJ Food styling */
    #grid-container{
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 5px;
    }

    #food1{
        grid-column-start: 1;
    }
    #food2{
        grid-column-start: 2;
    }
    #food3{
        grid-column-start: 1;
    }
    #food4{
        grid-column-start: 2;
    }
    #food5{
        grid-column: 1/span 2;
    }

    /* top restaurant styling */

    .restaurant-img{
        display: inline-block;
        width: 95%;
        text-align: center;
        padding: 5px;
    }

    .restaurant{
        margin: 5px;
        width: 400px;
        text-align: center;
    }

    #restaurants{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* contact page styling */
    .find-me .find-me-link{
        display: inline;
        font-size: 175%;
    }

    .find-me{
        margin-bottom: 20px;
    }

    #social-media{
        font-size: 175%;
    }

    /* footer styling */
    #footer-items{
        justify-content: center;
    }

    footer p{
        margin-top: 20px;
    }


}

@media screen and (min-width: 1250px) {
    @-webkit-keyframes name_expand{
        from {
          font-size: 200%;
        }
        to {
          font-size: 250%;
        }
    }
      
      @keyframes name_expand{
        from {
            font-size: 200%;
        }
        to {
            font-size: 250%;
        }
    }
    
    .page-header{
        font-size: 250%;
    }

    #main-title{
        display: inline-block;
        width: 48%;
        text-align: left;
    }

    /* navigation */

    nav{
        display: inline-block;
        position: relative;
        text-align: center;
        width: 48%;
        text-align: right;
    }

    nav a:hover{
        background-color: #cacaca;
        text-transform: uppercase;
    }

    header{
        background-color: #d2e2ee;
    }

    .nav-tablet .active{
        background-color: #cacaca;
    }

    #pages-tablet{
        padding-right: 20px;
    }

    /* parallax styling */

    .one{
        margin-bottom: 20%;
        padding: 20px;
        line-height: 30px;
        font-size: 125%;
    }
    
    .two{
        margin-top: 20%;
        padding: 20px;
        line-height: 30px;
        font-size: 125%;
    }

    /* header images */

    .Atlantic-City{
        width: 80%;
    }

    figure, #boardwalk{
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 10px;
        border: 2px solid #cacaca;
        border-radius: 10px;
        padding: 5px;
    }

    #boardwalk figcaption{
        font-size: 110%;
    }

    .razza-heading{
        width: 80%;
    }

    figcaption{
        font-size: 110%;
    }

    /* NJ food */

    #nj-food-pic{
        width: 60%;
    }

    .nj-food{
        font-size: 110%;
        line-height: 25px;
    }
    
    #food5{
        display: none;
    }

    #food5-desktop{
        display: block;
        margin: 0 auto;
        width: 45%;
        margin-bottom: 10px;
    }

    /* gallery */

    #gallery-content{
        grid-template-columns: 19% 19% 19% 19%;
        align-items: center;
        grid-row-gap: 0px;
        justify-items: normal;
        width: 80%;
        margin: 0 auto;
    }

    #gallery-content img{
        border: none;
        border-radius: 0px;
        padding: 0px;
        margin: 0px;
    }

    #gallery-content #img1{
        grid-column: 1 / span 3;
        grid-row: 3;
        width: 100%;
        transition: opacity .5s;
    }

    #gallery-content #img2{
        grid-column: 4 / span 2;
        width: 100%;
        grid-row: 3;
        align-self: stretch;
        transition: opacity .5s;
    }

    #gallery-content #img3{
        width: 100%;
        grid-column: 3 / span 4;
        grid-row: 1;
        transition: opacity .5s;
    }

    #gallery-content #img4{
        grid-column: 3 / span 3;
        width: 100%;
        grid-row: 2;
        transition: opacity .5s;
        align-self: flex-end;
    }

    #gallery-content #img5{
        grid-column: 1 / span 2;
        grid-row: 4;
        width: 100%;
        transition: opacity .5s;
    }

    #gallery-content #img6{
        grid-column: 1 / span 2;
        grid-row: 5;
        width: 100%;
        transition: opacity .5s;
    }

    #gallery-content #img7{
        grid-column: 3 / span 3;
        grid-row: 4 / span 2;
        width: 100%;
        align-self: stretch;
        transition: opacity .5s;
    }

    #gallery-content #img8{
        grid-column: 2 / span 3;
        width: 100%;
        transition: opacity .5s;
    }

    #gallery-content #img9{
        grid-column: 1/span 2;
        grid-row: 1 / span 2;
        width: 100%;
        align-self: stretch;
        transition: opacity .5s;
    }

    #gallery-content #img1:hover, #gallery-content #img2:hover, #gallery-content #img3:hover,
    #gallery-content #img4:hover, #gallery-content #img5:hover, #gallery-content #img6:hover,
    #gallery-content #img7:hover, #gallery-content #img8:hover, #gallery-content #img9:hover{
        opacity: .5;
    }

    /* top restaurants */
    
    /* Styling of flip card inspired by https://www.w3schools.com/howto/howto_css_flip_card.asp but it was changed 
    to fit the styling of my specific page */

    .restaurant{
        font-size: 110%;
        line-height: 25px;
    }

    .restaurant .flip  {
        border: 2px solid #d2e2ee;
        padding: 10px;
        border-radius: 10px;
        margin: 5px 0px 5px 0px;
        background-color: transparent;
        width: 300px;
        height: 300px;
        perspective: 1000px;
    }
      
    .flip-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
    } 
      
    .flip:hover .flip-inner, .flip:active .flip-inner, .flip:focus .flip-inner {
        transform: rotateY(180deg);
    }
      
    .flip-front, .flip-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
      
    .flip-front {
        background-color: #ffffff;
        color: black;
    }
    
    .flip-front h3{
        color: #535353;
    }
      
    .flip-back {
        background-color: #ffffff;
        transform: rotateY(180deg);
    }

    .restaurant-mobile{
        border: none;
    }

    /* contact page */
    .find-me .find-me-link:hover{
        text-transform: uppercase;
    }

    /* footer styling */
    #footer-items{
        justify-content: flex-start;
        margin-left: 20px;
    }

    @media (prefers-reduced-motion: reduce){
        .flip-card-inner{
          transition: none;
        }
      }
}