/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #caf0fe;
  color: #232323;
  font-family: Verdana;
}

#borderDemo {
border: 8px ridge #CCCCFF;
border-radius: 16px;
}

.wave-container {  
  height: 40vh;
  background-color: rgba(200, 232, 251, 0.98);
  position: relative;
}

.wave-container::before {   
  content: "";
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 27vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  111' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 81L50 76C100 71 200 61 300 41C400 21 500 -8 600 1C700 11 800 61 900 81C1000 101 1100 91 1150 86L1200 81V111H1150C1100 111 1000 111 900 111C800 111 700 111 600 111C500 111 400 111 300 111C200 111 100 111 50 111H0V81Z' fill='%23f0ecf6'/></svg>");
}

@media(max-width:850px) {
  .wave-container::before {    
    height: 25px
  }  
}