/* Shared color */
nav ul a,
.header-icons > *,
footer,
.opening-times,
.info-item,
.text-content,
.social-media-icons > * {
  color: var(--secondary-color);
}

/* Header */
.search-input {
  outline: 2px solid var(--secondary-color);
}

/* About us */
.about-section,
.content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1600px;
  width: var(--large-screen-width); /* ensures 200px padding on both sides */
  margin: var(--centering); /* centers the container */
  padding: 100px 0;
}

.about-section img,
.content-container img {
  width: 800px;
  border-radius: var(--border-radius-medium);
}

.text-content h1 {
  font-size: var(--font-size-xxl);
}

.text-content {
  width: 450px;
}

.text-content p,
.get-involved-content p,
.info-item p {
  font-size: var(--font-size-xxs);
  margin-bottom: 20px;
}

.text-container {
  color: var(--secondary-color);
  text-align: right;
  font-size: var(--font-size-xxs);
  width: 400px;
}

.text-container > * {
  margin-bottom: 20px;
}

/* Get involved section */
.get-involved-section {
  background-color: var(--secondary-color);
}

.get-involved-content,
.info-section {
  max-width: 1600px;
  width: var(--large-screen-width); /* ensures 200px padding on both sides */
  margin: var(--centering); /* centers the container */
  padding: 150px 0px;
  color: var(--primary-light);
}

.get-involved-content h2 {
  font-size: var(--font-size-xl);
}

.get-involved-content h3 {
  font-size: var(--font-size-base);
  margin-bottom: 10px;
}

.get-involved-content img {
  max-width: var(--scalable-width);
  height: 700px;
  object-fit: cover;
  border-radius: var(--border-radius-medium);
  margin-top: 40px;
}

/* Info section */
.info-section {
  display: flex;
  justify-content: space-between;
  height: 800px;
}

.info-item {
  width: 550px;
}

.info-item h3 {
  font-size: var(--font-size-lg);
  margin-bottom: 10px;
}

.internship {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* footer */
#email {
  outline: 2px solid var(--secondary-color);
}

@media (hover: hover) {
  .social-media-icons > *:hover {
    color: var(--primary-color);
  }
}