:root {
  --bgC1: #eee;
  --bgC2: #333333;
  --bgC3: #555;
  --bgC4: #fff;
  --bgC5: #8f3;
  --bgImgHeader: linear-gradient(to bottom, #8f30, #8f36),
    url("../images/Flower1.jpg") center/cover fixed no-repeat;
  --bgNav: linear-gradient(to bottom, #8f36, #8f37),
    url("../images/Flower1.jpg") center/cover fixed no-repeat;
  --bgNavC1: #000;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  background: var(--bgC3);
  width: 100vw;
  height: 100%;
}
body {
  width: 100vw;
  height: 100%;
}

img {
  width: 100%;
  height: auto;
  border-radius: 1.7em;
}

header {
  background: var(--bgImgHeader);
  height: 20vh;
  width: 100vw;
  display: flex;
  justify-content: center;
}

header > img {
  height: 100%;
  width: auto;
  border-radius: 0;
}
nav {
  background: var(--bgNav);
  width: 100%;
  height: 5vh;
  align-items: center;
  display: block;
}

nav > ul {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.5em;
  list-style-type: none;
}
nav > ul > li {
  height: 100%;
  display: flex;
  align-items: center;
}
nav > ul > li > a:hover {
  color: var(--bgC1);
}
nav > ul > li > a {
  color: var(--bgNavC1);
  text-decoration: none;
}
main {
  color: var(--bgNavC1);
}
main.one {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5em;
  background: var(--bgC3);
}
section.event {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 90vw;
  height: auto;
  margin: 2em;
  background: var(--bgC1);
  border-radius: 2em;
}
section.event > p {
  margin: 1.5em;
}
section.event > img {
  width: 25vw;
}
section.home {
  position: relative;
  width: 30vw;
  height: 40vh;
  margin: 0.5em;
  background: var(--bgC1);
  border-radius: 2em;
}
section.home > img {
  position: relative;
  width: 30vw;
  height: 100%;
}
section.home > div > p {
  position: relative;
  margin: 0.5em;
  color: var(--bgC4);
}
div.overlay {
  border: 2px solid red;
  position: relative;
  width: 100%;
  height: 100%;
  top: -100%;
  border-radius: 1.7em;
  transition: all 0.3s linear;
}
div.overlay:hover {
  background-color: var(--bgC5);
  bottom: 100%
}
footer {  display: none;
  background-color: var(--bgC3);
  color: var(--bgC1);
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  padding-bottom: 2vh;
  bottom: 0;
}