/* css variables */
:root {
  --primary-text-color: #051f20;
  --secondary-text-color: #0b2b26;
  --primary-btn-color: #235347;
  --secondary-btn-color: #daf1de;
  --primary-border-color: #163832;
  --secondary-border-color: #436850;
  --page-bg-color: #6c706d;
  --primary-bg-color: #365f4a;
  --secondary-bg-color: #64896f;
  --primary-bg-gradient: linear-gradient(
    to right,
    rgb(121, 146, 126),
    #758459,
    #9dac81,
    #5a8772,
    rgb(121, 146, 126)
  );
}
/* General styles */
body {
  width: 100%;
  height: 100vh;
  background-color: var(--page-bg-color);
}
main {
  margin-top: 3rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  justify-content: center;
  align-items: center;
}
html {
  font-size: 62.5%;
}
.main-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background: var(--primary-bg-gradient);
}
.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 20rem);
  justify-content: center;
  align-items: center;
  grid-template-rows: auto;
  gap: 2rem;
  padding: 0.5rem;
  border: 1px dashed #051f20;
}
.sample-parent {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: var(--primary-bg-color);
}
.scoop {
  background-color: var(--secondary-bg-color);
  width: 36.4rem;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
}
@supports (corner-shape: scoop) {
  .shape1 {
    corner-shape: scoop;
  }
}
@supports (corner-shape: notch) {
  .shape2 {
    corner-shape: notch;
  }
}
@supports (corner-shape: bevel) {
  .shape3 {
    corner-shape: bevel;
  }
}
@supports (corner-shape: straight) {
  .shape4 {
    corner-shape: straight;
  }
}

/* border styling */