body,
html {
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

html {
  background: #333333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  background-size: cover;
  background-position: center center;
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 0.5s;
  color: oldlace;
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  background: none;
  appearance: none;
  border: 0;
  font-size: 22px;
  color: white;
  border-bottom: 2px solid oldlace;
}

input::placeholder{
  color: oldlace;
}

input:focus,
input:active {
  outline: none;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul {
  margin-top: 50px;
}

.clicked {
  color: #7f8c8d;
}

.form,
.greetings {
  display: none;
}

.showing{
  display : block;
}

.bgImage{
  position: absolute;
  top : 0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: -1;
  animation: fadeIn 0.5s linear;
}

.weather{
  position: absolute;
  font-style: italic;
  font-size: 12px;
  position: absolute;
  top: 25px;
  right: 25px;
}

.clock {
  font-size: 7em;
}

.center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.center .name__input {
  appearance: none;
  background: none;
  border: none;
  color: white;
  font-size: 36px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}
.center .name__input::placeholder {
  color: white;
  opacity: 0.7;
}

.center .name__input:focus,
.center .name__input:active {
  outline: none;
}

.center .name__text {
  font-size: 36px;
  margin-bottom: 20px;
}

.center .name {
  margin-bottom: 30px;
}

.list {
  margin-bottom: 20px;
}

.toDo {
  font-size: 22px;
}

.toDo__button {
  margin-right: 10px;
  cursor: pointer;
}