@media only screen and (min-width: 1366px) {
  .v-hero {
    margin-left: 10vmin;
  }
  .v-watch {
    display: none;
  }
  .lifeline {
    position: absolute;
    margin-top: -70px;
    margin-left: -10px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .baptism,
  .school,
  .wedding,
  .birth,
  .college,
  .research,
  .daughters,
  .retirement,
  .golden-wedding {
    margin: 0 !important;
    margin-top: 0 !important;
    width: 1200px;
  }

  .timeline .birth {
    padding-top: 180px !important;
    margin-left: -60px !important;
  }
  .timeline .baptism {
    width: 1300px;
    padding-top: 70px !important;
    margin-left: -50px !important;
  }
  .timeline .school {
    margin-top: -50px !important;
  }
  .timeline .college {
    margin-top: -20px !important;
    margin-left: 120px !important;
  }
  .timeline .wedding {
    width: 1300px;
    margin-top: 120px !important;
    margin-left: -240px !important;
  }
  .timeline .daughters {
    margin-top: 100px !important;
    margin-left: 100px !important;
  }
  .timeline .research {
    width: 1300px;
    margin-top: 200px !important;
    margin-left: -70px !important;
  }
  .timeline .grandson {
    margin-top: 90px !important;
    margin-left: -120px !important;
  }
  .timeline .retirement {
    margin-top: 100px !important;
    margin-left: -100px !important;
  }

  .timeline .golden-wedding {
    margin-top: 120px !important;
    margin-left: -70px !important;
  }

  .timeline .year-nineteen {
    margin-top: 250px !important;
  }
  .ball-toy {
    position: relative;
    margin-top: -700px;
    margin-bottom: -260px;
    right: 62rem;
    width: 800px;
  }

  .daisy {
    position: relative;
    align-self: end;
    margin-top: -400px;
    margin-bottom: -80px;
    width: 250px;
  }
  .passport {
    position: relative;
    margin-top: -1100px;
    margin-bottom: 300px;
    left: 53rem;
    width: 750px;
  }
}

@media only screen and (max-width: 800px) {
  body {
    margin-left: -1px;
  }
  .desktop-only {
    display: none;
  }
  .wrapper img {
    width: 101vmin !important;
    margin-left: -1px;
    overflow-x: hidden;
  }
  .passport {
    display: none;
  }
  .timeline img {
    width: 110%;
    height: auto;
    margin-left: 0;
  }
  .language {
    width: 22vmin !important;
    margin-bottom: 30px;
  }
  .v-hero {
    margin-top: -2rem;
    overflow-x: hidden;
  }
  .v-calendar {
    width: 72vmin;
    margin-left: 5rem;
  }
  .v-watch {
    width: 60vmin;
    z-index: -1;
    margin-left: -5rem;
    margin-top: 3rem;
  }
  .wrapper {
    justify-content: center;
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
  }
  .timeline {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    margin-right: -1px !important;
    overflow-x: hidden;
  }
  .timeline img {
    max-width: 100%;
    width: 100vmin;
    height: auto;
  }
  .birth {
    transform: translateY(-2rem);
  }
  .college,
  .wedding {
    transform: translateY(-13rem);
  }
  .daughters,
  .research,
  .grandson {
    transform: translateY(-33rem);
  }
  .retirement,
  .golden-wedding {
    transform: translateY(-43rem);
  }
  .daisy,
  .ball-toy {
    display: none;
  }

  /* mobile navbook */
  .menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0 !important;
  }
  .nineteen-section {
    margin-top: -42rem !important;
    margin-bottom: 10rem !important;
  }

  .pages {
    display: flex;
    position: absolute;
  }

  .navbook {
    width: 110vmin !important;
    margin-bottom: -8vmin !important;
    margin-left: -5vmin !important;
    overflow-x: hidden !important;
    z-index: 2;
  }

  .milestones {
    margin: -3vmin 0 0 0 !important;
  }
  .stories {
    margin: 1vmin 0 0 -3vmin;
    z-index: 1;
  }
  .gallery {
    margin: -4vmin 0 0 -6vmin;
  }

  .my-granny {
    margin: 1vmin 0 0 -3vmin;
    z-index: 1;
  }

  .remember {
    margin: -4vmin 0 0 -6vmin;
  }

  .map {
    margin: 1.5vmin 0 0 -4vmin;
    z-index: 1;
  }
  .nanas-words {
    margin: -3vmin 0 0 -3vmin;
  }

  .pages img {
    width: 18vmin !important;
    height: auto;
    transition: hover 200ms ease-in-out;
  }

  .pages img:hover {
    width: 18vmin !important;
    transform: translateY(-1rem);
  }
}

@media only screen and (min-width: 801px) and (max-width: 1365px) {
  .v-calendar {
    width: 85% !important;
    height: auto;
    margin-left: 10vmin;
    margin-bottom: 50px;
  }
  .v-watch {
    display: none;
  }
  .timeline {
    display: flex;
    flex-direction: column;
  }

  .wrapper {
    position: relative;
    padding-left: 2rem;
    padding-right: 5rem;
  }

  .daisy {
    align-self: end;
    margin-top: -35rem;
    margin-bottom: 10px;
    width: 200px;
    z-index: 4;
  }

  .wrapper > .baptism {
    padding-left: -10rem !important;
  }

  .wedding {
    margin-left: -50px;
  }

  .birth,
  .baptism,
  .school,
  .college,
  .wedding,
  .daughters,
  .research,
  .grandson,
  .retirement,
  .golden-wedding,
  .year-nineteen {
    width: 100%;
    height: auto;
  }

  .golden-wedding {
    margin-top: -150px !important;
  }
  .language {
    width: 15vmin !important;
  }
  .desktop-only {
    display: none;
  }
  .ball-toy {
    position: relative;
    margin-top: -400px;
    left: -52rem;
    width: 600px;
    margin-bottom: -300px;
  }

  .passport {
    display: none;
  }
}

img {
  filter: contrast(100%);
}

body {
  background: url("./assets/bg.webp");
  background-size: 100%;
  background-attachment: scroll;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  min-height: 100vh;
  width: 100vw;
}

.v-hero,
.timeline img {
  pointer-events: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.wrapper {
  transition: all 0.5s ease-in-out;
}

/* timeline margins */

.birth,
.school,
.college,
.grandson,
.retirement,
.golden-wedding {
  margin-top: -3vmin;
}

.language-selector {
  transition: all 0.5s ease-in-out;
  display: flex;

  user-drag: none;
  -moz-user-drag: none;
  -webkit-user-drag: none;
}

.language {
  cursor: pointer !important;
  margin-top: 4.375rem;
  margin-right: 10.3vmin;
  margin-left: auto;
  margin-bottom: 5vmin;
  width: 10vmin;
  height: auto;
}

.nav img {
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;

  user-drag: none;
  -moz-user-drag: none;
  -webkit-user-drag: none;
}

/* timeline images vertical margins */

.v-hero {
  align-items: center;
  justify-content: center;
  display: flex;
}

.timeline {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

/* navbook */

.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20vmin;
}

.pages {
  display: flex;
  position: absolute;
}

.navbook {
  width: 90vmin;
  margin-bottom: -7vmin;
  margin-left: -4vmin;
  z-index: 2;
}

.milestones {
  margin: -3vmin 0 0 5vmin;
}
.stories {
  margin: 1vmin 0 0 -3vmin;
  z-index: 1;
}
.gallery {
  margin: -4vmin 0 0 -6vmin;
}

.my-granny {
  margin: 1vmin 0 0 -3vmin;
  z-index: 1;
}

.remember {
  margin: -4vmin 0 0 -6vmin;
}

.map {
  margin: 1.5vmin 0 0 -4vmin;
  z-index: 1;
}
.nanas-words {
  margin: -3vmin 0 0 -3vmin;
}

.pages img {
  width: 14vmin;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

.pages img:hover {
  width: 14vmin;
  transform: translateY(-1rem);
}