*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, a, button, summary, details, label, textarea{
    margin: 0;
    padding: 0;
    color: black !important;
    font-family: StayGreeterRegular !important;
}

@font-face{
    font-family: StayGreeterRegular;
    src: url("/fonts/Poppins-Regular.ttf");
}

@font-face{
    font-family: StayGreeterBold;
    src: url("/fonts/Poppins-Bold.ttf");
}

/*
Color Palette
Nice Blue - #025464
Dark Orange - #E57C23
Lighter Orange - #E8AA42
Offwhite - #F8F1F1
*/

/*#region Standard Button Styles*/

.standard_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    white-space: nowrap;
    font-family: StayGreeterRegular !important;
    border-radius: 6px;
    border: none;
    color: white !important;
    background-color: #E57C23; /*Default background for button is dark orange*/
    box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    cursor: pointer;
}

.standard_button:hover {
    background-color: rgb(50, 50, 50) !important;
}

.standard_button_disabled{
    background: grey;
    color: darkgrey;
    pointer-events: none;
}

.shake_up_animation{
    animation: shake-up 2s cubic-bezier(.36, .07, .19, .97) both infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility:hidden;
    perspective: 1000px;
}

@keyframes shake-up{
    10%,
    90% {
      transform: translate3d(0, 1px, 0);
    }
    20%,
    80% {
      transform: translate3d(0, -2px, 0);
    }
    30%,
    50%,
    70% {
      transform: translate3d(0, 3px, 0);
    }
    40%,
    60% {
      transform: translate3d(0, -4px, 0);
    }
}

/*#endregion*/

/*#region Scroll Bar Styles*/

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #E8AA42 0%, #E57C23 100%);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #936c2a 0%, #874c19 100%);
}

/*#endregion*/

/*#region Navigation Bar*/

nav{
    display: flex;
    
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    
    height: 4rem;
    z-index: 50;
    
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    background-color: rgb(229, 124, 35, .85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

nav a {
    color: black !important;
    text-decoration: none;
    font-weight: 600;
}

/*#region Extra Navigation Dropdown for Desktop */
.extra_nav_dropdown_Desktop:hover .extra_nav_dropdown_container_Desktop{
    opacity: 1;
    padding: 1rem;
    max-height: 100rem;
}

.extra_nav_dropdown_container_Desktop{
    display: block;
    width: auto;
    opacity: 0;
    position: absolute;
    max-height: 0rem;
    top: 3rem;
    left: 1rem;
    padding: 0;
    overflow: hidden;
    transition: max-height .75s ease, opacity .05s, padding .1s;
}

.extra_nav_dropdown_container_Desktop:hover{
    opacity: 1;
    padding: 1rem;
    max-height: 100rem; /*value for now while we have 4 options*/
}

.extra_nav_dropdown_content_Desktop{
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

}

.extra_nav_dropdown_content_Desktop p{
    margin-top: .4rem;
    margin-bottom: .4rem;
    border-radius: 5px;
    padding: .25rem;
    font-weight: 300;
    color: white !important;
}

.extra_nav_dropdown_content_Desktop p:hover{
    background-color: rgba(150, 150, 150, .75);
}

/*#endregion*/

/*#region Extra Navigation Dropdown for Desktop */

.extra_nav_dropdown_container_Mobile{
    display: block;
    position: absolute;
    top: 4rem;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    overflow: hidden;
    max-height: 0;
    padding: 0;
    border-radius: 10px;
    transition: max-height 1s ease, padding 1s;
}

.extra_nav_dropdown_container_close_Mobile{
    background: none;
    width: 1rem;
    height: 1rem;
    margin-top: .75rem;
    position: absolute;
    bottom: 1rem;
}

.extra_nav_dropdown_container_Mobile p{
    color: white !important;
    margin-top: .25rem;
    margin-bottom: .25rem;
}

/*#endregion*/

/*Hamburger Menu For Mobile*/
.hamburger_menu{
    display:flex;
    flex-direction:column;
    width:70px;
    cursor:pointer;
    scale: 70%;
    position: absolute;
    right: .75rem;
}

.hamburger_menu span{
    background: black;
    border-radius:10px;
    height:7px;
    margin: 7px 0;
    transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    margin-left: auto;
}

.hamburger_menu .layer1{
    width:50%;
}

.hamburger_menu .layer2{
    width:100%;
}

.hamburger_menu .layer3{
    width:75%;
}

.hamburger_menu_closing .layer1{
    transform-origin:bottom;
    transform:rotatez(45deg) translate(-15px,25px);
}

.hamburger_menu_closing .layer2{
    transform-origin:top;
    transform:rotatez(-45deg);
}

.hamburger_menu_closing .layer3{
    transform-origin:bottom;
    width:50%;
    transform: translate(-5px,-11px) rotatez(45deg);
}

.mobile_nav_logo{
    height: 3rem;
    width: 3rem;
    position: absolute;
    left: .75rem;
    top: .5rem;
    border-radius: 1rem;
}

.desktop_nav_logo{
    height: 2rem;
    width: 2rem;
    border-radius: .5rem;
}

.desktop_nav_logo:hover{
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
}

/*#endregion*/

/*#region Layout Styles*/

.column {
    float: left;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.space{
    width: 100%;
    background: none;
    border: none;
    outline: none;
}

/*#endregion*/

/*#region Background Styles*/

body{background-color: #F8F1F1;}

/*#region Animated Circles Background*/

.background{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -10;
}

.background li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: #E8AA42;
animation: background-animate 25s linear infinite;
bottom: -150px;
z-index: -10;
}

.bbackgroundg li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}

.background li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}

.background li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}

.background li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}

.background li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}

.background li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}

.background li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}

.background li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}

.background li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}

.bbackgroundg li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}

@keyframes background-animate {

0%{
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
}

100%{
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
}
}
  
  /*#endregion*/

/*#endregion*/

/*#region View, Overlay, and Container Styles*/

.container{
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 25px;
    width: 100%;
    height: auto;
    box-shadow: rgba(50, 50, 50, 0.25) 0px 12px 48px 0px;
}

/*Background Colors*/
.bg_nice_blue{background-color: #025464 !important;}
.bg_dark_orange{background-color: #E57C23 !important;}
.bg_light_orange{background-color: #E8AA42 !important;}
.bg_off_white{background-color: #F8F1F1 !important;}
/*Not currently used anywhere, but may have to use at some point*/
.glass{background: linear-gradient(to right bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, .3)) !important;}

/*Colors*/
.nice_blue{color: #025464 !important;}
.dark_orange{color: #E57C23 !important;}
.light_orange{color: #E8AA42 !important;}
.off_white{color: #F8F1F1 !important;}

.loading_overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

/*#endregion*/

/*#region Hover Effects*/

.hover_move_up_left{
    transition: transform .5s;
}

.hover_move_up_left:hover{
    transform: translateX(-.5rem) translateY(-1rem);
}

/*#endregion*/

/*#region Responsiveness*/

/*Smaller screens (screen widths less than 1024 - mobile and tablet devices)*/
@media screen and (max-width: 1023px) {

    /*Navigation Bars*/
    #DesktopNavigationBar{display: none;}
    #MobileNavigationBar{display: flex;}

    nav {
        flex-direction: column;
        overflow: hidden;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        height: auto;
        max-height: 4rem;
        transition: max-height .5s ease;
    }

    nav a {
        font-size: 1.25rem !important;
        text-align: left;
        margin-left: 1.5rem;
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    body{
        margin-top: 5rem; /*For nav bar*/
    }

    /*Font sizes*/
    h1 { font-size: 2.25rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.4rem !important; }
    h4, p, a, button, summary, details, label, textarea { font-size: 1rem !important; }

    /*Layouts, padding, and margins*/
    .standard_button{ margin: auto; }

    .container{
        text-align: center;
        padding: 1rem;
    }
}

/*Smaller Desktop Screens (screen widths between 1024px and 1366px)*/
@media screen and (min-width: 1024px) and (max-width: 1365px) {

    /*Navigation Bars*/
    #DesktopNavigationBar{display: flex;}
    #MobileNavigationBar{display: none;}

    nav {
        flex-direction: row;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        align-items: center;
        padding: 1rem;
    }

    nav a {
        height: 100%;
        text-align: center;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        margin-right: .2rem;
        margin-left: .2rem;
    }

    nav a:hover{
        background-color: rgba(75, 75, 75, .5);
    }

    body{
        margin-top: 8rem; /*For nav bar*/
    }

    /*Font sizes*/
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4, p, a, button, summary, details, label, textarea { font-size: 1rem !important; }

    .container{
        text-align: left;
        padding: 1.5rem;
    }
}

/*Standard Desktop Screens (screen widths 1366 or more)*/
@media screen and (min-width: 1366px) and (max-width: 2399px) {

    /*Navigation Bars*/
    #DesktopNavigationBar{display: flex;}
    #MobileNavigationBar{display: none;}

    nav {
        flex-direction: row;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        align-items: center;
        padding: 1rem;
    }

    nav a {
        color: black !important;
        text-decoration: none;
        font-weight: 600;
        height: 100%;
        text-align: center;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }

    nav a:hover{
        background-color: rgba(75, 75, 75, .5);
    }

    body{
        margin-top: 8rem; /*For nav bar*/
    }

    /*Font sizes*/
    h1 { font-size: 3rem !important; }
    h2 { font-size: 2.5rem !important; }
    h3 { font-size: 1.75rem !important; }
    h4, p, a, button, summary, details, label, textarea { font-size: 1rem !important; }

    .container{
        text-align: left;
        padding: 2.5rem;
    }
}

/*Larger Desktop Screens (screen widths 2500 or more)*/
@media screen and (min-width: 2400px) {

    /*Navigation Bars*/
    #DesktopNavigationBar{display: flex;}
    #MobileNavigationBar{display: none;}

    nav {
        flex-direction: row;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        align-items: center;
        padding: 1rem;
        height: 6rem;
    }

    nav a {
        color: black !important;
        text-decoration: none;
        font-weight: 600;
        height: 100%;
        text-align: center;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }

    nav a:hover{
        background-color: rgba(75, 75, 75, .5);
    }

    body{
        margin-top: 10rem; /*For nav bar*/
    }

    /*Font sizes*/
    h1 { font-size: 4rem !important; }
    h2 { font-size: 3rem !important; }
    h3 { font-size: 2rem !important; }
    h4, p, a, button, summary, details, label, textarea { font-size: 1rem !important; }

    .container{
        text-align: left;
        padding: 3.5rem;
    }


}

/*#endregion*/