html {
  height: 100%;
  width: 100%;
}

.navbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #AEC4E0;
  padding: 10px;
  width: 110%;
  font-size: 2em;
}

img {
  object-fit: cover;
}

p {
    font-size: 16pt;
}

body {
  height: 100%;
  width: 100%;
  background-color: rgb(224, 202, 172);
}

main {
    display: grid;
    grid-template-rows: 15vh 50px 300px 50px 300px 50px 300px;
    grid-template-columns: 375px 380px 20vw 20vw 20vw;
}

#Title {
    margin: auto;
    font-family: "Sofia", cursive, Times;
    font-style: italic;
}

#Description {
    grid-area: introText;
    grid-column: 1 / 4;
    grid-row: 1 / 2;
}

.fb-page {
    grid-area: sidebar;
    grid-column: 5 / 6;
    grid-row: 1 / 2;
    justify-items: right;
}

.cakes-title {
    grid-area: cakeTitle;
    grid-column: 1 / 6;
    grid-row: 2 / 3;
}

.cake-images-mobile {
  grid-column: 1 / 6;
  grid-row: 3 / 4;
}

#cakeImage1 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

#cakeSmallImage1 {
  display: none;
}

#cakeSmallImage2 {
  display: none;
}

#cakeImage2 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}


#cakeImage3 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

#cakeImage4 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}

#cakeImage5 {
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}

.cookies-title {
    grid-area: cookieTitle;
    grid-column: 1 / 6;
    grid-row: 4 / 5;
}

.cookie-images-mobile {
  grid-column: 1 / 6;
  grid-row: 5 / 6;
}

#cookieImage1 {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
}

#cookieSmallImage1 {
  display: none;
}

#cookieImage2 {
  grid-column: 2 / 3;
  grid-row: 5 / 6;
}

#cookieSmallImage2 {
  display: none;
}

#cookieImage3 {
  grid-column: 3 / 4;
  grid-row: 5 / 6;
}

#cookieImage4 {
  grid-column: 4 / 5;
  grid-row: 5 / 6;
}

#cookieImage5 {
  grid-column: 5 / 6;
  grid-row: 5 / 6;
}

.cupcakes-title {
    grid-area: cupcakeTitle;
    grid-column: 1 / 6;
    grid-row: 6 / 7;
}

.cupcake-images-mobile {
  grid-column: 1 / 6;
  grid-row: 7 / 8;
}

#cupcakeImage1 {
  grid-column: 1 / 2;
  grid-row: 7 / 8;
}

#cupcakeSmallImage1 {
  display: none;
}

#cupcakeImage2 {
  grid-column: 2 / 3;
  grid-row: 7 / 8;
}

#cupcakeSmallImage2 {
  display: none;
}

#cupcakeImage3 {
  grid-column: 3 / 4;
  grid-row: 7 / 8;
}

#cupcakeImage4 {
  grid-column: 4 / 5;
  grid-row: 7 / 8;
}

#cupcakeImage5 {
  grid-column: 5 / 6;
  grid-row: 7 / 8;
}

.Footer {
    display: flex;
    background-color: #AEC4E0;
    padding: 10px;
    justify-content: space-between;
}

#contact {
  background-color: darkblue;
  padding: 4px;
}

#contact:visited {
  color: white;
}

#contact:link {
  color: white;
}

#FBLink {
  background-color: darkblue;
  padding: 4px;
  display: none;
}

#FBLink:visited {
  color: white;
  border: 5px;
}

@media screen and (max-width: 1750px) {
  #cupcakeImage5 {
    display: none;
  }

  .fb-page {
    grid-column: 4 / 5;
  }
}

@media screen and (max-width: 1300) {
  .fb-page {
    grid-column: 4 / 5;
  }
}

@media screen and (max-width: 1200px) {
  main {
    grid-template-columns: 50% 50% !important;
  }
  
  .fb-page {
    display: none !important;
  }

  #cakeImage2 {
    grid-column: 2 / 3;
  }
  
  #cakeImage3 {
    grid-column: 2 / 3;
  }

  #cakeImage4 {
    grid-column: 2 / 3;  
  }

  #cakeImage5 {
    grid-column: 2 / 3 ;
  }

  #cookieImage2 {
    grid-column: 2 / 3;
  }

  #cookieImage3 {
    grid-column: 2 / 3 ;
  }

  #cookieImage4 {
    grid-column: 2 / 3 ;
  }

  #cookieImage5 {
    display: none ;
  }

  #cupcakeImage2 {
    grid-column: 2 / 3;
  }

  #cupcakeImage3 {
    grid-column: 2 / 3 ;
  }

  #cupcakeImage4 {
    display: none ;
  }

  #cupcakeImage5 {
    display: none ;
  }

  #FBLink {
    display: inline;
  }
}

@media screen and (max-width: 1150px) {
  main {
    grid-template-columns: 50% 50% !important;
  }
  
  .fb-page {
    display: none !important;
  }

  #cakeImage2 {
    grid-column: 2 / 3;
  }
  
  #cakeImage3 {
    grid-column: 2 / 3;
  }

  #cakeImage4 {
    grid-column: 2 / 3;  
  }

  #cakeImage5 {
    grid-column: 2 / 3 ;
  }

  #cookieImage2 {
    grid-column: 2 / 3;
  }

  #cookieImage3 {
    grid-column: 2 / 3 ;
  }

  #cookieImage4 {
    grid-column: 2 / 3 ;
  }

  #cookieImage5 {
    display: none ;
  }

  #cupcakeImage2 {
    grid-column: 2 / 3;
  }

  #cupcakeImage3 {
    display: none;
  }

  #cupcakeImage4 {
    display: none ;
  }

  #cupcakeImage5 {
    display: none ;
  }

  #FBLink {
    display: inline;
  }
}

@media screen and (max-width: 1100px) {
  #cookieImage4 {
    display: none;
  }
}

@media screen and (max-width: 1060px) {
  .navbar {
    width: 95%;
  }

  .Footer {
    width: 95%;
  }
  
  #cakeImage5 {
    display: none;
  }
}

@media screen and (max-width: 992px) {
  main {
    grid-template-rows: 15vh 75px 300px 75px 300px 75px 300px;
    grid-template-columns: 50% 50% !important;
  }

  #Description {
    font-size: 15pt;
  }
  
  .fb-page {
    display: none !important;
  }

  #cakeImage2 {
    grid-column: 2 / 3;
  }
  
  #cakeImage3 {
    grid-column: 2 / 3;
  }

  #cakeImage4 {
    grid-column: 2 / 3;  
  }

  #cakeImage5 {
    display: none ;
  }

  #cookieImage2 {
    grid-column: 2 / 3;
  }

  #cookieImage3 {
    display: none ;
  }

  #cookieImage4 {
    display: none ;
  }

  #cookieImage5 {
    display: none ;
  }

  #cupcakeImage2 {
    grid-column: 2 / 3;
  }

  #cupcakeImage3 {
    display: none ;
  }

  #cupcakeImage4 {
    display: none ;
  }

  #cupcakeImage5 {
    display: none ;
  }

  #FBLink {
    display: inline;
  }
}

@media screen and (max-width: 865px) {
  main {
    grid-template-columns: 50% 50% !important;
  }

  #Description {
    font-size: 14pt;
  }
  
  .fb-page {
    display: none ;
  }

  #cakeImage2 {
    grid-column: 2 / 3;
  }
  
  #cakeImage3 {
    grid-column: 2 / 3;
  }

  #cakeImage4 {
    display: none;  
  }

  #cakeImage5 {
    display: none ;
  }

  #cookieImage2 {
    grid-column: 2 / 3;
  }

  #cookieImage3 {
    display: none ;
  }

  #cookieImage4 {
    display: none ;
  }

  #cookieImage5 {
    display: none ;
  }

  #cupcakeImage2 {
    grid-column: 2 / 3;
  }

  #cupcakeImage3 {
    display: none ;
  }

  #cupcakeImage4 {
    display: none ;
  }

  #cupcakeImage5 {
    display: none ;
  }

  #FBLink {
    display: inline;
  }
}

@media screen and (max-width: 770px) {
  main {
    grid-template-columns: 50% 50% !important;
  }
  
  .fb-page {
    display: none ;
  }

  #cakeImage2 {
    grid-column: 2 / 3;
  }
  
  #cakeImage3 {
    grid-column: 2 / 3;
  }

  #cakeImage4 {
    display: none;  
  }

  #cakeImage5 {
    display: none ;
  }

  #cookieImage2 {
    grid-column: 2 / 3;
  }

  #cookieImage3 {
    display: none ;
  }

  #cookieImage4 {
    display: none ;
  }

  #cookieImage5 {
    display: none ;
  }

  #cupcakeImage2 {
    display: none;
  }

  #cupcakeImage3 {
    display: none ;
  }

  #cupcakeImage4 {
    display: none ;
  }

  #cupcakeImage5 {
    display: none ;
  }

  #FBLink {
    display: inline;
  }

}

@media screen and (max-width: 680px) {
  #Description {
    font-size: 12pt;
  }
}

@media screen and (max-width: 630px) {
  main {
    grid-template-columns: 50% 50% !important;
  }
  
  .fb-page {
    display: none ;
  }

  #cakeImage2 {
    grid-column: 2 / 3;
  }
  
  #cakeImage3 {
    display: none;
  }

  #cakeImage4 {
    display: none;  
  }

  #cakeImage5 {
    display: none ;
  }

  #cookieImage2 {
    grid-column: 2 / 3;
  }

  #cookieImage3 {
    display: none ;
  }

  #cookieImage4 {
    display: none ;
  }

  #cookieImage5 {
    display: none ;
  }

  #cupcakeImage2 {
    display: none;
  }

  #cupcakeImage3 {
    display: none ;
  }

  #cupcakeImage4 {
    display: none ;
  }

  #cupcakeImage5 {
    display: none ;
  }

  #FBLink {
    display: inline;
  }
}

@media screen and (max-width: 500px) {
  .navbar {
    width: 100%;
  }

  main {
    grid-template-columns: 100% !important;
    grid-template-rows: 15vh 10vh 20vh 20vh 10vh 20vh 20vh 10vh 20vh 20vh !important;
    row-gap: 20px !important;
  }
  
  .fb-page {
    display: none ;
  }

  .cake-images-mobile {
    grid-row: 3 / 5;
  }

  #cakeImage1 {
    display: none ;
  }

  #cakeSmallImage1 {
    display: grid;
    grid-row: 3 / 4 ;
  }

  #cakeImage2 {
    display: none ;
  }

  #cakeSmallImage2 {
    display:grid;
    grid-row: 4 / 5 ;
  }
  
  #cakeImage3 {
    display: none ;
  }

  #cakeImage4 {
    display: none ;
  }

  #cakeImage5 {
    display: none ;
  }

  .cookies-title {
    grid-row: 5 / 6 !important;
  }

  .cookie-images-mobile {
    grid-row: 6 / 8;
  }

  #cookieImage1 {
    display: none ;
  }  
  
  #cookieSmallImage1 {
    display:grid !important;
    grid-row: 6 / 7 !important;
  }

  #cookieImage2 {
    display: none ;
  }

  #cookieSmallImage2 {
    display:grid !important;
    grid-row: 7 / 8 !important;
  }

  #cookieImage3 {
    display: none ;
  }

  #cookieImage4 {
    display: none ;
  }

  #cookieImage5 {
    display: none ;
  }

  .cupcakes-title {
    grid-row: 8 / 9 !important;
  }

  .cupcake-images-mobile {
    grid-row: 9 / 11;
  }

  #cupcakeImage1 {
    display: none ;
  }

  #cupcakeSmallImage1 {
    display: grid;
    grid-row: 9 / 10 !important;
  }

  #cupcakeImage2 {
    display: none ;
  }

  #cupcakeSmallImage2 {
    display: grid;
    grid-row: 10 / 11 !important;
  }

  #cupcakeImage3 {
    display: none ;
  }

  #cupcakeImage4 {
    display: none ;
  }

  #cupcakeImage5 {
    display: none ;
  }

  #FBLink {
    display: inline;
  }
}

@media screen and (max-width: 320px) {
  main {
    grid-template-columns: 100% !important;
    grid-template-rows: 30vh 10vh 20vh 20vh 10vh 20vh 20vh 10vh 20vh 20vh !important;
    row-gap: 20px !important;
  }
  
  .fb-page {
    display: none ;
  }

  .cake-images-mobile {
    grid-row: 3 / 5;
  }

  #cakeImage1 {
    display: none ;
  }

  #cakeSmallImage1 {
    display: grid;
    grid-row: 3 / 4 ;
  }

  #cakeImage2 {
    display: none ;
  }

  #cakeSmallImage2 {
    display:grid;
    grid-row: 4 / 5 ;
  }
  
  #cakeImage3 {
    display: none ;
  }

  #cakeImage4 {
    display: none ;
  }

  #cakeImage5 {
    display: none ;
  }

  .cookies-title {
    grid-row: 5 / 6 !important;
  }

  .cookie-images-mobile {
    grid-row: 6 / 8;
  }

  #cookieImage1 {
    display: none ;
  }  
  
  #cookieSmallImage1 {
    display:grid !important;
    grid-row: 6 / 7 !important;
  }

  #cookieImage2 {
    display: none ;
  }

  #cookieSmallImage2 {
    display:grid !important;
    grid-row: 7 / 8 !important;
  }

  #cookieImage3 {
    display: none ;
  }

  #cookieImage4 {
    display: none ;
  }

  #cookieImage5 {
    display: none ;
  }

  .cupcakes-title {
    grid-row: 8 / 9 !important;
  }

  .cupcake-images-mobile {
    grid-row: 9 / 11;
  }

  #cupcakeImage1 {
    display: none ;
  }

  #cupcakeSmallImage1 {
    display: grid;
    grid-row: 9 / 10 !important;
  }

  #cupcakeImage2 {
    display: none ;
  }

  #cupcakeSmallImage2 {
    display: grid;
    grid-row: 10 / 11 !important;
  }

  #cupcakeImage3 {
    display: none ;
  }

  #cupcakeImage4 {
    display: none ;
  }

  #cupcakeImage5 {
    display: none ;
  }

  #FBLink {
    display: inline;
  }
}