body {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
   color: #4A475C !important;
   scroll-behavior: smooth;
}

nav {
   height: 10vh;
   position: sticky !important;
   width: 100%;
   top: 0;
}
.navbar-brand {
   font-family: 'Rock Salt', cursive;
}

.landing-page {
   padding: 50px;
   height: 80vh;
}

.landing-page .title {
   font-size: 48px;
   font-weight: bold;
}

.landing-page p {
   font-size: 24px;
   font-weight: 100;
}

.landing-page .btn-encrypt {
   margin-top: 25px;
   font-size: 20px;
   border-radius: 20px;
   width: 150px;
   background-color: #3AD29F !important;
   margin-right: 10px;
}

.landing-page .btn-decrypt {
   margin-top: 25px;
   font-size: 20px;
   border-radius: 20px;
   width: 150px;
   background-color: #FFD600 !important;
}

label {
   font-weight: bold;
}

.encrypt {
   color: #4A475C !important;
   height: 100vh;
   padding: 10px 50px;
   background-color: #3AD29F;
   background-image: url('../images/wave-encrypt.png');
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: 100%;
}

.encrypt .encrypt-title{
   font-size: 30px;
   font-weight: bold;
}

#previewBefore {
   max-width: 100%;
   max-height: 220px;
}

.previewCanvas {
   max-width: 100%;
   min-height: 200px;
}

#previewAfter {
   max-width: 100%;
   max-height: 220px;
}

.text-preview {
   text-align: center;
   font-weight: 600;
}


.decrypt {
   color: #4A475C !important;
   height: 90vh;
   padding: 10px 50px;
   background-color: #FFD600;
   background-image: url('../images/wave-encrypt.png');
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: 100%;
}

.decrypt .decrypt-title{
   font-size: 30px;
   font-weight: bold;
}

.previewStegoImage {
   max-width: 100%;
   max-height: 220px;
}

.previewCanvasDecrypt {
   min-width: 60%;
   max-height: 0px;
}

@media only screen and (max-width: 600px) {
   .landing-page {
      padding: 50px;
      height: 80vh;
   }
   
   .landing-page .title {
      font-size: 20px;
      font-weight: bold;
   }
   
   .landing-page p {
      font-size: 10px;
      font-weight: 100;
   }
   
   .landing-page .btn-encrypt {
      margin-top: 25px;
      font-size: 10px;
      border-radius: 20px;
      width: 55px;
      background-color: #3AD29F !important;
      margin-right: 10px;
   }
   
   .landing-page .btn-decrypt {
      margin-top: 25px;
      font-size: 10px;
      border-radius: 20px;
      width: 55px;
      background-color: #FFD600 !important;
   }

   .img-landingpage {
      width: 200px;
   }
   
   .encrypt {
      color: #4A475C !important;
      height: 100vh;
      padding: 10px 50px;
      background-color: #3AD29F;
      background-image: url('../images/wave-encrypt.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 100%;
   }
   
   .encrypt .encrypt-title{
      font-size: 20px;
      font-weight: bold;
   }

   .btn-combine, .btn-reset-encrypt {
      margin-top: 25px;
      font-size: 10px;
      width: 55px !important;
      padding: 0;
      text-align: center;
   }
   
   .encrypt input, .encrypt textarea {
      font-size: 10px;
   }

   #previewBefore {
      max-width: 100%;
      max-height: 180px;
   }
   
   #previewAfter {
      max-width: 100%;
      max-height: 180px;
   }
   
   .text-preview {
      margin-top: 10px;
      text-align: center;
      font-weight: 600;
      font-size: 10px;
   }

   .decrypt {
      color: #4A475C !important;
      height: 90vh;
      padding: 10px 50px;
      background-color: #FFD600;
      background-image: url('../images/wave-encrypt.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 100%;
   }
   
   .decrypt .decrypt-title{
      font-size: 20px;
      font-weight: bold;
   }

   .decrypt input, .decrypt textarea {
      font-size: 10px;
   }

   .btn-decyrpt, .btn-reset-decyrpt {
      text-align: center !important;
      margin-top: 25px;
      font-size: 10px;
      text-align: center;
   }

   .btn-decyrpt {
      width: 65px !important;
   }

   .btn-reset-decyrpt {
      width: 55px !important;
   }
   
   .previewStegoImage {
      max-width: 100%;
      max-height: 180px;

   }
   
   label {
      font-size: 12px;
   }
}

/* Style buttons */
.btn-download {
   background-color: DodgerBlue;
   border: none;
   color: white;
   padding: 12px 30px;
   cursor: pointer;
   font-size: 20px;
 }
 
 /* Darker background on mouse-over */
.btn-download:hover {
   background-color: RoyalBlue;
 }