@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Roboto+Mono&display=swap");
@import url("https://fonts.cdnfonts.com/css/cubano");
body {
  /* Setting the default font for everything in the body */
  font-family: "Cubano", sans-serif;
  color: white;
  font-size: 100%;
  /* setting the background color and other settings of the entire site */
  background: linear-gradient(
    176deg,
    rgb(18, 24, 27) 50%,
    rgb(32, 39, 55) 100%
  );
  /* Making it so the background isn't broken.
  The color is only seen on mobile when overscrolling and at the notch of some phones like iPhone */
  background-attachment: fixed;
  background-color: rgb(18, 24, 27);
}
/* The big header on top of the site is in this div. */
.headerDiv {
  /* Style of content inside the div */
  font-size: 200%;
  background-color: #12181b;
  text-align: center;
  /* properties and position of the div */
  width: 100%;
  margin-top: -8px; /* we do -8px so it aligns with the top of the browser window... */
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 30px; /* we need a margin, so the elements in the grid dont dissappear behind the div
  when scrolling to far up or when they are scaled when hovering */
  position: sticky;
  top: 0px;
  z-index: 2; /* is 2, because the emojisa re at 1 */
}
/* This gets us a nice gradient on text.*/
.gradient-text {
  margin: 0;
  padding: 0;
  background: linear-gradient(to top, #ff0000, #fffb00 70%);
  /* dont really know whats going on here */
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Controlling the spacing of the grid. */
.gridDiv {
  margin-left: 20%;
  margin-right: 20%;
}
/* These are the cards in the grid */
.card {
  background-color: #2a2e35;
  border-radius: 15px;
  /* This border is not visible, but we need it so we can change its color when hovering. */
  border: solid #00000000;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  box-shadow: 0px 8px 30px -5px black;
  transition-duration: 0.3s;
  position: relative;
}
.card:hover {
  border-color: rgb(255, 200, 0);
  transform: scale(1.1) translateY(-8px);
}
/* These are the headers inside the cards */
.cardHeader {
  margin-top: 1rem;
  text-align: left;
  font-size: x-large;
}
/* This is the small emoji you see at the bottom right of each card. Cute! */
.smallEmoji {
  position: absolute;
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  bottom: -1.2rem;
  right: -1.5rem;
}
/* We need this so the emoji img scales when the div it is inside of is scaled. */
img {
  max-width: 100%;
  max-height: 100%;
}
/* My favourite font for all paragraphs in the body. */
p {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  color: #b2becd;
}
/* Prevents links from being underlined and going purple when visited */
a {
  text-decoration-line: none;
  color: inherit;
}