.alert {
   background-color: rgba(255,165,0,0.64);
   border-radius: 6px;
   color: black;
   display: inline-block;
   left: 8px;
   padding: 8px;
   pointer-events: none;
   position: fixed;
   text-shadow: 0 1px #33b;
   top: 48px;
   transition: all 1s ease-in-out;
   user-select: none;
   width: 296px;
   z-index: 7;
}

.alert.dark {
   background-color: rgba(28, 72, 98, 0.08);
   color: rgba(255,255,255,0.16);
}

.alert.vivid {
   background-color: rgba(28, 72, 198, 0.4);
   color: white;
}

#app {
   height: 99.9999vh;
   max-height: 99.9999vh;
   overflow: hidden;
}

.author {
    color: rgba(0,0,0,0.4);
    font-size: smaller;
    margin: 0;
    padding-right: 4px;
    text-align: right;
}

.calendar {
   background-color: rgba(0,0,0,0.4);
   border-radius: 6px;
   overflow: hidden;
   padding-bottom: 8px;
}

.card {
   background-color: rgba(255,255,255,0.88);
}

   .card .card-body {
      min-height: 20vh;
   }

   .card .card-head {
      border-bottom: 1px solid rgba(0,0,0,0.24);
      box-shadow: 0 2px 4px rgba(0,0,0,0.16);
      font-size: 8pt;
   }

   .card .card-head.endowment {
      background-color: rgba(38,145,53,0.8);
      color: white;
      text-shadow: 0 1px black;
   }

.error-text {
   color: red;
   font-size: large;
}

.feature {
   border-radius: 6px;
   overflow: hidden;
}

figure {
   margin: 0;
}

h3 {
   margin: 4px;
   padding-left: 60px;
}

.header .logo-wrapper {
   height: 500px;
   overflow: hidden;
}

.logo-wrapper {
   transition: height 0.16s ease-in-out;
}

.header .figure {
   /* filter: drop-shadow(2px 4px 8px black); */
   padding: 24px 0 8px;
}

   .header .figure figcaption {
      font-family: cursive;
      font-style: italic;
      margin-top: 8px;
      text-transform: uppercase;
   }

.header hr {
   width: 50%;
}

.logo-name {
   background-image: url(../resources/images/bg.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 16px;
   color: white;
   display: inline-block;
   font-size: 24pt;
   font-weight: 900;
   margin-bottom: 8px;
   padding: 8px 40px;
   text-shadow: 1px 2px rgb(200,0,200);
}

.logo-flower {
   color: rgba(255,255,0,0.72);
   text-shadow: 1px 2px rgb(205,0,0);
}

.logo-sub-title {
   color: rgba(220,0,200,0.4);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.4rem;
   font-variant: small-caps;
   letter-spacing: 0.12em;
   text-shadow: 0 2px rgba(0,0,0,0.32);
}

.header {
   max-width: inherit;
   min-height: 40px;
}

.header .toolbar {
   background-color: rgb(129,204,248);
}

.header .menu-item {
   color: white;
   cursor: pointer;
   font-size: 8pt;
   font-weight: 700;
   text-align: center;
   text-transform: uppercase;
}

   .header .menu-item:hover {
       color: black;
       text-shadow: 0 2px yellow;
   }

   .header .menu-item:not(:last-child) {
       border-right: 2px solid rgba(255,255,255,0.64);
   }

.header-quote {
   color: rgb(207,183,201);
   font-family: cursive;
   font-size: 1.1rem;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: 0.08em;
   margin-bottom: 0;
   padding: 2px 8px 0;
   text-align: justify;
   text-shadow: 0 1px rgb(0,0,0);
}

.icon {
   cursor: pointer;
}

.logo-img {
   border-radius: 16px;
   filter: grayscale(0.84);
   box-shadow: 8px 8px 8px rgba(0,0,0,0.2);
   max-width: 92%;
}

   .logo-img:hover {
       filter: grayscale(0.1);
   }

input[type="submit"]:disabled, button:disabled {
   background-color: #999;
   color:rgba(0, 0, 0, 0.4);
   cursor: not-allowed;
}

.link {
   color: steelblue;
   cursor: pointer;
}

   .link:hover {
      text-decoration: underline;
   }

.main-content {
   background-image: url(../resources/images/pickneydem.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   overflow: auto;
   position: relative;
}

   .main-content .home {
      height: inherit;
   }

   .main-content .page {
      max-height: inherit;
      overflow: auto;
   }

   .main-content.collapse {
      max-height: calc(100vh - 88px);
   }

   .modal.show {
      background-color: rgba(0,0,0,0.88);
      height: 100vh;
      left: 0;
      overflow: hidden;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 13;
   }

.nav-crumb {
   background-color: black;
   border-radius: 16px;
   color: rgba(255,255,255,0.8);
   cursor: pointer;
   font-weight: 700;
   height: 28px;
   position: relative;
   width: 144px;
   z-index: 3;
}

.nav-crumb.event {
   background-color: #f70;
   color: black;
}

.nav-crumb.nav-crumb.event:hover {
   color: white;
}

.nav-crumb:hover::after {
   background-image: linear-gradient(105deg, #113, #f0f);
   border-radius: inherit;
   content: '';
   height: 32px;
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%,-50%);
   width: inherit;
   z-index: -1;
}

.page.front, .page.home {
   background: linear-gradient(90deg, rgb(253,255,201), white);
   height: inherit;
}

   .page.front .enter-text {
      color:rgba(150, 150, 150, 0.96);
      font-family: cursive;
      font-size: 28pt;
      text-shadow: 1px 2px rgba(172,0,181,0.48);
   }

   .page.front .door {
      cursor: pointer;
      font-size: larger;
      font-weight: 900;
   }

      .page.front .door:hover {
         color: rgb(107,123,255);
         text-decoration: underline;
      }

      .page.front .logo-img {
         height: calc(100vh - 240px);
      }

.page.home ul {
   list-style: square;
   list-style-image: url('../resources/icons/b.svg');
}

   .page.home li {
      font-size: large;
   }

.page.account {
   background-color: rgba(0, 0, 0, 0.64);
   height: 100vh;
   left: 0;
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 17;
}

   .page.account .container {
      background-color: rgba(255,255,255,0.92);
      border-radius: 8px;
      left: 50%;
      margin: 0;
      max-width: 560px;
      padding: 12px;
      position: relative;
      top: 50%;
      transform: translate(-50%, -50%);
   }

   .page.account h4 {
      margin-bottom: 0;
      margin-top: 8px;
   }

   

   .page input[type="date"],
   .page input[type="text"],
   .page input[type="email"],
   .page input[type="password"] {
       border: 2px solid rgba(0,0,0,0.2);
       border-radius: 8px;
       font-size: large;
       outline: none;
       padding: .375rem .75rem;
       transition: border-color 0.15s ease-in-out, font-weight 0.15s ease-in;
       width: 90%;
   }
   

.panel {
   background-color: rgba(255,255,255,0.88);
   border-radius: 12px;
   box-shadow: 1px 4px 4px 4px rgba(0, 0, 0, 0.4);
   margin-bottom: 16px;
   max-width: 100%;
   overflow: hidden;
}

   .panel .panel-header {
      background-color: rgb(255,255,0);
      color: black;
      font-size: large;
      font-weight: 900;
      padding: 4px 8px;
   }

.quote {
   font-family: cursive;
   font-style: italic;
   position: relative;
}

   .quote:hover::before {
      background-color:rgba(0, 0, 0, 0.64);
      border-radius: 6px;
      color: white;
      content: attr(data-content);
      left: 0;
      padding: 2px 4px;
      position: absolute;
      top: -8px;
   }

   .quote:hover {
      cursor: pointer;
   }

.scholarship p {
   font-size: 1.2rem;
}

span.name {
   text-shadow: 0 1px rgba(172,0,201,0.48);
}

.table {
   background-color: rgba(0,0,0,0.16);
}

   .table .thead {
      font-weight: 700;
      text-align: center;
   }

   .table .tbody .row:nth-child(odd) {
      background-color: rgba(25,25,0,0.16);
   }

.toolbar h4 {
   display: inline-block;
   margin: 0;
}

.wrapper {
   height: inherit;
   margin: 0 auto;
   max-width: 1024px;
   min-height: 99.6666vh;
   min-width: 320px;
   outline: 2px solid rgba(120,120,0,0.8);
}

   @media (min-width: 520px) {
      .card .card-head {
          font-size: 14pt;
      }
  
      .header .logo-sub-title {
          font-size: 20pt;
      }
  
      .header .menu-item {
          font-size: large;
      }
  
      .page.account .container {
          width: 80%;
      }
  }