:root {
  --branding-color: #FC8C7B;
  --secondary-color: #fff01f;
  --third-color:  #396AFD;
  --fourth-color: #AFD5DE;
}
p {
  line-height: 2;
  text-align: left;
}
nav {
  padding: 20px;
}
nav li {
  display: inline;
  list-style: none;
  line-height: 42px;
  margin-left: 15px;
}

nav ul {
  padding: 0;
  margin: 0;
}
nav a {
  text-decoration: none;
  color: black;
  transition: all 100ms ease-in-out;
}
nav li.active a,
nav a:hover {
  color: var(--branding-color);
}

.logo {
  max-width: 100px;
}
.hero {
  text-align: center;
  background: radial-gradient(circle at 10% 20%, rgb(253, 193, 104) 0%, rgb(251, 128, 128) 90%);  padding: 160px 20px;
}
.hero h1 {
  font-family: "Noto Sans Mono", monospace;
  font-size: 58px;
  font-weight: bold;
  color: white;
}
.hero h2 {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  line-height: 2;
  color: white;
}
.btn-branding {
  background: var(--secondary-color);
  color: white;
  border-radius: 4px;
  padding: 10px 20px;
  font-family: 10px;
}
.btn-branding:hover {
  text-decoration: none;
  background-color: var(--third-color);
  color: white;
  transition: all 100ms ease-in-out;
}
.btn-project {
  color: var(--secondary-color);
}
.btn-project:hover {
  border: none;
  background: var(--third-color);
  color: white;
  text-decoration: none;
}
a {
  font-family: "Noto Sans Mono", monospace;
}
h3 {
  font-family: "Noto Sans Mono", monospace;
  font-weight: bold;
  font-size: 18px;
  color: var(--third-color);
}
img {
  display: block;
  max-width: 100%;
  border-radius: 5px;
}

.about-section {
  text-align: center;
  background: radial-gradient(circle at 10% 20%, rgb(253, 193, 104) 0%, rgb(251, 128, 128) 90%);  padding: 160px 20px;
}

.about-section h1 {
  font-family: "Noto Sans Mono", monospace;
  font-size: 38px;
  font-weight: bold;
}

.about-section h2 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 2;
}
.about-section a {
  background-color: var(--secondary-color);
  color: white;
  font-size: 18px;
}
.about-section a:hover {
  background-color: var(--third-color);
  color: white;
  font-size: 18px;
}
.content-container {
  background: radial-gradient(circle at 10% 20%, rgb(253, 193, 104) 0%, rgb(251, 128, 128) 90%);  padding: 160px 20px;
  margin: 3px;
}
.content-container h1 {
  text-align: center;
  color: black;
  font-family: "Noto Sans Mono", monospace;
  font-size: 48px;
  font-weight: normal;
}
.content-container h2 {
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  line-height: 2;
}

@media (max-width: 576px) {
  .hero {
    text-align: center;
  }
  h3,
  p {
    text-align: center;
  }
  .btn-project {
    display: block;
  }
}
footer {
  margin: 60px 0;
  color: white;
}

footer .contact-box {
  background: radial-gradient(circle at 10% 20%, rgb(253, 193, 104) 0%, rgb(251, 128, 128) 90%);  border-radius: 10px;
}

footer .contact-box p {
  margin: 0;
}

footer .email-link {
  text-decoration: none;

  font-size: 24px;
}

footer .email-link:hover {
  color: var(  --third-color);
}

footer .social-links a {
  margin: 0 20px;
  color: var(--secondary-color);
  background: var (--third-color);
  padding: 10px 14px;
  border-radius: 50%;
  font-size: 18px;
  transition: all 100ms ease-in-out;
}

footer .social-links a:hover {
  color: white;
  background: radial-gradient(circle at 10% 20%, rgb(253, 193, 104) 0%, rgb(251, 128, 128) 90%); radial-gradient(circle at 10% 20%, rgba(91, 173, 254, 0.46) 0%, rgba(91, 224, 254, 0.46) 47.2%, rgba(170, 254, 235, 0.43) 90%);
}