@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-weight: regular;
  font-style: normal;
  font-size: 16px;
}

.bold-text {
  font-weight: bold;
}

.italic-text {
  font-style: italic;
}

/* Style navbar */
.nav {
  position: fixed;
  width: 100%;
  overflow: hidden;
  display: flex;
  background-color: #FCB514;
  padding: 30px;
  text-align: center;
  font-size: 2rem;
}

.left-align {
  display: flex;
  align-items: flex-start;
  margin-right: auto;
}

.right-align {
  display: flex;
  align-items: flex-start;
  margin-left: auto;
}

.nav a {
  float: left;
  display: block;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
}

#logo {
  font-weight: bold;
  font-size: 2.5rem;
}

.nav a:hover {
  background-color: black;
  color: #FCB514;
}

.hidden {
  opacity: 0;
}

/* Style home page hero */
.hero {
  width: 100%;
  background-color: #FCB514;
  background-size: cover;
  padding: 2rem;
  text-align: center;
  color: black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-content {
  width: 50%;
  margin: auto;
  height: 50vh;
  max-height: 50vh;
  display: flex;
  flex-direction: row;
  height: 100%;
}

#hero-left-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
}

#hero-right-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
}

.hero h1 {
  font-size: 4rem;
  font-weight: bold;
  margin-top: 10vh;
  margin-bottom: 0;
}

.hero p {
  font-size: 2rem;
  margin-top: 1rem;
}

.hero a {
  text-decoration: none;
  font-size: 2rem;
  color: #FCB514;
  background-color: black;
  padding: 14px 16px;
  margin: 1rem;
}

.hero a:hover {
  background-color: white;
  color: black;
}

#hero-image {
  margin: 0 auto;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}

/* Style home page */
.home-container {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  padding: 30px;
  text-align: center;
}

.home-section {
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  text-align: center;
}

h2,
h2 a {
  margin-left: auto;
  margin-right: auto;
  color:black;
  text-decoration: none;
  padding: 30px;
  text-align: center;
  font-size: 2.5rem;
}

h2 a:hover {
  color: #568E14;
}

.home-section img {
  width: 100%;
}

/* Style home page about */
#about {
  display: flex;
  width: 95%;
  margin: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#about-left-align {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
}

#about-right-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

#about h2 {
  padding: 0;
  margin: 0;
}

#about img {
  width: 100%;
  align-items: center;
}

#about p {
  text-align: center;
  font-size: 1.5rem;
}

/* Structure and style grid */
.grid-item {
  max-height: 50vh;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}

.grid-item a {
  margin: auto;
  color: black;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  align-items: center;
  font-size: 2.5rem;
}

.grid-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.grid-item p {
  text-align: center;
  font-size: 2rem;
  margin: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.hovered-item {
  display: flex;
  background-color: #FCB514;
}

.hid-item:hover {
  opacity: 0;
}

.grid-container {
  display: grid;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto auto;
  grid-template-areas:
    "wideleft wideleft wideleft wideleft narrowright narrowright"
    "regularleft regularleft regularleft regularright regularright regularright"
    "left left middle middle right right"
    "wide wide wide wide wide wide"
    "verynarrowleft widemiddle widemiddle widemiddle widemiddle verynarrowright"
    "narrowleft narrowleft wideright wideright wideright wideright"
    "wide2 wide2 wide2 wide2 wide2 wide2";
  /* grid-column-gap: 10px; - if you want gap between the columns */
}

.wideleft,
.narrowright,
.regularleft,
.regularright,
.left,
.middle,
.right,
.wide,
.verynarrowleft,
.widemiddle,
.verynarrowright,
.narrowleft,
.wideright,
.wide2 {
  margin: 10px;
}

.wideleft {
  grid-area: wideleft;
}

.regularleft {
  grid-area: regularleft;
}

.regularright {
  grid-area: regularright;
}

.narrowright {
  grid-area: narrowright;
}

.left {
  grid-area: left;
}

.middle {
  grid-area: middle;
}

.right {
  grid-area: right;
}

.wide {
  grid-area: wide;
}

.verynarrowleft {
  grid-area: verynarrowleft;
}

.widemiddle {
  grid-area: widemiddle;
}

.verynarrowright {
  grid-area: verynarrowright;
}

.narrowleft {
  grid-area: narrowleft;
}

.wideright {
  grid-area: wideright;
}

.wide2 {
  grid-area: wide2;
}

.padding-top {
  padding-top: 200px;
}

.padding-bottom {
  padding-bottom: 100px;
}

/* Style footer */
.footer {
  display: flex;
  background-color: #568E14;
  padding: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  text-align: center;
  font-size: 1.5rem;
}

/* Responsive layout */
@media (max-width: 600px) {
  body {
    font-size: 13px;
  }

  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-areas:
    "wideleft"
    "narrowright"
    "regularleft"
    "regularright"
    "left"
    "middle"
    "right"
    "wide"
    "verynarrowleft"
    "widemiddle"
    "verynarrowright"
    "narrowleft"
    "wideright"
    "wide2";
  }

  #about, footer {
    flex-wrap: wrap;
  }

  .home-container {
    width: 100%;
  }
}