:root {
  --background: #ecf0f3;
  --text-dark: #1e2125;
  --text-medium: #3c3e41;
  --text-light: #4d4f52;
  --rule: #dce1e4;
  --gradient-light: #ffffff;
  --gradient-dark: #e3e9ed;
  --shadow-light: #ffffff;
  --shadow-dark: #e3e9ed;
  --accent: #007a45;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-family: "Poppins", sans-serif;
  font-size: 14pt;
  color: var(--text-light);
}

body {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--background);
}

.accent-color {
  color: var(--accent);
}

.accent-background {
  background-color: var(--accent);
}

.shadow {
  box-shadow: 0.3rem 0.3rem 0.6rem rgb(220, 227, 236),
    -0.3rem -0.3rem 0.6rem rgb(244, 247, 249);
}

.gradient {
  background: rgb(227, 233, 237);
  background: linear-gradient(
    135deg,
    rgba(227, 233, 237, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.round {
  border-radius: 0.5rem;
}

.zoom {
  transition: transform 0.2s; /* Animation */
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(
    1.2
  ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.frosted {
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  /*background-color: var(--background);*/
  /*background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);*/
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .frosted {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/*****************************/
/* HOVER UNDERLINE ANIMATION */
/*****************************/

.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--accent);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  cursor: pointer;
}

.hover-underline-animation:hover {
  text-decoration: none;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* FONT FACE */
/* devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2)
    format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC,
    U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2)
    format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC,
    U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}