:root {
  --color-primary: #f9f6e6;
  --color-secondary: #faffc5;
  --color-tertiary: #e7fbb4;
  --color-primary-darker: #8e1616;
  --color-secondary-darker: #754e1a;
  --color-tertiary-darker: #cba35c;
  --color-opacity: #f9f6e6;
  --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);
  --gradient-secondary: linear-gradient(to top left, #f2ae66, #ffcb03);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 30%;
}
body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: #444;
  line-height: 1.9;
  background-color: var(--gradient-primary);
}
/* Elements */
a {
  text-decoration: none;
}
button {
  height: 30px;
  border-radius: 20px;
  margin: auto;
}

footer p {
  font-size: 100%;
  color: white;
}

nav img {
  width: 15px;
  height: 15px;
}
section {
  width: 100%;
  height: 62rem;
  text-align: center;
  display: grid;
  align-items: center;
  justify-content: center;
}
header {
  height: 25px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: fixed;
  margin-bottom: 20px;
  background-color: white;
}
header div {
  margin-left: 20px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-items: center;
}

/* classes */
.airdrop-section {
  background-color: var(--color-secondary);
}
.btn:hover {
  border-color: var(--color-opacity);
  color: #e7fbb4;
  background-color: #8e1616;
}
.footer {
  height: 100px;
  width: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 150%;
  background-color: var(--color-primary-darker);
}
.header-h1 {
  display: inline;
  font-size: 200%;
  width: 400px;
  margin-left: 10px;
}
.issues-div p {
  font-size: 200%;
}
.issues {
  display: grid;
  width: 80%;
  grid: auto / auto auto auto auto;
  justify-content: space-between;
  justify-items: center;
  align-content: space-between;
  margin: auto;
  /* overflow: hidden; */
  height: 100%;
}

.issues-div p {
  width: 50%;
  text-align: center;
  margin: auto;
}

.issues-btn {
  width: auto;
  height: auto;
  padding: 5px;
  font-size: 130%;
  background-color: var(--color-opacity);
  border: 1px solid var(--color-primary-darker);
}
.issues-section {
  background-color: var(--color-opacity);
}

.kyc-section {
  background-color: var(--color-primary);
  /* margin-top: 20px; */
  padding: 50px;
}
.nav-div {
  display: none;
}
.paragraph p {
  width: 80%;
  /* text-align: center; */
  font-size: 170%;
  margin: auto;
  text-align: left;
}

.section-h2 {
  font-size: 400%;
  width: 70%;
  margin: auto;
  text-align: center;
  color: var(--color-primary-darker);
}
.section-h2 p {
  text-align: center;
}
.nav__links {
  display: flex;
  align-items: center;
  list-style: none;
}
.nav__link {
  text-decoration: none;
  font-size: 120%;
  color: var(--color-primary-darker);
  border: none;
  padding: 5px;
  width: 200px;
}
.nav__link:hover {
  color: var(--color-secondary-darker);
}

.nav__item {
  margin-left: 4rem;
}

.nav-btn,
.kyc-btn,
.airdrop-btn,
.issues-connect-btn {
  width: auto;
  height: auto;
  padding: 5px 5px;
  border: 1px solid var(--color-primary-darker);
  font-size: 150%;
  background-color: var(--color-secondary);
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 5;
}
.airdrop-section h2 {
  font-size: 600%;
}