* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: Montserrat;
    src: url(Montserrat-VariableFont_wght.ttf);
  }

body {  
    font-family: Montserrat, sans-serif;
    background-color: #f9edc2;
    color: #5d3277;
    display: flex;
    height: 100vh;
    background-size: 60px 60px;
    background-image:
    linear-gradient(to right, #f8f9f4 3px, transparent 1px),
    linear-gradient(to bottom, #f8f9f4 3px, transparent 1px);
    background-attachment: fixed;
}

.header {
    position: fixed;
    top: 0;
    padding: 10px 16px;
    background: #5d3277;
    color: #f8f9f4;
    height: 100vh;
  }

.container {
  position: relative;
  width: max(50vw, 95vmin);
  margin: 0 auto;
  padding: 5vh;
  display: flex;
  flex-direction: column;
  align-content: space-around;
  z-index: 3;
  row-gap: 5vh;
}

.container > div {
  margin: auto;
  position: relative;
  background-color: #f8f9f4;
  padding: 1em 2.5ch;
  border-radius: 15px;
  box-shadow: 10px 10px 0px #5d3277;
  width: 100%;
}

.container > div > sparkle1 {
  position: absolute;
  bottom: -35px;
  right: 0px;
  z-index: 4;
  color: #ccb4c5;
  transform:scale(1,1.25);
  user-select: none; 
  font-size: 80px;
}

.container > div > sparkle2 {
  position: absolute;
  bottom: 20px;
  right: -10px;
  z-index: 4;
  color: #ccb4c5;
  transform:scale(1,1.25);
  user-select: none; 
  font-size: 40px;
}

.curved-edge-front {
    position: fixed;
    bottom: 0%;
    right:0%;
    --c: 30%; /* control the curvature (works with percentage) */
    z-index: 2;
    height: 30%;
    width: 50%;
    /* you can also update the 60%  */
    mask: radial-gradient(60% var(--c) at top,#0000 calc(100% - 2px),#000);
    background: #a16db7;
  }

.rounded-edge-front {
    position: fixed;
    bottom: 0%;
    left: 0%;
    height: 30%;
    width: 50%;
    aspect-ratio: 3/2;
    z-index: 2;
    /* update the 85% to control the curvature
       you can also update the 50% to control the position
    */
    clip-path: ellipse(90% 100% at 50% 100%);
    background: #a16db7;
  }

  .curved-edge-back {
    position: fixed;
    bottom: 0%;
    left:0%;
    --c: 40%; /* control the curvature (works with percentage) */
    z-index: 1;
    height: 40%;
    width: 50%;
    /* you can also update the 60%  */
    mask: radial-gradient(60% var(--c) at top,#0000 calc(100% - 2px),#000);
    background: #ccb4c5;
  }

.rounded-edge-back {
    position: fixed;
    bottom: 0%;
    right: 0%;
    height: 38.5%;
    width: 50%;
    aspect-ratio: 3/2;
    z-index: 1;
    /* update the 85% to control the curvature
       you can also update the 50% to control the position
    */
    clip-path: ellipse(85% 100% at 50% 100%);
    background: #ccb4c5;
  }

.sparkle {
    position: absolute;
    z-index: 4;
    color: #a16db7;
    transform:scale(1,1.25);
    user-select: none; 
    z-index: 1;
  }

h1 {
    text-align: center;
    margin-bottom: 9px;
}

h2 {
  margin-bottom: 5px;
}

h3 {
    margin-bottom: 5px;
    font-weight: bold;
}

#header h3 {
  margin-bottom: 12px;
  font-weight: normal;
}

p {
  margin-bottom: 0.5em;
  font-weight: normal;
}

form {
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

input {
    width: 85%;
    padding: 10px;
    border: 1px solid #5d3277;
    border-radius: 5px;
    margin-bottom: 20px;
}

button {
    margin-left: 2ch;
    padding: 10px;
    background-color: #5d3277;
    color: #f8f9f4;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
}

button:hover {
    background-color: #a16db7;
}

ul li {
  margin-left: 20px;
  margin-bottom: 5px;
}

ul.comment li {
  margin-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

#header a:link {
    color: #f8f9f4;
    background-color: transparent;
    text-decoration: underline;
  }
  
#header a:visited {
    color: #f8f9f4;
    background-color: transparent;
    text-decoration: none;
  }
  
#header a:hover {
    color: #f9edc2;
    background-color: transparent;
    text-decoration: underline;
  }
  
#header a:active {
    color: #ccb4c5;
    background-color: transparent;
    text-decoration: underline;
  }

a:link {
    color: #5d3277;
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:visited {
    color: #5d3277;
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:hover {
    color: #a16db7;
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:active {
    color: #ccb4c5;
    background-color: transparent;
    text-decoration: underline;
  }