/*###########*/
/* UNIVERSAL */
/*###########*/

/* mostly everything */
body {
  color: azure;
  background-color: rgb(14, 14, 14);
  font-family: "Funnel Sans", sans-serif;
  margin: 0; /* Important: Remove default body margin */
  overflow-x: hidden; /* Prevent horizontal scrollbar */
  user-select: none;
}

img {
  pointer-events: none;
}

h1 {
  font-size: clamp(0px, 3.75rem, 20vw);
}

h2 {
  font-size: clamp(0px, 2.25rem, 15vw);
}

h3 {
  font-size: clamp(0px, 2rem, 10vw);
}

h5 {
  font-size: 1.25rem;/*clamp(0.5rem, 2vw, 2rem);*/
}

p {
  font-size: 1.25rem;
  text-align: center;
}

/* unvisited link */
a:link {
  color: aquamarine; 
}

/* visited link */
a:visited {
  color: aquamarine; 
}

/* mouse over link */
a:hover {
  color: paleturquoise; 
}

/* selected link / when clicked */
a:active {
  color: azure; 
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background-color: rgba(14, 14, 14, 0.75);
  backdrop-filter: blur(24px);
}

.navbar nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 50px;
  padding: 20px 50px;
}

.socials {
  margin-left: auto;
  text-decoration: none;
}

.social-icon {
  width: 20px;
  height: auto;
}

.navbar-title {
  width: auto;
  height: 20px;
}

nav a {
  text-decoration: none;
}

/*##################*/
/* END OF UNIVERSAL */
/*##################*/

h1 {
  margin-bottom: 1.5rem;
  text-align: center;
}

h5 {
  margin-bottom: 0.1rem;
  color: azure;
  text-decoration: none;
}

.content {
  padding-top: 10vh;
  padding-bottom: 5vh;
  padding-left: 10vw;
  padding-right: 10vw;
}

.projects {
  display: flex; /* use flexbox */
  flex-wrap: wrap; /* allows wrapping onto next lines */
  justify-content: center; /* centers rows of cards */
  gap: 20px;
}

.project-card {
  background-color: rgb(20, 22, 25);
  display: block;
  text-decoration: none;
  color: inherit;
  /*padding: 20px;*/
  text-align: center;
  border-color: azure;
  border-radius: 20px;
  width: 200px;
  height: clamp(250px, auto, 100vh);
}

.content-title {
  /* take full width */
  width: 100%; 
}

.icon {
    width: 100%;
    height: auto;
    border-radius: 20px;
}