/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


button {
  border-radius: 15px;
  color: black;
  border: 2px solid black;
  font-size: 18px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  background: linear-gradient(#ffffaf, #ff3eaf)
}

button:not([disabled]):hover {
  background: #fafaf0;
}

button:disabled {
  cursor: not-allowed;
}

body {
  background: linear-gradient(#ff3eaf, #ffffaf);
  height: 100dvh;
}

.main {
  padding:20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1269px;
  margin: auto;
  height: 85dvh;
}

.header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.header a {
  text-decoration: none;
  color: black;
}

.header img:hover {
  animation: rotating 1s linear infinite;
  -webkit-animation: rotating 1s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.header-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
  align-items: center;
}

trix-editor {
  border-radius: 20px;
  border: solid 2px black;
  height: 100%;
  padding: 20px;
  background: #fafaf0;
  font-size: 20px;
  font-family: sans-serif;
}

#note-form {
  height: 100%;
}

.field {
  height: 100%;
}

h1 {
  margin: 0px;
  font-size: 3em;
}


.honk {
  font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
}

.audiowide {
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hero {
  text-align: center;
  font-size: 1.8em;
}

.hero {
  & marquee {
    font-size: 1.5em;
  }
}

trix-toolbar .trix-button-group {
  border: 1px solid black;
}

trix-toolbar .trix-button, trix-toolbar .trix-button:not(:first-child) {
  border: 1px solid black;
  color: black;
}

trix-toolbar .trix-button--icon::before {
  opacity: 100%;
}

trix-toolbar .trix-button.trix-active, .trix-button:not([disabled]):hover {
  background: #fafaf0;
}

.trix-button-group--file-tools {
  display: none;
}

.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .desktop-only {
    display: inline;
  }
}