@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

:root {
  --primary-bg-color: #13181f;
  --secondary-bg-color: #272a32;

  --primary-text-color: #f3eff5;
  --secondary-text-color: #dec8dc;

  --primary-main-color: #5ca0ff;
  --primary-accent-color: #1deddb;
  --alt-primary-secondary-color: #10d1a0;

  --secondary-main-color: #1f7cff;
  --secondary-accent-color: #ec4567;
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;

  flex-direction: column;

  font-family: 'Poppins', sans-serif;
  min-height: 100svh;
  min-width: 100svw;

  /* background-color: var(--primary-main-bg-color); */

  background: var(--primary-bg-color);
  background: linear-gradient(
    315deg,
    var(--secondary-bg-color) 0%,
    var(--primary-bg-color) 100%
  );

  color: var(--primary-text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Comfortaa', cursive;
  color: var(--alt-primary-secondary-color);
}

ul {
  list-style: none;
}

header {
  display: flex;
  justify-content: space-between;

  padding-block: 1rem;
}

main {
  flex-direction: column;
  margin-block: 2rem;
}

header,
main,
footer {
  padding-inline: clamp(2%, 1rem, 8%);
  margin-inline: auto;
  max-width: 800px;
}

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: var(--primary-text-color);
}

a:hover {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.container {
  position: relative;
}

.header-container {
  position: relative;
}

.header-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;

  background: var(--primary-bg-color);
  background: linear-gradient(
    90deg,
    var(--primary-bg-color) 0%,
    var(--secondary-bg-color) 100%
  );

  backdrop-filter: blur(50px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}

.header-contact {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.4rem;
  padding-block: 0.2rem;
}

.header-contact::before {
  display: flex;
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;

  border-radius: 0.2rem;
  border: 2px solid var(--primary-text-color);

  opacity: 0.6;
}

.header-contact .main-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.4rem;
}

.header-contact .main-nav-icon img {
  filter: invert(100%);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Comfortaa', sans-serif;
  font-size: 1.6rem;
  color: var(--alt-primary-secondary-color);
  border: 2px solid var(--alt-primary-secondary-color);
  border-radius: 0.2rem;
  padding-inline: 0.4rem;
  padding-block: 0.2rem;
}

.main-nav {
  margin-block: 1rem;
}

.main-nav ul {
  /* display: flex;
  flex-wrap: wrap;
  gap: 1rem; */

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, 10rem));
  gap: 1rem;
}

.main-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* background-color: var(--primary-text-color); */

  background: var(--secondary-text-color);
  background: linear-gradient(
    120deg,
    var(--secondary-text-color) 0%,
    var(--primary-text-color) 100%
  );

  border: 1px solid white;

  color: var(--primary-bg-color);
  border-radius: 0.15rem;
  padding: 0.4rem 0.6rem;
  font-weight: 600;

  transition: transform 0.1s ease-out;
}

.main-nav a:hover {
  /* background: var(--primary-main-color);
  background: linear-gradient(
    315deg,
    var(--primary-main-color) 20%,
    var(--primary-header-bg-color) 100%
  );
  color: var(--primary-text-color); */

  transform: translateY(-0.1rem);
}

.main-nav a:hover img {
  /* filter: invert(100%); */
}

.main-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.2rem;
}

.main-container {
  margin-block: auto;
}

.footer-container {
  margin-top: auto;
  padding-block: 1rem;
  background-color: var(--primary-bg-color);
}

.footer-sections {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;

  width: 100%;

  margin-bottom: 1rem;
}

.footer-section h6 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.footer-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* width: 100%; */
  font-size: 1rem;
}

.footer-section a {
  text-decoration: underline;
}

.footer-section ul {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}

.credit-title {
  font-size: 1rem;
}

.footer-section .credit-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.2rem;
  padding-inline: 0.4rem;
  border-radius: 0.2rem;

  color: var(--primary-bg-color);
  font-weight: 600;

  text-decoration: none;

  background: var(--secondary-text-color);
  background: linear-gradient(
    120deg,
    var(--secondary-text-color) 0%,
    var(--primary-text-color) 100%
  );
}

.credit-link img {
  margin-right: 0.2rem;
}

.footer-copyright {
  font-size: 0.8rem;
}