body, html {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
  background-color: #F9F9F9;
}

.center-div {
  width: 50%; /* Set a width other than 100% */
  margin-left: auto;
  margin-right: auto;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: rgb(200, 100, 100);
   color: white;
   text-align: center;
}

.container {
  width: 50%;
  max-width: 256px;
  aspect-ratio: 1 / 1;
}

@keyframes check-svg-path-anim {
  0%{
    stroke-dasharray:0 400;
    stroke-width:50;
  }
  to{
    stroke-dasharray:400 0;
    stroke-width:20;
  }
}
@keyframes check-svg-circle-anim {
  0%{
    stroke-dasharray:0 2023;
    stroke-width:50;
  }
  to {
    stroke-dasharray:2023 0;
    stroke-width:20
  }
}
.check-svg-commonds {
  fill:none;
  stroke:#198754;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:20;
  transform-origin:50% 50%;
}
.check-svg-circle {
  stroke-dasharray: 2023;
  stroke-dashoffset: 2023;
  transform: rotate(-90deg);
  animation: 1s ease-in-out 0.5s 1 normal forwards running check-svg-circle-anim;
}
.check-svg-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 0.5s ease-in-out 1s 1 normal forwards running check-svg-path-anim;
}

style1{
  body {background-color: DodgerBlue;}
  h1 {color: red;}
  h2 {color: green;}
  h3 {color: blue;}
  p {color: grey;}
}


title {
  color: blueviolet;
  font-size: 2em;
  margin-top: 0.67em;
}

plain {
  color: orangered;
  font-size: 2em;
  margin-top: 0.67em;
  text-align: center;
}


h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
color: brown;
}

h3 {
display: block;
font-size: 5em;
color: red;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}