/* LANDING PAGE STYLES */
#landing {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  height: 95vh;
  width: 95vw;
}

#landing h1 {
  display: block;
  text-align: center;
  font-size: 4em;
}

#landing button {
  display: block;
  font-size: 2em;
  border-radius: 20px;
  border: none;
  box-shadow: 1px 1px 5px black;
  width: 50%;
  height: 2lh;
  background-color: #b8b9ee;
}
#landing button:hover {
  background-color: #c0c5fa;
}
#landing button:active {
  background-color: #c0c5fa;
  box-shadow: 1px 1px 5px gray;
}

header img:hover {
  cursor: pointer;
}
header a {
  color: inherit;
  text-decoration: none;
}
* {
  font-family: Helvetica Neue, Segoe UI, sans-serif;
}
body {
  background-color: #d8d8d8;
  margin: 0;
}

#app {
  min-height: 100vh;
}

button,
input {
  margin: 3px;
}

/* input[type="text"] {
  width: 300px;
} */

:checked + input[type="text"] {
  color: gray;
  font-style: italic;
  text-decoration: line-through;
}

fieldset {
  display: contents;
}

.icon {
  max-width: 2em;
  max-height: 2em;
  padding: 0.5em;
}

main {
  margin: 1em;
}

footer {
  display: flex;
  background-color: #b8b9ee;
  height: 5lh;
  position: fixed;
  bottom: 0px;
  width: 100vw;
  align-items: center;
  z-index: 100000;
}

header {
  display: flex;
  position: sticky;
  top: 0;
  background-color: #b8b9ee;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  padding-left: 4px;
  padding-right: 4px;
  z-index: 1000000;
}

/* #profileButtons *,
.buttons * {
  min-width: 20ch;
  min-height: 2lh;
  background-color: #b8b9ee;
  border-radius: 500px;
  border: none;
}

#profileButtons *:hover,
.buttons *:hover {
  background-color: #ccd0ff;
}

.stylizedButton:active {
  background-color: #ccd0ff;
}

box-shadow: 1px 1px 3px gray;
.stylizedButton {
  box-shadow: 1px 1px 3px black;
} */

.stylizedButton {
  min-width: 20ch;
  min-height: 2lh;
  background-color: white;
  border-radius: 500px;
  border: none;
  box-shadow: 1px 1px 3px black;
}

.stylizedButton:hover {
  background-color: hsl(0, 0%, 95%);
}
.stylizedButton:active {
  background-color: hsl(0, 0%, 90%);
  box-shadow: 1px 1px 3px hsl(0, 0%, 40%);
}
.createEventContainer form {
  display: flex;
  flex-direction: column;
  height: 80%;
  justify-content: space-around;
}
.createEventContainer form label {
  width: 100%;
  /* background-color: red; */
}

#scrollButton {
  z-index: 100000;
  width: 40vw;
  position: fixed;
  top: 4.5lh;
  left: 30vw;
  background-color: hsla(0, 0%, 50%, 85%);
  cursor: pointer;
  opacity: 0;
  transition: opacity 500ms ease;
  border-radius: 5px;
  border: none;
  height: 3lh;
  box-shadow: 0px 0px 4px black;
}
#scrollButton.scrolled {
  opacity: 1;
}

.appHeader {
  padding-left: 1em;
  padding-right: 1em;
}