* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    height: 100vh;
    margin: 0;
    background: linear-gradient(
      to right, 
      #283044 0%,
      #283044 42%,
      #78a1bb 42%,
      #78a1bb 100%
    );
    background-repeat: no-repeat;
  }


.container {
  background-color: #283044;
  width: 60vmin;
  height: 90vmin;
  padding: 50px 30px;
  position: absolute;
  transform: translate(-90%, -50%);
  left: 35%;
  top: 50%;
  border-radius: 10px;
  /*box-shadow: 0 25px 50px rgba(7, 20, 35, 0.2);*/
}

.left-panel {
    gap: 15px;
    width: 100%;
}

.left-panel input {
  width: 90%;
  margin-bottom: 10px;
}

textarea[name="description"] {
  height: 100px;
  width: 90%;
  resize: none;
}

#next {
  margin-top: 80px;
  margin-left: auto;
  width: 40%;
  display: block;

}

.container2 {
    background-color: #ffffff;
    width: 90vmin;
    padding: 50px 30px;
    position: absolute;
    transform: translate(-10%, -50%);
    left: 50%;
    top: 50%;
    border-radius: 10px;
    box-shadow: 0 25px 50px rgba(7, 20, 35, 0.2);
  }

.options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}
button {
    height: 28px;
    width: 28px;
    
}

#text-input {
    margin-top: 10px;
    border: 1px solid #ccc;
    padding: 20px;
    height: 50vh;
    overflow: auto;
}

#save {
  margin-top: 10px;
  margin-left: auto;
  width: 20%;
  display: block;

}

.link-button {
  text-decoration: none;
  cursor: pointer;
  padding: 10px;
  text-align: right;
  color: #2B303A;
}

#clear {
  margin-top: 10px;
  margin-right: auto;
  width: 20%;
  display: block;

}

.input-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
}

.tag-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tag {
  background-color: #78a1bb;
  color: whitesmoke;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}

.remove-tag {
  cursor: pointer;
  margin-left: 5px;
}

.container h1 {
  margin-right: 20px;
  color: #78a1bb;
  align-self: flex-start;
  align-items: flex-start;
  font-size: 35px;
  white-space: nowrap;
}

.container a {
  color: whitesmoke;
}

.container label {
  color: #78a1bb;
  font-size: 20px;
  font-weight: bold;
  
}


.container input, textarea {
  margin-top: 10px;
}

.container textarea {
  margin-bottom: 10px;
}


.greeting {
  margin-right: 20px;
  color: #78a1bb;
  align-self: flex-start;
  align-items: flex-start;
  font-size: 35px;
  white-space: nowrap;
}

.left-panel button {
  color: whitesmoke;
  background-color: #78a1bb;
  align-items: center;
  border-radius: 5px;
  border: none;
}


.left-panel button:hover {
  background-color: #348aa7;