@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("Gothic_A1/GothicA1-Thin.ttf") format("truetype");
}

@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("Gothic_A1/GothicA1-Extra-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("Gothic_A1/GothicA1-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("Gothic_A1/GothicA1-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("Gothic_A1/GothicA1-Medium.ttf") format("truetype");
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Gothic A1', sans-serif;
  color: #000670;
}

#header-section {
  display: grid;
  width: 100%;
  grid-template-areas: "head head head head head nav-head nav-head nav-head nav-head nav-head nav-head nav-head";
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(100px, max-content);
  border-bottom: solid 1px;
  border-color: grey;

  /* grid-template-rows: repeat(3, minmax(100px, max-content)); */
}

#main-section {
  display: grid;
  width: 100%;
  grid-template-areas: "main main main main main main main main main main main main";
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(85vh, max-content);
  /* grid-template-rows: auto;
  height: 85vh; */
  /* grid-template-rows: repeat(3, minmax(100px, max-content)); */
}

#footer-section {
  display: grid;
  width: 100%;
  grid-template-areas: "foot foot nav-foot nav-foot nav-foot nav-foot nav-foot nav-foot nav-foot nav-foot nav-foot nav-foot";
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(10vh, max-content);
  border-top: solid 1px;
  border-color: grey;
  /* grid-template-rows: repeat(3, minmax(100px, max-content)); */
}

/* -----header--------------------------------------------------------- */
#header-section>header {
  grid-area: head;
}

#header-section>header>h1 {
  font-size: 2.2rem;
  font-weight: 300;
  padding: 1.8rem;
  margin: 0;
}

#header-section>header a:link {
  text-decoration: none;
  color: #000670;
}

#header-section>header a:visited {
  text-decoration: none;
  color: #000670;
}

#header-section>header a:hover {
  text-decoration: none;
  font-weight: bolder;
  color: #000670;
}

#header-section>header a:active {
  text-decoration: none;
  color: #000670;
}

/* ---------------------------------------------------------header----- */
/* -----navigation header---------------------------------------------- */
#header-section>nav {
  grid-area: nav-head;
  font-size: 0.9rem;
  /* top | right | bottom | left */
  padding: 2rem 3rem 0 0;
  text-align: right;
}

#header-section>nav a:link {
  text-decoration: none;
  color: #000670;
}

#header-section>nav a:visited {
  text-decoration: none;
  color: #000670;
}

#header-section>nav a:hover {
  text-decoration: none;
  padding: 0.3rem auto;
  font-weight: 600;
}

#header-section>nav a:active {
  text-decoration: none;
  color: #000670;
}

/* -----------------------------------------------navigation header---- */
/* -----main----------------------------------------------------------- */
#main-section>main {
  grid-area: main;
  /* margin-top: 4rem; */
  /* istockphoto-1001100456-1024x1024 */
  /* istockphoto-938337952-1024x1024 */
  /* istockphoto-938337952-1024x1024.jpg */
  background-image: url("iStock-939732392.jpg");
  /* Do not repeat the image */
  background-repeat: no-repeat;
  background-size: cover;
}

#main-section>main>h1 {
  font-weight: 300;
  font-size: 5rem;
  /* top | right | bottom | left */
  padding: 0 1rem 0 2rem;
  margin: 3rem 0 0 0;
}

#main-section>main>h1>span {
  background-color: rgba(255, 255, 255, 0.55);
  border-radius: 0.2rem;
  padding: 0.5rem 0.5rem 0rem 0.5rem;
  margin: 0;
}

  /* top | right | bottom | left */

/* #main-section>main>p {
  font-weight: 300;
  font-size: 2rem;
  padding: 0 1rem 0 2.5rem;
  line-height: 1.5;
} */

/* #main-section>main>p>span {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.2rem;
  padding: 0.5rem 0.5rem 0rem 0.5rem;
  margin: 0;
} */

.main-paragraph {
  font-size: 1.4rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.2rem;
  padding: 1rem;
  width: fit-content;
  /* top | right | bottom | left */
  margin: 0 2rem 2rem 2rem;
  line-height: 1.5;

}

/* .main-paragraph>p {
  margin: 0;
} */

.main-paragraph>span {
  margin: 0;
  font-size: 2.5rem;
}

/* .smallSpan {
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.2rem;
  padding: 0.5rem 0.5rem 2rem 0.5rem;
  margin: 0;
} */

/* -----------------------------------------------------------main----- */
/* -----footer--------------------------------------------------------- */
#footer-section>footer>h1 {
  grid-area: foot;
  font-size: 1.2rem;
  font-weight: 300;
  padding: 2rem;
}

/* -----navigation footer---------------------------------------------- */
#footer-section>nav {
  grid-area: nav-foot;
  font-size: 0.8rem;
  font-weight: 200;
  padding: 3rem;
  line-height: 1.5;
}

#footer-section>nav a:link {
  text-decoration: none;
  color: #000670;
}

#footer-section>nav a:visited {
  text-decoration: none;
  color: #000670;
}

#footer-section>nav a:hover {
  text-decoration: none;
  color: #000670;
  padding: 0.3rem auto;
  font-weight: 600;
}

#footer-section>nav a:active {
  text-decoration: none;
  color: #000670;
}

/* ---------------------------------------------------------footer----- */
/* -----media-query---------------------------------------------------- */
@media (orientation: landscape) and (min-width: 900px) {
  #main-section>main {
    background-size: cover;
  }
}