@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&family=Teachers:ital,wght@0,400..800;1,400..800&display=swap');

/* Liquid Glass Code */

:root,:host{ 
    --glass-frost: 0.5;
    --glass-saturation: 1.2;
    --filter-id: url(#glass-filter-_r_b_);
}


.liquidglass, .containerdiv, button{
    z-index: 1;
    offset-path: var(--glass-frost);
    background: rgba(70 130 180 / var(--glass-frost, 0));
    -webkit-backdrop-filter: var(--filter-id,url(#glass-filter))saturate(var(--glass-saturation,1));
    backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
    box-shadow: inset 0 0 2px 1px #ffffff59, inset 0 0 10px 4px #ffffff26, inset 0 4px 16px #11111a0d, inset 0 8px 24px #11111a0d, inset 0 6px 56px #11111a0d;
    box-shadow: inset 0 0 2px 1px lab(100% 0 0 / .35), inset 0 0 10px 4px lab(100% 0 0 / .15), inset 0 4px 16px lab(5.32203% 1.61424 -5.88284 / .0509804), inset 0 8px 24px lab(5.32203% 1.61424 -5.88284 / .0509804), inset 0 6px 56px lab(5.32203% 1.61424 -5.88284 / .0509804);
    border-radius: calc(16px * var(--brm));
    transition: border-radius 0.5s;
    corner-shape: squircle;
    padding: 25px;
    color: whitesmoke;
}

button {
  z-index: 1;
  offset-path: var(--glass-frost);
  background: rgba(70 130 180 / var(--glass-frost, 0));
  -webkit-backdrop-filter: var(--filter-id,url(#glass-filter))saturate(var(--glass-saturation,1));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow: inset 0 0 2px 1px #ffffff59, inset 0 0 10px 4px #ffffff26, inset 0 4px 16px #11111a0d, inset 0 8px 24px #11111a0d, inset 0 6px 56px #11111a0d;
  box-shadow: inset 0 0 2px 1px lab(100% 0 0 / .35), inset 0 0 10px 4px lab(100% 0 0 / .15), inset 0 4px 16px lab(5.32203% 1.61424 -5.88284 / .0509804), inset 0 8px 24px lab(5.32203% 1.61424 -5.88284 / .0509804), inset 0 6px 56px lab(5.32203% 1.61424 -5.88284 / .0509804);
  border-radius: calc(8px * var(--brm));
  transition: border-radius 1s;
  corner-shape: squircle;
  padding: 25px;
  color: whitesmoke;
}

.containerdiv:hover, .liquidglass:hover{
  border-radius: calc(32px * var(--brm));
  corner-shape: squircle;
}

button:hover {
  border-radius: calc(50px * var(--brm));
  corner-shape: squircle;
  box-shadow: inset 0 0 2px 1px #ffffff59, inset 0 0 10px 4px #ffffff26, inset 0 4px 16px #11111a0d, inset 0 8px 24px #11111a0d, inset 0 6px 56px #11111a0d;
  box-shadow: inset 0 0 2px 1px lab(100% 0 0 / .35), inset 0 0 15px 5px lab(100% 0 0 / .15), inset 0 6px 22px lab(5.32203% 1.61424 -5.88284 / .0509804), inset 0 8px 24px lab(5.32203% 1.61424 -5.88284 / .0509804), inset 0 6px 56px lab(5.32203% 1.61424 -5.88284 / .0509804);
}


/* Squircle Corner Code */

:root {
  --brm: 1;
}

@supports (corner-shape: squircle) {
  :root {
    --brm: 2;
  }
}

/* Regular */

body {
  background-color: rgb(12, 51, 111);
  color:aliceblue;
}

* {
    
    rotate: 0deg;
    animation-name: bodyanimation;
    animation-duration: 1s;
}

@keyframes bodyanimation {
  0% {transform: rotate3d(random(0,2), random(0,2), random(0,2), 0deg);} 
  100% {transform: rotate3d(1, 1, 1, 720deg);}
}


h1, h2, h3, h4 {
  font-family: 'Teachers', sans-serif;
}

p, button, label, input, li {
  font-family: 'Elms Sans', sans-serif;
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 40px;
}

#section1 div {
  height: 300px;
}

#chartContainer {
    width: 300px;
    height: 280px;

    border-radius: 24px;
    corner-shape: squircle;
    overflow: hidden;

    background-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}