:root {
  --primaryColor: white;
  --backgroundColor: #0089f2;
  --secondaryBackgroundColor: #18cea4;
  --textColor: white;
}

html {
  height: 100%;
  background-image: linear-gradient(var(--backgroundColor), var(--secondaryBackgroundColor));
  background-repeat: no-repeat;
  background-attachment: fixed; /* Keeps the gradient fixed while scrolling */
}

body {
  min-height: 100vh; /* Ensures the body covers the full viewport height */
  margin: 0; /* Removes default margin */
  color: var(--textColor);
  display: flex;
  flex-direction: column;
}

img {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  object-fit: contain;
  object-position: initial;
  filter: none;
  text-align: center;
}

div .pfp {
  padding: 0px !important;
  margin-top: 15px;
}

h2 {
  margin: 0;
}

h3 {
  margin: 0;
} 

.container {
  flex: 1; /* Ensures the container takes up available space */
  display: grid;
  justify-content: space-evenly;
}

.container div{
  padding: 1em;
  margin-bottom: 10px;
  text-align: center;
}

.link {
  border: 2px solid var(--primaryColor);
  border-radius: 5px;
}

a:visited {
  text-decoration: none;
  color: inherit;
}

a:link {
  text-decoration: none;
  color: inherit;
}

.container a div:hover {
  background-color: var(--primaryColor);
  color: var(--backgroundColor);
  text-decoration-color: var(--backgroundColor);
}

footer {
  position: relative; /* Allows the footer to flow naturally */
  width: 100%;
  text-align: center;
}

* {
  text-decoration: none;
  box-sizing: border-box;
}