* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.navbar {
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
  opacity: 85%;
  backdrop-filter: blur(10px);
  padding: 24px 0px;
}

ul {
  display: flex;
  align-items: center;
  gap: 48px;
  list-style-type: none;
}

a { 
  text-decoration: none; 
}

ul > li > a {
  font-size: 1.4rem;
  color: white;
  font-family: 'Courier New', Courier, monospace;
}

.navbar-title {
  font-size: 2.8rem;
  color: white;
  font-family: "Ruthie", cursive;
}

ul > li > a:hover {
  border-bottom: 2px solid #0662b3;
}

.navbar-title:hover {
  color: #0662b3;
  border: none;
}

#homepage {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  color: rgb(216, 216, 216);
  padding: 0px 64px;
  background-image: url('img/backgrounds/earth.jpg');
  background-position: center;
  background-size: cover;
}

#homepage > p { 
  font-size: clamp(3rem, 5vw, 4rem  )
}

#homepage > p > span { 
  font-family: "Ruthie", cursive;
  color: #0662b3;
}

#homepage > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 48px 0px;
  padding: 8px 32px;
  color: white;
  background-color: #173046;
  border-radius: 10px;

  font-weight: bolder;
  letter-spacing: 3px;
  font-size: clamp(1rem, 5vw, 1.5rem);
  font-family: 'Courier New', Courier, monospace;
}

#homepage > a > svg {
  width: 40px;
  filter: invert(90%);
}

#about {
  width: 100%;
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: 12% 64px;
}

#about > h1 {
  font-size: clamp(2.8rem, 5vw, 6rem);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.about-item-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 90px;
}

.about-item {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 8px;
  flex: 1;
}

.about-item > img {
  width: clamp(300px, 80vw, 500px);
  border-radius: 20px;
}

.about-item > h2 {
  margin: 44px 0px 32px 0px;
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.about-item > p {
  max-width: 600px;
  font-size: clamp(0.8rem, 5vw, 1.3rem);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.previous-clients-logos {
  width: 100%;
  padding: 24px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 64px;
  align-items: center;
  background-color: rgb(12, 12, 12);
}

.previous-clients-logos > img {
  width: 160px;
}

#courses {
  width: 100%;
  background-image: url('img/backgrounds/mountain1.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 64px;
  padding: 6% 64px 10% 64px;
  color: white;
}

#courses > h1 {
  font-size: 6rem;
  font-size: clamp(3rem, 5vw, 6rem);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  align-self: center;
}

.courses-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  padding: 32px;
}

.course-item {
  min-width: 320px;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  border-radius: 10px;
  background-color: #0d2030;
  padding: 32px 16px;
}

.course-item > h1 {
  padding: 4px 32px;
  align-self: center;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  box-shadow: 10px;
  border-radius: 20px;
}

.course-item > img {
  align-self: center;
}

.gfg-logo { width: 210px; }
.mdn-logo, .fcc-logo { height: 70px; }
.w3-logo { height: 140px; }
.fcc-logo { filter: invert(100%); }

.course-item-text {
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-item-text > a {
  padding: 16px 8px;
  width: 45%;
  margin-top: 16px;
  text-align: center;
  background-color: #0662b3;
  color: white;
  border: 4px solid rgb(8, 8, 8);
  box-shadow: 4px 4px 12px black;
  border-radius: 20px;

  transition: 0.1s background-color 0.1s;
}

.course-item-text > a:hover {
 background-color: #173046;
}

#requirements {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10% 64px;
  background-color: rgb(12, 12, 12);
  color: white;
}

#requirements > h1 {
  font-size: clamp(3rem, 5vw, 4rem);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.requirements-description {
  max-width: 1000px;
  font-family: 'Courier New', Courier, monospace;
}

.requirements-items {
  display: flex;
  flex-wrap: wrap;
  gap: 96px;
  padding: 96px 5%;
}

.requirement > h2 {
  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 12px;
}

.requirement > ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 0px 32px;
}

.requirement > ul > li {
  font-size: 1.4rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  display: flex;
  gap: 8px;
}

.requirement > ul > li > svg {
  min-width: 30px;
  width: 40px;
  filter: invert(100%);
}

#employees {
  width: 100%;
  background-image: url('img/backgrounds/mountain2.jpg');
  background-size: cover;
  background-color: black;
  color: white;
  font-family: 'Courier New', Courier, monospace;
  padding: 10% 48px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#employees > h1 {
  font-size: clamp(4rem, 5vw, 6rem);;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.employees-description {
  max-width: 1000px;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
}

.people {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 96px;
  margin-top: 5%;
  padding: 16px;
}

.person {
  display: flex;
  flex-wrap: wrap;
}

.person-info > h2 {
  font-family: "Ruthie", cursive;
  font-size: 2rem;
}

.person-info {
  background-color: rgb(19, 19, 19);
  color: rgb(228, 228, 228);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 240px;
}

.person > img {
  width: 240px;
}

#job-application {
  width: 100%;
  background-color: rgb(12, 12, 12);
  color: white;
  font-family: 'Courier New', Courier, monospace;
  padding: 6% 48px 18% 48px;

  display: flex;
  flex-direction: column;
  gap: 112px;
}

#job-application > h1 {
  font-size: clamp(2.8rem, 5vw, 6rem);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.application-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  gap: 64px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 300px;
  width: 516px;
  min-height: 585px;
}

input {
  padding: 24px 32px;
  font-size: 1.1rem;
  background-color: black;
  border: none;
  color: white;
  border-radius: 8px;
  border: 2px solid black;
}

input:invalid, textarea:invalid { border-color: rgb(122, 0, 0); }
input:valid, textarea:valid { border-color: rgb(0, 78, 0); }
input:focus, textarea:focus { outline: none; }
#file:invalid, #file:valid { border: none;}

#file::file-selector-button {
  border: 1px solid #0662b3;
  padding: 4px 16px;
  border-radius: 8px;
  background-color: rgb(0, 0, 0);
  color: white;
  margin-right: 16px;
}

textarea {
  resize: none;
  height: 300px;
  padding: 24px 32px;
  font-size: 1.1rem;
  background-color: black;
  border: none;
  color: white;
  border-radius: 8px;
  border: 2px solid black;
}

form > button {
  padding: 8px 16px;
  background-color: black;
  border: none;
  color: #0662b3;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.8rem;
  font-family: "Ruthie", cursive;
}

form > button:hover {
  background-color: #0662b3;
  color: black;
}

.application-description {
  max-width: 516px;
  min-height: 585px;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.application-description > h2 {
  font-size: 2.6rem;
  color: #0662b3;
}

.contact-methods {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-method-info > p:first-child {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 3px;
  font-family: "Ruthie", cursive;
}

.contact-method-info > p:last-child {
  font-size: 0.9rem;
  color: rgb(179, 179, 179);
}

.contact-methods > svg {
  width: 30px;
  filter: invert(100%);
}

#footer {
  width: 100%;
  background-color: rgb(19, 19, 19);
  color: white;

  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 32px;

  padding: 2% 0px 4px 0px;
}

.top-footer-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 24px;
}

.top-footer-section > h2 {
  font-size: clamp(4rem, 5vw, 4.8rem);
  font-family: 'Times New Roman', Times, serif;
  color: #0662b3;
}

.top-footer-section > p:nth-child(2) {
  font-size: 1.1rem;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 2px;
}

.top-footer-section > p:nth-child(3) {
  max-width: 850px;
  padding: 0px 8px;
  color: rgb(224, 224, 224);
  font-size: 1rem;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: 1px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.footer-links > a {
  color: white;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
}

.footer-links > a:hover {
  color: #0662b3;
}

.bottom-footer-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  border-top: 3px solid #0662b3;
  width: 100%;
  padding: 16px;

  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* .bottom-footer-section > p:nth-child(2) {
  font-size: 2rem;
  font-family: "Ruthie", cursive;
} */

@media (max-width: 1024px) {
  .navbar > ul > li:nth-child(1),
  .navbar > ul > li:nth-child(2),
  .navbar > ul > li:nth-child(4),
  .navbar > ul > li:nth-child(5) {
    display: none;
  }
}

@media (max-width: 560px) {
  .navbar {
    position: absolute;
  }
}