body {
  font-family: 'Cormorant', serif;
   margin: 0;
  }
   
.mainWrapper {
  display: flex;
  flex-direction: column; }

img{
  width: 14.5vw;
  height:auto;
  /* display: inline-block; */
  vertical-align: top;
  margin: 0 auto;
  filter: grayscale(100%); 
  transition: all 0.3s ease-in-out; 
}

.activate-color {
  filter: grayscale(0%); 
}

img.image:hover {
  filter: grayscale(0%); 
}
  
h1{
  font-size:8vw;
  line-height:.75;
  text-align: left;
  color: #333131;
  padding-top: 15vh;
  margin-top: 3vh;
  }

p{
  font-size:1.8vw;
  line-height: 1;
  color: #333131;
  padding-top: 10vh;
  
    }
   
 .textWrapper {
  position:fixed;
  vertical-align: top;
  align-items: left;
  justify-content: left;
  margin-top: 5vh;
  margin-bottom: 10vh;
  padding-left: 25vw;
  }

span.reading-text {
  padding-top: -10vh;
  display: block;
  font-size:1.5vw;
  max-width: 60vw;
  line-height: 1;
  margin: 0 auto;
  }
  
svg {
    display: none;
  }

.handwriting1{
  width: 25vw;
  transform: rotate(3deg);
  opacity: 0.8;
}
.handwriting2{
  width: 25vw;
  transform: rotate(-4deg);
  opacity: 0.8;
}
.handwriting3{
  width: 25vw;
  opacity: 0.8;
}
.handwriting4{
  width: 25vw;
  transform: rotate(2deg);
  opacity: 0.8;
}
.handwriting5{
  width: 25vw;
  transform: rotate(-2deg);
  opacity: 0.8;
}
.handwriting6{
  width: 25vw;
  opacity: 0.8;
}

.handwriting7{
  width: 25vw;
  transform: rotate(8deg);
  opacity: 0.8;
}

.handwriting8{
  width: 25vw;
  transform: rotate(-2deg);
  opacity: 0.8;
}

.handwriting9{
  width: 25vw;
  transform: rotate(10deg);
  opacity: 0.8;
}

.handwriting9{
  width: 25vw;
  transform: rotate(-4deg);
  opacity: 0.8;
}

.handwriting10{
  width: 25vw;
  transform: rotate(2deg);
  opacity: 0.8;
}

.handwriting11{
  width: 25vw;
  transform: rotate(-3deg);
  opacity: 0.8;
}

.handwriting12{
  width: 25vw;
  transform: rotate(2deg);
  opacity: 0.8;
}

.handwriting13{
  width: 25vw;
  transform: rotate(-4deg);
  opacity: 0.8;
}

.handwriting14{
  width: 25vw;
  transform: rotate(2deg);
  opacity: 0.8;
}

.handwriting15{
  width: 25vw;
  transform: rotate(-5deg);
  opacity: 0.8;
}

.handwriting16{
  width: 25vw;
  transform: rotate(6deg);
  opacity: 0.8;
}

.handwriting17{
  width: 25vw;
  transform: rotate(-2deg);
  opacity: 0.8;
}

.handwriting18{
  width: 25vw;
  transform: rotate(4deg);
  opacity: 0.8;
}

.handwriting19{
  width: 25vw;
  transform: rotate(-3deg);
  opacity: 0.8;
}

.handwriting20{
  width: 25vw;
  transform: rotate(2deg);
  opacity: 0.8;
}

.handwriting21{
  width: 25vw;
  transform: rotate(-2deg);
  opacity: 0.8;
}

.handwriting22{
  width: 25vw;
  transform: rotate(4deg);
  opacity: 0.8;
}

.handwriting23{
  width: 25vw;
  transform: rotate(2deg);
  opacity: 0.8;
}

.handwriting24{
  width: 25vw;
  transform: rotate(-4deg);
  opacity: 0.8;
}

.handwriting25{
  width: 25vw;
  opacity: 0.8;
}

.handwriting26{
  width: 25vw;
  transform: rotate(-11deg);
  opacity: 0.8;
}

.handwriting27{
  width: 25vw;
  opacity: 0.8;
}

 @media only screen and (max-width: 1024px) {
  img{
    width: 20vw;}

  h1{
      font-size:10vw;}

  p{
    font-size:2vw
  }
  
span.reading-text {
    font-size: 2vw;
  }
  .textWrapper {
    padding-left:25vw;
  }
  .handwriting1{
    width: 30vw;
  }
  .handwriting2{
    width: 30vw;
  }
  .handwriting3{
    width: 30vw;
  }
  .handwriting4{
    width: 30vw;
  }
  .handwriting5{
    width: 30vw;
  }
  .handwriting6{
    width: 30vw;
  }
  .handwriting7{
    width: 30vw;
  }
  .handwriting8{
    width: 30vw;
  }
  .handwriting9{
    width: 30vw;
  }
  .handwriting10{
    width: 30vw;
  }
  .handwriting11{
    width: 30vw;
  }
  .handwriting12{
    width: 30vw;
  }
  .handwriting13{
    width: 30vw;
  }
  .handwriting14{
    width: 30vw;
  }
  .handwriting15{
    width: 30vw;
  }
  .handwriting16{
    width: 30vw;
  }
  .handwriting17{
    width: 30vw;
  }
  .handwriting18{
    width: 30vw;
  }
  .handwriting19{
    width: 30vw;
  }
  .handwriting20{
    width: 30vw;
  }
  .handwriting21{
    width: 30vw;
  }
  .handwriting22{
    width: 30vw;
  }
  .handwriting23{
    width: 30vw;
  }
  .handwriting24{
    width: 30vw;
  }
  .handwriting25{
    width: 30vw;
  }
  .handwriting26{
    width: 30vw;
  }
  .handwriting27{
    width: 30vw;
  }
 }

 @media only screen and (max-width: 769px) {
  img{
    width: 24vw;}

  h1{
      font-size:12vw;}

  p{
    font-size:3vw
  }
span.reading-text {
    font-size: 3vw;

  }
.textWrapper {
    padding-left: 34vw;
  }
  .handwriting1{
    width: 35vw;
  }
  .handwriting2{
    width: 35vw;
  }
  .handwriting3{
    width: 35vw;
  }
  .handwriting4{
    width: 35vw;
  }
  .handwriting5{
    width: 35vw;
  }
  .handwriting6{
    width: 35vw;
  }
  .handwriting7{
    width: 35vw;
  }
  .handwriting8{
    width: 35vw;
  }
  .handwriting9{
    width: 35vw;
  }
  .handwriting10{
    width: 35vw;
  }
  .handwriting11{
    width: 35vw;
  }
  .handwriting12{
    width: 35vw;
  }
  .handwriting13{
    width: 35vw;
  }
  .handwriting14{
    width: 35vw;
  }
  .handwriting15{
    width: 35vw;
  }
  .handwriting16{
    width: 35vw;
  }
  .handwriting17{
    width: 35vw;
  }
  .handwriting18{
    width: 35vw;
  }
  .handwriting19{
    width: 35vw;
  }
  .handwriting20{
    width: 35vw;
  }
  .handwriting21{
    width: 35vw;
  }
  .handwriting22{
    width: 35vw;
  }
  .handwriting23{
    width: 35vw;
  }
  .handwriting24{
    width: 35vw;
  }
  .handwriting25{
    width: 35vw;
  }
  .handwriting26{
    width: 35vw;
  }
  .handwriting27{
    width: 35vw;
 }}

 @media only screen and (max-width: 425px) {
  img{
    width: 28vw;}

  h1{
      font-size:13vw;}

  p{
    font-size:4vw
  }
  
span.reading-text {
    font-size: 3vw;
    
  }
  
.textWrapper {
    padding-left: 32vw;
  }
  .handwriting1{
    width: 60vw;
  }
  .handwriting2{
    width: 60vw;
  }
  .handwriting3{
    width: 60vw;
  }
  .handwriting4{
    width: 60vw;
  }
  .handwriting5{
    width: 60vw;
  }
  .handwriting6{
    width: 60vw;
  }
  .handwriting7{
    width: 60vw;
  }
  .handwriting8{
    width: 60vw;
  }
  .handwriting9{
    width: 60vw;
  }
  .handwriting10{
    width: 60vw;
  }
  .handwriting11{
    width: 60vw;
  }
  .handwriting12{
    width: 60vw;
  }
  .handwriting13{
    width: 60vw;
  }
  .handwriting14{
    width: 60vw;
  }
  .handwriting15{
    width: 60vw;
  }
  .handwriting16{
    width: 60vw;
  }
  .handwriting17{
    width: 60vw;
  }
  .handwriting18{
    width: 60vw;
  }
  .handwriting19{
    width: 60vw;
  }
  .handwriting20{
    width: 60vw;
  }
  .handwriting21{
    width: 60vw;
  }
  .handwriting22{
    width: 60vw;
  }
  .handwriting23{
    width: 60vw;
  }
  .handwriting24{
    width: 60vw;
  }
  .handwriting25{
    width: 60vw;
  }
  .handwriting26{
    width:60vw;
  }
  .handwriting27{
    width:60vw;}

 }

 @media only screen and (max-width: 375px) {
  img{
    width: 26vw;}

  h1{
      font-size:15vw;}

  p{
    font-size:4vw
  }
  
span.reading-text {
    font-size: 3vw;
    
  }
  
.textWrapper {
    padding-left: 29vw;
  }
  .handwriting1{
    width: 70vw;
  }
  .handwriting2{
    width: 70vw;
  }
  .handwriting3{
    width: 70vw;
  }
  .handwriting4{
    width: 70vw;
  }
  .handwriting5{
    width: 70vw;
  }
  .handwriting6{
    width: 70vw;
  }
  .handwriting7{
    width: 70vw;
  }
  .handwriting8{
    width: 70vw;
  }
  .handwriting9{
    width: 70vw;
  }
  .handwriting10{
    width: 70vw;
  }
  .handwriting11{
    width: 70vw;
  }
  .handwriting12{
    width: 70vw;
  }
  .handwriting13{
    width: 70vw;
  }
  .handwriting14{
    width: 70vw;
  }
  .handwriting15{
    width: 70vw;
  }
  .handwriting16{
    width: 70vw;
  }
  .handwriting17{
    width: 70vw;
  }
  .handwriting18{
    width: 70vw;
  }
  .handwriting19{
    width: 70vw;
  }
  .handwriting20{
    width: 70vw;
  }
  .handwriting21{
    width: 70vw;
  }
  .handwriting22{
    width: 70vw;
  }
  .handwriting23{
    width: 70vw;
  }
  .handwriting24{
    width: 70vw;
  }
  .handwriting25{
    width: 70vw;
  }
  .handwriting26{
    width: 70vw;
  }
  .handwriting27{
    width:70vw;
 }}