body {
  height: 100vh;
  padding: 5%;
}

/* footer {
  width: 
} */

.container { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* height: 80vh; */
}

.section-part {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

hr {
  border: 1px solid;
}

/* Style buttons */
.btn {
  background-color: white;
  border: none;
  color: black;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: #007bff;
  color: white;
}

h1 { 
  font-weight: bolder;
}

h2 {
  font-weight: bolder;
}

h3 {
  font-weight: bold;
}

/* 
.container {
} */

.console {
  overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (max-width: 480px) {
  h1 {
    font-size: 5vh;
    text-align: center;
  }

  h2 {
    font-size: 3vh;
    padding-bottom: 1vh;
  }

  h3 {
    font-size: 2vh;
  }

  .container {
    max-width: 100%;
  }

  .console {
    height: 60vh;
  }
  .btn-text{
    display: none;
  }
  .section-part {
    min-height: 60vh;
    /* display: block; */
    /* overflow: auto; */
    /* height: 100vh; */
  }

  .btn {
    font-size: 2vh;
  }

  p {
    font-size: 2vh;
    text-align: justify;
  }
} 

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  h1 {
    font-size: 5vh;
    text-align: center;
  }

  h2 {
    font-size: 3vh;
    padding-bottom: 1vh;
  }

  h3 {
    font-size: 2vh;
  }

  .container {
    max-width: 100%;
  }

  .console {
    height: 70vh;
  }

  .section-part {
    min-height: 70vh;
    /* display: block; */
    /* overflow: auto; */
    /* height: 100vh; */
  }

  .btn {
    font-size: 2vh;
  }
  


  p {
    font-size: 2vh;
    text-align: justify;
  }
  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  h1 {
    font-size: 5vh;
    text-align: center;
  }

  h2 {
    font-size: 3vh;
    padding-bottom: 1vh;
  }

  h3 {
    font-size: 2vh;
  }

  .container {
    max-width: 100%;
  }

  .console {
    height: 70vh;
  }

  .section-part {
    min-height: 70vh;
    /* display: block; */
    /* overflow: auto; */
    /* height: 100vh; */
  }

  .btn {
    font-size: 2vh;
  }

  p {
    font-size: 2vh;
    text-align: justify;
  }
  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  h1 {
    font-size: 5vh;
    text-align: center;
  }

  h2 {
    font-size: 3vh;
    padding-bottom: 1vh;
  }

  h3 {
    font-size: 2vh;
  }

  .container {
    max-width: 50%;
  }

  .console {
    height: 60vh;
  }

  .section-part{
    min-height: 60vh;
    /* display: block; */
    /* overflow: auto; */
    /* height: 100vh; */
  }

  .btn {
    font-size: 2vh;
  }

  p {
    font-size: 2vh;
    text-align: justify;
  }
}