:root {
  --primary-color: #02394A; /* Midnight Green */
  --secondary-color: #8980F5; /* Tropical Indigo */
  --tertiary-color: #0AD3FF; /* Vivid Sky Blue */
  --quaternary-color: #FFFFFF; /* White */
  --alert-color: #FF0000; /* Red */
  --border-color: #8E8E8E; /* Gray */
}

h1, h2, h3, .navbar-brand {
  font-family: "Rammetto One", sans-serif;
}

h2 {
  color: var(--tertiary-color);
  margin: 10px;
  padding: 15px 0;
  font-size: 1.2rem;
}

p, li, button, #paste-area {
  font-family: "Signika", sans-serif;
}

body {
  background-color: var(--quaternary-color);
}

.btn-primary {
  background-color: var(--secondary-color);
  border: 0.5px solid var(--border-color);
  color: var(--quaternary-color);
  border-radius: 50vh;
  font-size: 0.8em;
  margin: 0px;
}

.card {
  margin: 5px 10px;
  padding: 0px;
  
  & p {
    color: var(--primary-color);
    margin: 0px;
    padding: 0px;
  } 

  & .card-body {
    padding: 10px;
  }

  & .ghost {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
    color: darkred;
  }
  
  & .dropdown {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
    margin-right: 10px;

  }

  & .dropdown-menu {
    background-color: var(--primary-color);
    border: 0.5px solid var(--border-color);

    & a {
      color: var(--quaternary-color);
    }

    & a:hover {
      background-color: var(--secondary-color);
    }

    & i {
      color: var(--alert-color);
      margin-right: 5px;
    }
  }

}

.list-group {
  background-color: var(--primary-color);
  min-height: 800px;
  margin: 10px;
  padding: 0px;
}


#paste-area .inner {
  background-color: white;
  margin-bottom: 5px;
  border-radius: 10px;
  width: 100%; 
  display: flex;
  align-items: center;

  .paste-text {
    text-align: center;
    width: 100%;
  }
}

.upload-card .inner {
  background-color: red;
  border-radius: 10px;
  background-color: var(--secondary-color);
  color: white;
  p {
    width: 100%;
  }
}

/* #paste-area { */
/*   color: var(--border-color); */
/*   background-color: white; */
/*   height: 100%; */
/*   margin: 5px; */
/* } */

#card-upload {
  background: none;
  & p {
    color: white;
  }
  color: var(--border-color);
  border: 2px var(--secondary-color) dashed;
  & .btn {
    height: 100%;
    width: 100%;
    font-size: 0.7em;
    color: white;
  }

  & .inner {
    border: 1px var(--border-color) solid;
    text-align: center;
    height: 2.5em;
  }

  & .card-title {
    margin-bottom: 1em;
  }

  & .col {
    padding: 0 5px;
  }

  #file-input {
    display: none;
  }

  & .fa-upload {
    color: var(--secondary-color);
  }

  & .upload-icon {
  }

}

#caspr-nav {
  background-color: var(--primary-color); !important
  color: var(--quaternary-color);
  padding: 10px;
  margin-bottom: 20px;
}

#summary-modal-body {
  padding: 20px;
  line-height: 1.6;
}

#summary-modal-body h1 {
  font-size: 1.2em;
}

#summary-modal-body h1,
#summary-modal-body h2,
#summary-modal-body h3 {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  font-weight: 600;
}

#summary-modal-body ul,
#summary-modal-body ol {
  padding-left: 2em;
  margin-bottom: 1em;
}

#summary-modal-body li {
  margin-bottom: 0.5em;
}

#summary-modal-body p {
  margin-bottom: 1em;
}

#summary-modal-body strong {
  font-weight: 600;
}

#summary-modal-body em {
  font-style: italic;
}

#summary-modal-body code {
  background-color: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
}

#summary-modal-body blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1em;
  margin-left: 0;
  color: #666;
}