:root {
  --primary-color: #122139;
  --secondary-color: #dbdbdb;
  --tertiary-color: #1f304c;
  --button-color: #3273dc;
  --button-hover-color: #2463c7;;
  --button-text-color: #dbdbdb;
  --link-hover-color: #bbbbbb;
  --hover-dark-color: #1f304c;
  --accordion-color: #192f56;
  --accordion-border-color: #1c3e75;
  --accordion-section-color: #09172f;
}
html,
body {
  height: 100%;
  width: 100%;
  background: var(--primary-color);
  font-family: "Bricolage Grotesque", serif;
  overflow-x: hidden;
  /* hide vertical scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.button.is-warning {
  background-color: var(--button-color);
  border-color: var(--button-color);
  color: var(--button-text-color);
}
.button.is-warning:active {
  background-color: var(--button-color);
  border-color: var(--button-color);
  color: var(--button-text-color);
}
.button.is-warning:hover {
  background-color: var(--button-hover-color);
  border-color: var(--button-hover-color);
  color: var(--button-text-color);
}
.button.is-warning[disabled] {
  background-color: var(--button-color);
  border-color: var(--button-color);
  color: var(--button-text-color);
}
.button.is-warning:focus {
  background-color: var(--button-color);
  border-color: var(--button-color);
  color: var(--button-text-color);
}
.button.is-warning.is-loading::after {
  border-color: #fff0 #fff0 rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) !important;
}
.notification {
  border-radius: 16px;
}
.href,
.href:active,
.href:visited {
  color: var(--secondary-color);
  font-size: 0.9em;
}
.href:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}
.container {
  padding-top: 4em;
  padding-left: 3em;
  padding-right: 3em;
  padding-bottom: 3em;
}
.container.is-segmented {
  background-color: var(--accordion-section-color);
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-top: 4em;
  padding-left: 3em;
  padding-right: 3em;
  padding-bottom: 3em;
}
.first-column {
  padding-top: 2em;
}
.title {
  font-size: 4em;
  color: var(--secondary-color);
  font-weight: bold;
}
.subtitle {
  padding-top: 10px;
  font-size: 1.3em;
  color: var(--secondary-color);
  font-weight: 300;
}
.footer {
  padding-bottom: 6em;
  padding-top: 6em;
  padding-left: 6em;
  background: var(--primary-color);
  font-size: 0.8em;
  left: 0;
  bottom: 0;
  width: 100%;
  color: var(--secondary-color);
  text-align: left;
  border: 1px solid var(--tertiary-color);
}
.footer a {
  color: var(--secondary-color);
  font-size: 1.3em;
  font-weight: 300;
}
.footer a:hover {
  color: var(--link-hover-color);
}
.hide {
  display: none;
}
.navbar {
  background-color: var(--tertiary-color);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  width: 100%;
  height: 4em;
  z-index: 999;
}
.navbar a {
  color: #f5f5f5;
  font-size: 1.2em;
  font-weight: 300;
}
.navbar a:hover {
  color: #b4b4b4;
  background-color: var(--tertiary-color);
}
.navbar .navbar-item {
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
}
.navbar .navbar-item:hover {
  /* transparent background color */
  background-color: rgba(0, 0, 0, 0);
}
.navbar .navbar-burger {
  color: #f5f5f5;
}
.accordion {
  background-color: var(--accordion-color);
  color: #d8d8d8;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: "Bricolage Grotesque", serif;
  font-size: 18px;
  border-radius: 25px;
  transition: 0.3s;
  border: 1px solid var(--accordion-border-color);
}
.active, .accordion:hover {
  background-color: var(--hover-dark-color);
  border-radius: 25px 25px 0 0;
  font-size: 20px;
}
.accordion:after {
  content: '\002B';
  color: #d8d8d8;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
  font-size: 20px;
}
.panel {
  padding: 0 24px;
  background-color: var(--hover-dark-color);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  color: #d8d8d8;
  border-radius: 0 0 25px 25px;
}
.subtitle a {
  color: #1b8bcc;
  font-weight: 300;
  text-decoration: underline;
}
.subtitle a:hover {
  color: #106191;
}
.loading {
  &.is-loading {
      position: relative;
      pointer-events: none;
      opacity: 0.5;
      &:after {
          position: absolute;
          top: calc(50% - 2.5em);
          left: calc(50% - 2.5em);
          width: 5em;
          height: 5em;
          border-width: 0.25em;
      }
  }
}
.button.is-loading:after {
  border: 5px solid #dbdbdb !important;
}
.gc-box:hover {
  transform: scale(0.97);
  transition: 0.2s;
}
/* override bulma */
.dropdown-menu {
  background-color: var(--tertiary-color) !important;
  border-radius: 25px !important;
  right: 0 !important;
  left: auto !important;
  border: 1px solid #f5f5f5 !important;
}
.dropdown-content {
  background-color: var(--tertiary-color) !important;
  border-radius: 25px !important;
}
.dropdown-item {
  border-radius: 25px !important;
}
.navbar-dropdown {
  background-color: var(--tertiary-color) !important;
  border-top: 1px solid var(--primary-color) !important;
}
.navbar-dropdown a.navbar-item:hover {
  background-color: var(--tertiary-color) !important;
  color: #b4b4b4 !important;
}
.navbar-item.has-dropdown:hover .navbar-link {
  background-color: var(--tertiary-color) !important;
}
.navbar a:hover {
  background-color: none !important;
}
.navbar-item img {
  max-height: 42px;
}
.navbar-dropdown {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.navbar-dropdown a.navbar-item:hover {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
input[type="text"] {
  border-radius: 16px;
  padding: 24px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
}
select {
  border-radius: 16px !important;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px !important;
}
.textarea {
  border-radius: 16px;
  padding: 12px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
}
::placeholder {
  color: #aaaaaa !important;
  opacity: 1 !important;
  text-transform: none;
}
::-ms-input-placeholder {
  color: #aaaaaa !important;
  text-transform: none;
}
/* handwritten underline */
.underline {
  display: inline;
  background-image: linear-gradient(
        transparent 50%,
        transparent 50%,
        transparent 65%,
        #fcb540 50%,
        #dfa23e 85%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 0% 100%;
    animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards;
}
@keyframes animatedBackground {
    to {
        background-size: 100% 100%;
    }
}