body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(rgb(255, 255, 255), rgb(243, 243, 243));
}

h1 {
  color: rgb(255, 255, 255);
  font-size: 70px;
}

.header {
  text-align: center;
  background: linear-gradient(rgb(16 127 255), rgb(116 229 255));
  height: 250px;
}

/* 
==================================================
AddPrompt 
==================================================
*/

.add-prompt-main {
  transform: translate(0, -100px);
}

.add-prompt-container {
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 255, 255, 0.5);
  padding: 30px;
  border-radius: 15px;
  margin: 0 30%;
  backdrop-filter: blur(10px);
  box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 0.6);
}

.engine-select {
  width: 120px;
  padding: 5px;
  margin: 0 10px 5px 5px;
  border-radius: 100px;
}

.learn-more-link {
  font-size: 90%;
}

.prompt {
  height: 120px;
  padding: 5px;
  margin: 10px 0;
  border-radius: 10px;
}

.submit-prompt {
  align-self: center;
  color: white;
  font-weight: 600;
  font-size: 105%;
  letter-spacing: 1px;
  background: rgb(79, 135, 255);
  padding: 10px 20px;
  border: none;
  margin-top: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 8px 1px rgba(0,0,0,0.6);
  cursor: pointer;
}

.submit-prompt:hover {
  background: rgb(69 118 225);
}

.error-message {
  color: rgb(201, 0, 0);
  text-align: center;
  margin-top: 10px;
}

.loading {
  max-height: 40px;
  max-width: 40px;
  align-self: center;
  margin-top: 10px;
}

.presets-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(46, 46, 46);
  margin: 25px 15%;
}

.presets-header {
  font-size: 110%;
  margin: 15px 0;
}

.presets-buttons {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.preset-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 128px;
  height: 128px;
}

.preset-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  color: white;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 8px 1px rgba(0,0,0,0.6);
  transition: all 0.2s ease-out;
  cursor: pointer;
}

.preset-icon:hover {
  transform: scale(1.1);
}

.preset-icon:active {
  transform: scale(0.9);
}

.icon-name {
  text-align: center;
}


/* 
==================================================
EntriesList
==================================================
*/

.entries-container {
  margin: 10px 25%;
}

.no-entries {
  text-align: center;
}

/* 
==================================================
Entry
==================================================
*/

.entry-container {
  display: flex;
  flex-direction: column;
  color: rgb(46, 46, 46);
  margin: 30px 0;
  padding: 25px;
  backdrop-filter: blur(10px);
  border-radius: 25px;
  background-color: rgba(255, 255, 255);
  box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 0.6);
}

.engine-tag {
  position: absolute;
  align-self: flex-end;
  width: 60px;
  text-align: center;
  color: white;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 50px;
  transform: translate(0, -40px);
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.6);
}

.prompt-container {
  display: flex;
}

.answer-container {
  display: flex;
  margin: 10px 0;
}

.entry-header {
  font-weight: 600;
}

.entry-body {
  margin-left: 5px;
}

.timestamp-container {
  align-self: flex-end;
  font-style: italic;
  font-size: 90%;
}

@media only screen and (max-width: 1050px) {
  .add-prompt-container {
    margin: 5% 5%;
  }

  .entries-container {
    margin: 10px 2%;
  }

  .presets-container {
    margin: 50px 1% 0 1%;
  }
}

@media only screen and (max-width: 599px) {
  .presets-buttons {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
}