@import url(style/minireset.min.css);
@import url(style/menu.css);
@import url(style/hero.css);
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900');

:root {
  --color-main-background: #f7f7f7;
  --color-main-text: #666;
  --color-nav-background: #fff;
  --color-primary: #3b8ac9;
  --color-secondary: #f27324;
  --size-nav-dropdown-width: 15rem;
}

body {
  background: var(--color-main-background);
  color: var(--color-main-text);
  display: flex;
  flex-direction: column;
  font: normal normal normal normal 1rem/1.7 'Roboto', Helvetica, Arial, Lucida, sans-serif;
  min-height: 100dvh;
  overflow-x: hidden;
}

header {
  background: center / 6.5rem no-repeat url('assets/logo-transparent.png') var(--color-nav-background);
  box-shadow: 0 0.05rem 0 #ddd;
  display: flex;
  height: 5rem;
  justify-content: center;
  position: sticky;
  top: 0;
}

/* Main */

main {
  flex: auto;
  padding-bottom: 5rem;
}

main > article {
  padding: 2rem 0;
}

main > article > section {
  margin: auto;
  max-width: 60rem;
  padding-bottom: 2rem;
  width: 90%;
  scroll-margin-top: 6rem;
}

/* Footer */

footer {
  background: var(--color-primary);
  color: #fff;
}

footer > section {
  padding: 1rem 0;
}

footer > section:nth-of-type(1) {
  background: var(--color-secondary);
  color: #ffffffe6;
  font-weight: 300;
  padding: 0.3rem 0;
}

footer > section:nth-of-type(2) {
  font-weight: 500;
  text-align: center;
}

footer > section > p {
  font-size: 0.9rem;
  margin: auto;
  max-width: 60rem;
  width: 90%;
}

/* Text */

p {
  margin-top: 1rem;
}

p:first-of-type {
  margin-top: 0;
}

h1 {
  color: var(--color-primary);
  font-family: 'Oswald', Helvetica, Arial, Lucida, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  margin: 0rem 0 1.5rem 0;
  text-align: center;
}

h2 {
  color: var(--color-secondary);
  font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
}

main li::before {
  content: "-";
  padding-right: 8px;
}

/* Action items */

.button-action {
  background-color: var(--color-secondary);
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 1rem 0 #00000050;
  color: white;
  display: block;
  font-size: 1.2rem;
  margin: 3rem auto;
  padding: 0.5rem 3rem;
  text-decoration: none;
  text-shadow: 1px 1px 1px #444;
  transition: background 0.3s ease;
  width: fit-content;

  &:hover {
    background-color: var(--color-primary);
  }
}

/* Section grid */

.column-2 {
  display: flex;
  gap: 3rem
}

.column-2 > div {
  flex: 1;
}

.column-2 > div > img {
  padding: 0.5rem 0;
}

@media (max-width: 900px) {
  .column-2 {
    flex-direction: column;
    gap: 0rem
  }

  .column-2 > div:first-child > img {
    padding: 0 0 1rem 0;
  }

  .column-2 > div:last-child > img {
    padding: 2rem 0 0 0;
  }
}

/* Image grid */

.image-grid {
  display: flex;
  flex-wrap: wrap;
}

.image-grid > img {
  width: 50%;
}

/* Timetable */

.timetable {
  display: flex;
  margin-bottom: 1rem;
}

.timetable:last-child {
  margin-bottom: 0;
}

.timetable > .timetable-time {
  color: var(--color-main-text);
  flex: 2;
  font-family: 'Oswald', Helvetica, Arial, Lucida, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
}

.timetable > .timetable-title {
  color: var(--color-secondary);
  flex: 2;
  font-weight: 500;
  padding-right: 2rem;
}

.timetable > .timetable-description {
  flex: 4;
}

.timetable-date {
  margin: 0rem 0 1.5rem 0;
  text-align: center;
}

@media (max-width: 900px) {
  .timetable {
    flex-direction: column;
  }

  .timetable > div {
    padding-top: 0.5rem;
  }
}