*,
*::before,
*::after {
  box-sizing: border-box; }

* {
  margin: 0;
  padding: 0; }

:root {
  --blue-color: #1b44ac;
  --color-heading: #202020;
  --color-body: #505050;
  --color-white: #fff;
  --color-yellow: #e3c923;
  --bg-blue: #342D73;
  --bg-yellow: #ffe53b;
  --bg-red: #FF454A;
  --bg-seagreen: #00C9CD;
  --bg-orange: #FC8440;
  --bg-purple: #6D32CF;
  --bg-green: #12CB97;
  --bg-skyblue: #11ACE0;
  --bg-lightblue: #F1F5FF;
  --bg-darkblue: #2E2767;
  --bg-yellow2: #FCA640;
  --bg-bloodred: #980002;
  --bg-blue-gradient: linear-gradient(270deg, #205BCD 0%, #47BDFF 100%);
  --bg-blue-gradientrtl: linear-gradient(90deg, #205BCD 0%, #47BDFF 100%);
  --fs-small: clamp(0.73rem, calc(0.70rem + 0.12vw), 0.8rem);
  --fs-body: clamp(0.88rem, calc(0.83rem + 0.22vw), 1rem);
  --fs-h4: clamp(1.05rem, calc(0.98rem + 0.35vw), 1.25rem);
  --fs-h3: clamp(1.26rem, calc(1.15rem + 0.53vw), 1.56rem);
  --fs-h2: clamp(1.51rem, calc(1.36rem + 0.77vw), 1.95rem);
  --fs-h1: clamp(1.81rem, calc(1.60rem + 1.09vw), 2.44rem);
  --ff-inter: 'Inter', sans-serif; }

html, body {
  background-color: var(--color-white);
  font-size: var(--fs-body);
  line-height: 1.2;
  font-family: var(--ff-inter);
  height: 100%;
  width: 100%; }

a {
  text-decoration: none; }

img {
  display: block;
  max-width: 100%;
  outline: none; }

ul, ol {
  list-style: none; }

/* media Queries */
.birthdayWrapper {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--bg-purple);
  display: flex;
  flex-flow: column;
  overflow: hidden;
  height: 100%; }
  .birthdayWrapper .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-purple);
    padding: 16px 24px; }
    @media (max-width: 560px) {
      .birthdayWrapper .heading {
        padding: 10px 20px; } }
    .birthdayWrapper .heading b {
      display: inline-block;
      width: auto;
      text-align: left;
      font: 500 22px var(--ff-inter);
      color: #fff;
      letter-spacing: -.5px; }
      @media (max-width: 560px) {
        .birthdayWrapper .heading b {
          font: 600 20px var(--ff-inter); } }
    .birthdayWrapper .heading a {
      display: inline-block;
      width: auto;
      font: 500 14px/40px var(--ff-inter);
      color: var(--color-heading);
      padding: 0 24px;
      border-radius: 50px;
      background-color: var(--bg-yellow); }
      .birthdayWrapper .heading a:hover {
        background-color: #fff; }
  .birthdayWrapper .birthday_con {
    width: 100%;
    padding: 24px 24px 0 24px;
    height: 100%; }
    .birthdayWrapper .birthday_con .birthdayWrapp {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column;
      gap: 38px; }
      .birthdayWrapper .birthday_con .birthdayWrapp .studentInfo_wrapp {
        width: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 16px;
        flex: 1; }
        .birthdayWrapper .birthday_con .birthdayWrapp .studentInfo_wrapp .studentPhoto {
          width: 106px;
          height: 106px;
          border-radius: 16px;
          overflow: hidden; }
          .birthdayWrapper .birthday_con .birthdayWrapp .studentInfo_wrapp .studentPhoto img {
            display: block;
            width: 100%;
            object-fit: cover; }
        .birthdayWrapper .birthday_con .birthdayWrapp .studentInfo_wrapp .student_info {
          width: 100%;
          display: flex;
          flex-flow: column;
          gap: 8px; }
          .birthdayWrapper .birthday_con .birthdayWrapp .studentInfo_wrapp .student_info b {
            display: block;
            width: 100%;
            text-align: center;
            font: 600 18px/1 var(--ff-inter);
            color: var(--color-heading); }
          .birthdayWrapper .birthday_con .birthdayWrapp .studentInfo_wrapp .student_info p {
            text-align: center;
            font: 500 14px/1 var(--ff-inter);
            color: var(--color-heading); }
      .birthdayWrapper .birthday_con .birthdayWrapp .birthday_bg {
        width: 100%;
        flex: 1; }
        .birthdayWrapper .birthday_con .birthdayWrapp .birthday_bg img {
          display: block;
          width: 100%; }