/* Colors used in page */
:root {
    --light-white: #FFFFFF;
    --normal-white: #EEF0F2;
    --dark-white: #D1D6DC;
    --dark-white: #DCE0E4;

    --light-red: #DD5560;
    --normal-red: #CC2936;
    --dark-red: #991E29;

    --light-gray: #888888;
    --normal-gray: #666666;
    --dark-gray: #444444;

    --light-black: #333333;
    --normal-black: #141414;
    --dark-black: #0A0A0A;

    --light-yellow: #F1D26A;
    --light-yellow: #F3D77C;
    --normal-yellow: #EEC643;
    --dark-yellow: #EABB1F;
    --dark-yellow: #E0B115;
    
    --light-blue: #5BAFC2;
    --normal-blue: #388697;
    --dark-blue: #2C6977;


    /* f3d77c; */
    /* e0b115; */
    /* background: linear-gradient(90deg, #6AB7C8, #388697, #275C68); */
    /* background: linear-gradient(90deg, #5BAFC2, #388697, #2C6977); */
    /* background: linear-gradient(to bottom, #F1D26A, #EEC643, #EABB1F); */
/* 
    background: linear-gradient(to bottom, #4CA8BD, #388697, #327786);
    background: linear-gradient(to bottom, #F1D26A, #EEC643, #EABB1F);
    background: linear-gradient(to bottom, #292929, #141414, #0A0A0A); */

    /* background-color: rgba(238, 240, 242, 0.9); */
   /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); */
   /* background-color: rgba(20, 20, 20, 0.9);
   background-color: rgba(91, 175, 194, 0.9);
   background-color: rgba(44, 105, 119, 0.9);
   background-color: rgba(56, 134, 151, 0.9); */
   /* background: linear-gradient(to bottom, rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.5)); */

   /* background: linear-gradient(90deg, #6AB7C8, #388697, #275C68); */
   /* background: linear-gradient(90deg, #5BAFC2, #388697, #2C6977);
   background: linear-gradient(to bottom, #F1D26A, #EEC643, #EABB1F); */

   /* background: linear-gradient(to bottom, #4CA8BD, #388697, #327786); */

}

::-webkit-scrollbar {
    width: 0.625rem;
}

::-webkit-scrollbar-track {
    background: var(--normal-black);
}

::-webkit-scrollbar-thumb {
    background: var(--normal-yellow);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-yellow);
}

body {
    font-family: 'Josefin Sans', sans-serif;
    background-color: var(--normal-white);
}

/* This class will prevent transitions from firing on page loading, look at all.js */
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

textarea {
	resize: none;
}

.header-image {
    background-image: url("../images/main.webp");
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    min-height: 40rem;
}

.header-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: var(--normal-blue);
   /* opacity: 0.9; */
   opacity: 0.8;
}

header .header-text {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 90%;
    padding: 0 2rem;
    transform: translateX(-50%);
    text-align: center;
}

header .header-text h1 {
    color: var(--normal-yellow);
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 2rem;
}

header .header-text p {
    color: var(--normal-white);
    font-size: 1.25rem;
}

header .header-text a {
    padding: 1rem 2rem;
    font-size: 1.25rem;
}

.floating-group {
    position: relative;
}

.floating-group .floating-input {
    padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--light-gray);
	background-color: transparent;
    width: 100%;
    font-size: 1rem;
	transition: all 0.3s ease-in-out;
}

.floating-group .floating-input:focus {
	outline: none;
	border-bottom: 1px solid var(--dark-gray);
}

.floating-group .floating-input::placeholder {
	color: transparent;
}

.floating-group .floating-label {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
    color: var(--normal-black);  
    transition: all 0.3s ease-in-out;
    cursor: text;
    font-size: 1.1rem;
}

.floating-group .floating-input:focus + .floating-label,
.floating-group .floating-input:not(:placeholder-shown) + .floating-label {
	top: 0;
	color: var(--light-gray);
	font-size: 1rem;
}

.floating-group textarea.floating-input:focus + .floating-label,
.floating-group textarea.floating-input:not(:placeholder-shown) + .floating-label {
	top: -8px;
}

.form-error {
    color: var(--normal-red);
    font-size: 0.9rem;
    text-align: left;
    font-style: italic;
    display: block;
}

.header-space {
    min-height: 6rem;
}

.title {
    color: var(--normal-black);
    text-align:  center;
    padding: 0 1rem;
}

.title span {
    position: relative;
    display: inline-block;
	letter-spacing: 2px;
}

.title span::after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    width: 2rem;
    height: 5px;
    margin-left: -1rem;
    background-color: var(--normal-red);
}

.title span::before {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    width: 100%;
    height: 1px;
    transform: translateX(-50%);
    margin-bottom: 2px;
    background-color: var(--normal-red);
}

.btn-warning {
    background-color: var(--normal-yellow) !important;
    border-color: var(--normal-yellow) !important;
}

.btn-warning:hover {
    background-color: var(--dark-yellow) !important;
    border-color: var(--dark-yellow) !important;
}

.btn-primary {
    background-color: var(--normal-blue) !important;
    border-color: var(--normal-blue) !important;
    color: var(--normal-white) !important;
}

.btn-primary:hover {
    background-color: var(--dark-blue) !important;
    border-color: var(--dark-blue) !important;
}

.btn-outline-primary {
    border-color: var(--normal-blue) !important;
    color: var(--normal-blue) !important;
}

.btn-outline-primary:hover {
    background-color: var(--normal-blue) !important;
    color: var(--normal-white) !important;
}

.btn-danger {
    background-color: var(--normal-red) !important;
    border-color: var(--normal-red) !important;
    color: var(--normal-white) !important;
}

.btn-danger:hover {
    background-color: var(--dark-red) !important;
    border-color: var(--dark-red) !important;
}

.btn-outline-danger {
    border-color: var(--normal-red) !important;
    color: var(--normal-red) !important;
}

.btn-outline-danger:hover {
    background-color: var(--normal-red) !important;
    color: var(--normal-white) !important;
}

.page-link {
    color: var(--normal-blue) !important;
    /* background-color: var(--normal-white); */
}

.page-item.active .page-link {
    color: var(--normal-white) !important;
    background-color: var(--normal-blue) !important;
    border-color: var(--normal-blue) !important;
}

a.standalone {
    color: var(--normal-blue) !important;
}

a.standalone:hover {
    color: var(--dark-blue) !important;
}