html {
	background: #1e2021;
  color: white;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
}

main {
  flex: 1;
  position: relative;
  z-index: 1;
}

.fs, body, main, html {
  width: 100%;
  margin: 0;
} 

.title {
  font-family: "Montserrat", sans-serif;
  font-size: 96px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #f35626;
  background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 30s infinite linear;
  transition: 0.5s;
  cursor: pointer;
}

.title:hover {
  transform: scale(1.1);
  transition: 0.5s;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

@-webkit-keyframes hue-banner {
  from {
    -webkit-filter: blur(100px) hue-rotate(0deg) grayscale(0.5);
  }
  to {
    -webkit-filter: blur(100px) hue-rotate(-360deg) grayscale(0.5);
  }
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.card {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #4d4d4d;
  border-radius: 15px;
  padding: 20px;
  transition: 0.5s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0 30px 0;
}

.card:hover {
  transform: scale(1.01);
  outline-color: #ffffff;
}

.card p {
  text-decoration: none;
  color: white;
}

.page-title {
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  color: white;
}

.card-image {
  width: 70px;
  border-radius: 15px;
  padding: 5px;
}

.banner {
  width: 100%;
  height: 300px;
  background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
  -webkit-animation: hue-banner 30s infinite linear;
}

.banner-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.banner-center h1 {
  color: white;
  text-decoration: none;
  font-weight: 800;
  font-size: 80px;
  transition: 0.5s;
}

.banner-center h1:hover {
  transform: scale(1.1);
  transition: 0.5s;
}

.banner-container {
  position: relative;
  text-align: center;
  color: white;
}

a {
  text-decoration: none;
}

.main-content {
  margin: 50px 200px 50px 200px;
}

.main-page-advice img {
  width: 70px;
  animation: jump 3s infinite;
}

.main-page-advice {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  justify-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0;
}

@keyframes jump {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px);
  }
}

.previous-page-button {
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.5s;
}

.previous-page-button:hover {
  transform: scale(1.1);
}

.previous-page-button-container {
  display: flex;
  justify-content: space-between;
}

.tag-badge {
  background-color: rgb(0, 0, 0);
  padding: 2px 10px 2px 10px;
  border-radius: 100px;
  font-size: 15px !important;
}

.tags {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-info p {
  margin: 0;
}

.project-desc {
  font-size: 15px !important;
  word-wrap: break-word;
}

.project-title {
  font-weight: 700;
  font-size: 20px;
}

.repo-meta-img {
  height: 14px;
}

.repo-meta {
  display: flex;
  gap: 5px;
}

.repo-meta-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.5px;
}

.repo-meta-text {
  font-size: 14px !important;
}

.project-card {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #4d4d4d;
  border-radius: 15px;
  padding: 20px;
  transition: 0.5s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0 30px 0;
}

.project-card:hover {
  transform: scale(1.01);
  outline-color: #ffffff;
}

.project-card p {
  text-decoration: none;
  color: white;
}

.project-link {
  font-size: 15px;
  width: fit-content;
  
}

.project-links-wrapper {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.project-link-wrapper {
  display: flex;
  border-radius: 10px;
  padding: 5px 10px;
  align-items: center;
  gap: 5px;
  transition: outline, 0.2s;
}

.project-link-wrapper:hover {
  -webkit-animation: hue 5s infinite linear;
  outline: 1px solid #ffffff;
  outline-offset: 3px;
  transform: scale(0.9);
}

@media only screen and (max-width:900px) {
  .main-content {
      margin: 50px 50px 50px 50px;
  }
}
@media only screen and (max-width:500px) {
  .center {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }
  .card-image {
      width: 100%;
      height: 70px;
  }
  .card-info {
      display: flex;
      justify-content: flex-start !important;
      width: 100%;
  }
}
.fs, body, main, html {
  height: auto;
}