/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 html, body, div {
   padding: 0;
   margin: 0;
   font-family: sans-serif;
 }

 .hero-img-frame {
   position: absolute;
   width: 100%;
   max-height: 500px;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: -1;
 }

 .hero-img {
   width: 100%;
 }

 .home {
   min-height: 400px;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   h1 {
    height: 100%;
    z-index: 1;
    color: white;
    text-shadow: 1px 1px 15px black;
    text-align: center;
    width: 100%;
   }
 }

 .nav-bar {
   display: flex;
   justify-content: space-between;
   padding: 20px;
   background: lightblue;
   align-items: center;
   .btn {
     background-color: white;
     padding: 10px;
     box-shadow: 3px 3px 3px darkblue;
     text-decoration: none;
   }
   .btn:hover {
    background-color: rgb(240, 240, 240);
    box-shadow: 1px 1px 1px darkblue;
   }
 }

 .session-form {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 90vh;
   justify-content: center;
   align-items: center;
   form {
     height: 300px;
     width: 300px;
     background: rgb(240, 240, 240);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
   label {
     padding: 10px;
     display: block;
   }
   button {
     display: block;
     padding: 10px;
     margin: 20px;
   }
 }