/* Simple styles for home screen header */
:root{
	--bg1: #7f7fd5;
	--bg2: #86a8e7;
	--bg3: #91eae4;

.two-column-layout {
  display: grid;
    /* Creates two columns of equal width */
  grid-template-columns: 1fr 1fr;
    /* Adds space between the columns */
  gap: 20px;
  padding: 20px; /* Optional: adds space around the content */
  border-radius: 25px;
  background-color: #315893;
  justify-content: center;
  align-items: center;
  width: 72%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 20px;
}
.column-one {
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 20px;
}


.column-two {
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 20px;
}

.content{
  border-radius: 25px;
  background-color: #315893;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 20px;
  justify-content: center;
  align-items: center;
}
.content:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.btn {
  background: none;
  outline: none;
  border: none;
}

.navigation-row {
  display: flex; /* Makes items align in a row by default */
  justify-content: center; /* Centers the images horizontally within the container */
  align-items: center; /* Centers the images vertically (if they have different heights) */
  gap: 10px; /* Adds space between the images */
  border-radius: 25px;
  background-color: #000000;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}
.image-row {
  display: flex; /* Makes items align in a row by default */
  justify-content: center; /* Centers the images horizontally within the container */
  align-items: center; /* Centers the images vertically (if they have different heights) */
  gap: 10px; /* Adds space between the images */
  border-radius: 25px;
  background-color: #000000;
  margin-left: 15px;
  margin-right: 15px;
}


.icon-section {
  position: relative;
}
.corner-icon {
  position: absolute; /* Position the icon absolutely */
  top: 10px;          /* Distance from the top edge */
  right: 10px;        /* Distance from the right edge */
}



/* finance module */
.module {
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  background-color: #264574;
  padding: 5px;
  margin: 5px;
}

.lesson-container {
  border-radius: 25px;
  background-color: #b8cff0;
  padding: 5px;
  margin: 5px;
  justify-content: center; 
  align-items: center;
}
.lesson {
  position: relative;
  border-radius: 25px;
  background-color: #315893;
  padding: 20px;
  margin: 20px;
  justify-content: center; 
  align-items: center;
}
.lesson-corner-icon {
  position: absolute; 
  bottom: 5px;          
  right: 5px;    
}


.profile-card {
    max-width: 400px;
    margin: 40px auto;
    padding: 25px;
    border-radius: 12px;
    background: #f7f7f7;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.profile-card h2 {
    margin-bottom: 15px;
}

.profile-card p {
    margin: 8px 0;
    font-size: 16px;
}

html,
body {
  height: 100%;
  width: 100%;
}

}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif}
body{background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));color:#fff}
.top-text{padding:48px 16px;text-align:center}
.top-text .container{max-width:900px;margin:0 auto}
.top-text h1{margin:0;font-size:clamp(1.6rem,4vw,3.2rem);letter-spacing:0.5px}
.top-text .subtitle{margin-top:8px;opacity:0.95;font-size:clamp(0.9rem,2.2vw,1.15rem)}
.content{padding:40px 16px;max-width:900px;margin:0 auto;background:rgba(255,255,255,0.06);border-radius:8px}


* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dino {
  width: 14em;
  height: 16em;
  margin: 0 auto;
  position: relative;
  -webkit-animation: walk-bounce-animation 1.5s infinite;
  animation: walk-bounce-animation 1.5s infinite;
}

.dino__head {
  height: 45%;
  margin-left: 33.333%;
  width: 66.666%;
  position: relative;
  margin-top: 15%;
}

.dino__head__back {
  background-color: #00a652;
  border: 0.25em solid #000;
  border-width: 0.35em 0 0 0.25em;
  border-top-left-radius: 100% 47%;
  height: 100%;
  width: 50%;
}

.dino__head__topfront {
  background-color: #00a652;
  border: 0.25em solid #000;
  border-top-right-radius: 100%;
  border-width: 0.35em 0.35em 0 0;
  display: block;
  height: 50%;
  left: 50%;
  position: absolute;
  top: 0;
  width: 50%;
}

.dino__head__mouth {
  background-color: #00a652;
  border: 0.25em solid #000;
  border-bottom-right-radius: 100%;
  border-width: 0 0.35em 0.25em 0;
  display: block;
  height: 30%;
  left: 70%;
  position: absolute;
  top: 50%;
  width: 30%;
}

.dino__head__throat {
  background-color: #00a652;
  height: calc(30% + 0.7em);
  left: 40%;
  position: absolute;
  top: 50%;
  width: 30%;
}

.dino__head__throat:after {
  background-color: #86a8e7;
  border: 0.35em solid #000;
  border-top-left-radius: 100%;
  border-width: 0.25em 0 0 0.25em;
  content: " ";
  display: block;
  height: 40%;
  left: 0;
  position: absolute;
  top: 80%;
  width: 100%;
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.dino__head__eye {
  background-color: #000;
  border-radius: 50% 50% 46% 54% / 50% 45% 55% 50%;
  display: block;
  height: 1em;
  left: 65%;
  position: absolute;
  top: 27%;
  width: 1em;
  -webkit-animation: blink-animation 3s infinite;
  animation: blink-animation 3s infinite;
}

.dino__body {
  position: relative;
  height: 33.333%;
  width: 100%;
}

.dino__body__mid {
  background-color: #00a652;
  display: block;
  height: 100%;
  left: 13%;
  position: absolute;
  width: 50%;
}

.dino__body__mid:before {
  background-color: #86a8e7;
  border: 0.35em solid #000;
  border-bottom-right-radius: 100% 100%;
  border-width: 0 0.25em 0.35em 0;
  content: " ";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: -10%;
  width: 40%;
}

.dino__body__mid:after {
  background-color: #00a652;
  border: 0.35em solid #000;
  border-bottom-right-radius: 100% 50%;
  border-width: 0 0.25em 0.35em 0;
  content: " ";
  display: block;
  height: 100%;
  left: 80%;
  position: absolute;
  top: 20%;
  width: 30%;
  -webkit-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

.dino__arm {
  background-color: #00a652;
  border: 0.35em solid #000;
  border-top-right-radius: 30% 50%;
  border-bottom-right-radius: 50% 70%;
  border-width: 0.25em 0.25em 0.25em 0;
  content: " ";
  position: absolute;
  display: block;
  height: 30%;
  left: 55%;
  bottom: 80%;
  width: 30%;
  -webkit-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-animation: arm-sway-animation 15s infinite;
  animation: arm-sway-animation 15s infinite;
}

.dino__bottom {
  background-color: #00a652;
  border: 0.35em solid #000;
  border-bottom-right-radius: 100%;
  border-width: 0 0.35em 0.35em 0;
  content: " ";
  position: relative;
  display: block;
  height: 22%;
  left: 3%;
  bottom: 4.3%;
  width: 54%;
  -webkit-transform: rotate(-20deg) scaleX(-1);
  -ms-transform: rotate(-20deg) scaleX(-1);
  transform: rotate(-20deg) scaleX(-1);
}

.dino__tail {
  background-color: #00a652;
  border: 0.35em solid #000;
  border-top-right-radius: 200%;
  border-top-left-radius: 200%;
  border-width: 0.35em 0.25em 0 0.25em;
  content: " ";
  position: absolute;
  display: block;
  height: 12.5%;
  left: 0;
  bottom: 12%;
  width: 14%;
  -webkit-transform: rotate(-80deg);
  -ms-transform: rotate(-80deg);
  transform: rotate(-80deg);
}

.dino__back-leg {
  background-color: #00a652;
  border: 0.35em solid #000;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  border-width: 0 0.25em 0.25em 0.25em;
  content: " ";
  position: absolute;
  display: block;
  height: 7%;
  left: 48%;
  bottom: 4%;
  width: 12%;
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
  -webkit-animation: back-leg-animation 3s infinite;
  animation: back-leg-animation 3s infinite;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.dino__front-leg {
  background-color: #00a652;
  border: 0.35em solid #000;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  border-width: 0 0.25em 0.25em 0.25em;
  content: " ";
  position: absolute;
  display: block;
  height: 8%;
  left: 41%;
  bottom: 3%;
  width: 14%;
  -webkit-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  transform: rotate(-12deg);
  -webkit-animation: front-leg-animation 3s infinite;
  animation: front-leg-animation 3s infinite;
}

.floor {
  background-color: #303030;
  border-radius: 100%;
  display: block;
  height: 2em;
  position: relative;
  margin: 0 auto;
  width: 15em;
  top: -1.5em;
  left: -1em;
  opacity: 0.25;
  z-index: -1;
  -webkit-animation: shadow-animation 1.5s infinite;
  animation: shadow-animation 1.5s infinite;
}

@-webkit-keyframes blink-animation {
  0% {
    margin-top: 0;
    height: 1em;
  }

  1% {
    margin-top: 0.35em;
    height: 0.3em;
  }

  2% {
    margin-top: 0.45em;
    height: 0.1em;
  }

  4% {
    margin-top: 0.35em;
    height: 0.3em;
  }
  6% {
    margin-top: 0;
    height: 1em;
  }
}

@keyframes blink-animation {
  0% {
    margin-top: 0;
    height: 1em;
  }

  1% {
    margin-top: 0.35em;
    height: 0.3em;
  }

  2% {
    margin-top: 0.45em;
    height: 0.1em;
  }

  4% {
    margin-top: 0.35em;
    height: 0.3em;
  }
  6% {
    margin-top: 0;
    height: 1em;
  }
}

@-webkit-keyframes arm-sway-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  20% {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
  }

  40% {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }

  60% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  80% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}

@keyframes arm-sway-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  20% {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
  }

  40% {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }

  60% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  80% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}

@-webkit-keyframes front-leg-animation {
  0% {
    left: 41%;
    bottom: 3%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  15% {
    left: 37%;
    bottom: 1%;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  20% {
    left: 35%;
    bottom: 2%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  40% {
    left: 38%;
    bottom: 3%;
  }
}

@keyframes front-leg-animation {
  0% {
    left: 41%;
    bottom: 3%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  15% {
    left: 37%;
    bottom: 1%;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  20% {
    left: 35%;
    bottom: 2%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  40% {
    left: 38%;
    bottom: 3%;
  }
}

@-webkit-keyframes back-leg-animation {
  0% {
    left: 48%;
    bottom: 4%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  15% {
    left: 40%;
    bottom: 2%;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  20% {
    left: 35%;
    bottom: 2%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  40% {
    left: 38%;
    bottom: 3%;
  }
}

@keyframes back-leg-animation {
  0% {
    left: 48%;
    bottom: 4%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  15% {
    left: 40%;
    bottom: 2%;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  20% {
    left: 35%;
    bottom: 2%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  40% {
    left: 38%;
    bottom: 3%;
  }
}

@-webkit-keyframes walk-bounce-animation {
  0%,
  100% {
    -webkit-transform: translateY(0.25em);
    transform: translateY(0.25em);
  }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes walk-bounce-animation {
  0%,
  100% {
    -webkit-transform: translateY(0.25em);
    transform: translateY(0.25em);
  }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes shadow-animation {
  0%,
  100% {
    width: 15em;
  }
  50% {
    width: 15.25em;
  }
}

@keyframes shadow-animation {
  0%,
  100% {
    width: 15em;
  }
  50% {
    width: 15.25em;
  }
}