@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --theme-green: #2f9f62;
  --theme-yellow: #f3d667;
  --theme-turquoise: #2dc3b2;
  --theme-bg-dark: #0f2b22;
  --theme-text: #f4fff7;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
background-image: linear-gradient(rgba(10, 31, 24, 0.6), rgba(10, 31, 24, 0.78)), url("../img/abstract-gradient-circles-background-with-yellow-and-green-colors-vector.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--theme-text);
font-family: "Poppins", sans-serif;
font-size: 20px;     /* bigger text */
font-weight: 500;

}

header h1 {
  margin: 0;
}

#Name {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  margin: 10px;
  font-size: 30px;

}


.class1 {
  border: 4px solid var(--theme-turquoise);
  padding: 10px;
  margin: 20px auto;
  width: 80%;
  max-width: 600px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--theme-text);
  background-color: rgba(15, 43, 34, 0.9);
}

.class2 {
  border: 4px solid var(--theme-yellow);
  padding: 5px 10px;   /* smaller vertical padding, wider horizontal padding */
  margin: 20px auto;
  width: 95%;           /* makes it stretch almost across the whole screen */
  max-width: 900px;     /* allows it to be wider on big screens */
  text-align: left;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background-color: rgba(15, 43, 34, 0.88);
}

#dashboardTitle{
    border:3px;
    text-align: center;
    font-size: 40px;

}
.menu-container {
  display: flex;
  justify-content: center;   /* puts boxes in a horizontal row */
  gap: 20px;                 /* space between boxes */
  margin-top: 30px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.menu-box {
  padding: 15px 25px;
  border: 3px solid var(--theme-yellow);
  border-radius: 10px;
  background: linear-gradient(to bottom, rgba(11, 35, 27, 0.95) 65%, var(--theme-green));
  display: flex;             /* makes the link fill the box */
  align-items: center;
  justify-content: center;
}

.menu-box a {
  text-decoration: none;     /* removes underline */
  color: var(--theme-text);
  font-weight: 700;
  font-size: 26px;           /* adjust size as you like */
  display: block;
}

/* Top bar container */
.top-bar {
  display: flex;
  justify-content: space-between;   /* menu left, username right */
  align-items: center;
  padding: 20px;
  width: 100%;
}

/* Menu button */
.menu-btn {
  padding: 15px 25px;
  font-size: 28px;
  font-weight: 700;
  color: var(--theme-text);
  background: linear-gradient(to bottom, rgba(11, 35, 27, 0.95) 65%, var(--theme-green));
  border: 3px solid var(--theme-turquoise);
  border-radius: 10px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}

/* Username box */
.user-box {
  padding: 15px 25px;
  border: 3px solid var(--theme-turquoise);
  border-radius: 10px;
  background: linear-gradient(to bottom, rgba(11, 35, 27, 0.95) 65%, var(--theme-green));
}

/* Wrapper that sticks to the top-right */
.top-right-wrapper {
  position: absolute;
  top: 20px;
  right: 20px;

  display: flex;
  flex-direction: column;   /* stack vertically */
  gap: 10px;                /* space between boxes */
}

/* Username box */
.user-small-box,
.settings-small-box {
  padding: 8px 15px;        /* tiny box */
  border: 3px solid white;
  border-radius: 10px;
  background: rgba(11, 35, 27, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Username text */
.username-small {
  font-size: 10px;
  font-weight: 1000;
  color: var(--theme-text);
  font-family: "Poppins", sans-serif;
  padding: none;
  border-width: 10px;
}

/* Settings link */
.settings-small-box a {
  text-decoration: none;    /* remove underline */
  color: var(--theme-turquoise);
  font-size: 10px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;

}
.user-small-box,
.settings-small-box {
  border: none;
 
}

/* Extra Info Section */
section {
  max-width: 700px;
  margin: 60px auto;
  padding: 25px 35px;

  background: rgba(12, 40, 31, 0.55);
  backdrop-filter: blur(4px);            /* glassy effect */
  border-radius: 12px;

  border: 2px solid rgba(45, 195, 178, 0.35);
  box-shadow: 0 0 20px rgba(47, 159, 98, 0.24);

  text-align: center;
  color: var(--theme-text);
  font-family: "Poppins", sans-serif;
}

section h2 {
  font-size: 32px;
  margin-bottom: 15px;
  color: var(--theme-yellow);
}

section p {
  font-size: 18px;
  line-height: 1.6;
  margin: 10px 0;
}

section strong {
  color: var(--theme-turquoise);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  text-align: left;
}

.support-card {
  background: rgba(11, 35, 27, 0.78);
  border: 2px solid rgba(45, 195, 178, 0.45);
  border-radius: 10px;
  padding: 14px;
}

.support-card h3 {
  margin: 0 0 8px;
  color: var(--theme-yellow);
  font-size: 20px;
}

.support-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.support-card a {
  color: var(--theme-turquoise);
  font-weight: 600;
  text-decoration: none;
}

.support-card a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  margin-top: 50px;

  color: var(--theme-text);
  font-size: 14px;
  opacity: 0.7;
  font-family: "Poppins", sans-serif;
}


/* ------------------------------------------
   RESPONSIVE FIXES — works on all devices
-------------------------------------------*/
@media (max-width: 900px) {

  /* Dashboard boxes shrink on tablets */
  .menu-container {
    max-width: 100%;
  }

  .menu-box {
    padding: 12px 18px;
  }

  .menu-box a {
    font-size: 20px;
  }
}

@media (max-width: 600px) {

  /* Dashboard boxes stack vertically on phones */
  .menu-container {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .menu-box {
    width: 90%;
    padding: 10px 15px;
  }

  .menu-box a {
    font-size: 18px;
  }

  /* Top-right username + settings shrink */
  .top-right-wrapper {
    top: 10px;
    right: 10px;
    gap: 6px;
  }

  .user-small-box,
  .settings-small-box {
    padding: 5px 10px;
  }

  .username-small,
  .settings-small-box a {
    font-size: 12px;
  }

  /* Info section text scales */
  section h2 {
    font-size: 24px;
  }

  section p {
    font-size: 16px;
  }

  .support-grid {
    grid-template-columns: 1fr;
  }

  .support-card h3 {
    font-size: 18px;
  }

  /* Footer text smaller */
  footer p {
    font-size: 12px;
  }
}