@font-face {
  font-family: 'ShareTechMono';
  src: url('/fonts/ShareTechMono-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'ShareTechMono', monospace;
  font-weight: 400;
  font-style: normal;
  background-color: #daf4ed;
}

header {
  padding: 14px 0px;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  margin-top: 4px;
  margin-bottom: 60px;
  display: flex;
  position: relative;
}

main {
  min-height: 800px;
}

footer {
  text-align: center;
  padding: 22px 0px;
  margin-top: 60px;
  margin-bottom: 4px;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

/* Login page */
#login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

#login-button {
  width: 100%;
  text-align: center;
}
/* Login page end */

/* Spinner */
#spinner {
  position: fixed;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loader {
  border: 8px solid #f3f3f3cc;
  border-top: 8px solid #3e3e3e80;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Spinner end */

/* Header */
.day-night-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
}

.day-night-switch {
  margin-right: -9px;
}

.title-text {
  width: 100%;
  text-align: center;
  margin-left: 70px;
  margin-top: 14px;
}

.title-text-plain {
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

.cheeseburger {
  position: relative;
  text-align: end;
  margin-top: 4px;
  z-index: 3;
}

.navbar {
  display: none;
}

#navbar {
  z-index: 3;
}

.btn-title {
  color: black;
  text-decoration: none;
}

.navbar-buttons {
  background-color: #e9f8f4;
  border: 1px solid #bbb;
  border-radius: 6px;
  position: absolute;
  top: 12px;
  left: 0%;
  padding: 20px 20px;
  width: 100%;
  text-align: center;
}

.btn-logout {
  margin: 12px 0px;
}

.btn-navbar {
  width: 90px;
  margin: 8px 6px;
}

.btn-navbar-input {
  width: 100px;
  margin-left: 16px;
}

.navbar-input {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.header-input {
  background-color: #f1fBf8;
  border: 1px solid #bbb;
}

.form-select {
  width: 280px;
}
/* Header End */

/* Main content */
.question {
  width: 100%;
  margin: 12px 0px;
  border: 1px solid #bbb;
  background-color: #e9f8f4;
}

#uploaded-images {
  max-width: 100%;
  margin: 12px 0px;
}

.button-send {
  width: 100%;
  display: flex;
  justify-content: end;
  margin: 12px 0px;
}

#image {
  width: 100%;
}

.response {
  margin: 12px 0px;
  padding: 8px 12px;
  background-color: white;
  border-radius: 6px;
  font-weight: 500;
}

.question-field {
  border-radius: 6px;
  border: 1px solid #bbb;
}

.response-field {
  border-radius: 6px;
  border: 1px solid #bbb;
}

.response-text {
  margin: 12px 0px;
  padding: 24px;
  background-color: #e9f8f4;
  border-radius: 4px;
  white-space: pre-wrap;
}

.hljs-ln-numbers {
  text-align: right;
  color: #999;
  border-right: 1px solid #ccc;
  user-select: none;
}

.hljs-ln-n {
  padding-right: 12px;
}

.hljs-ln-code  {
  padding-left: 12px !important;
}

.btn-gemini {
  width: 100px;
  margin: 4px 10px;
}

#mirror {
  border-radius: 6px;
}

#pdf {
  width: 100%;
  height: 600px;
  border-radius: 4px;
}
/* Main content end */

/* Night mode */
.night {
  background-color: #2c2c2c;
  color: #e0e0e0;
}

.hamburger-inner-night,
.hamburger-inner-night::before,
.hamburger-inner-night::after {
  background-color: white !important;
}

.input-night,
.input-night:focus,
.input-night:hover,
.input-night::placeholder {
  background-color: #1e1e1e;
  color: white;
}

.textarea-night {
  border: 3px solid #bbb;
}

.input-button-day::file-selector-button,
.input-button-day::file-selector-button:hover,
.input-button-day::file-selector-button:focus {
  background: #e9f8f4 !important;
  border: 2px solid #6C757D;
  border-radius: 4px;
}

.input-button-night::file-selector-button,
.input-button-night::file-selector-button:hover,
.input-button-night::file-selector-button:focus {
  background: #222 !important;
  border: 2px solid #6C757D;
  border-radius: 4px;
  color: white;
}

.response-text-night {
  background-color: #1e1e1e;
}
/* Night mode end */

/* Development */

/* Development end */

/* Responsive Design */
@media only screen and (min-width: 320px) and (max-width: 991px) {
  #spinner {
    width: 95%;
  }
  .btn-navbar {
    width: 74px;
    font-size: 12px;
  }
  .btn-logout {
    font-size: 12px;
  }
  .form-select {
    width: 236px;
  }
  .btn-navbar-input {
    width: 80px;
  }
}

@media only screen and (max-width: 319px) {
  html {
    display: none;
  }
}