/* Character Encoding */
@charset "utf8";

/* Fonts */
@font-face {
    font-family:"ethnocentric-rg";
    src: url("../css/fonts/ethnocentric_rg.ttf") format("truetype");
  }

@font-face {
    font-family:"ethnocentric-rg-it";
    src: url("../css/fonts/ethnocentric_rg_it.ttf") format("truetype");
}

/* CSS Variables */
:root {
    	/* #18be6a; */
    	/* #7a35dc; */
        /* #007bff; */
        /* #dc3545; */
        /* Main */
        --main: #18be6a;
        /* Accent */
        --accent: #65aad1;
        /* Background */
        --background: #1e2530;
        /* White */
        --text-main: #fff;
        /* Soft */
        --text-soft: #ebf0ff;
        /* Grey */
        --text-accent: #dedede;
        /* Slightley Darker Grey */
        --text-secondary: #8f9298;

        /* Dropdown-item:hover Background */
        --dropdown-item-hover: #ffffff0d;

        /* Scrollbar Thumb */
        --scrollbar-thumb: #404b5d;

        /* Glow */
        /* --glow: rgba(24, 190, 106, 0.3); */
        /* --glow: rgba(122, 53, 220, 0.3); */
        /* --glow: rgba(0, 123, 255, 0.3); */
        /* --glow: rgba(220, 53, 69, 0.3); */
        --glow: rgba(24, 190, 106, 0.3);

        /* Overlay */
        --overlay: rgba(14, 17, 24, 0.70);
        /* Background Image */
        /* --background-image: url(/img/jager_background.png); */
        /* --background-image: url(/img/jager_background_purple.png); */
        /* --background-image: url(/img/jager_background_blue.png); */
        /* --background-image: url(/img/jager_background_red.png); */
        --background-image: url(../img/jager_background.png);
}

/* Initial Stuff
-------------------------------------------------- */

html {
    height: 100vh;
    background: linear-gradient(0deg, var(--overlay), var(--overlay)), var(--background-image);
    background-color: var(--main);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 78px;
    background-color: transparent !important;
}

.text-main {
    color: var(--main);
}

/* Navigation 
-------------------------------------------------- */

/* NavBar */
nav.navbar.navbar-expand-lg.navbar-dark.bg-baek.fixed-top {
    min-height: 70px;
    background-color: var(--background);
    border-bottom: 3px solid var(--main);
    /* Shadow */
    -webkit-box-shadow: 0px 0px 10px 0px var(--glow);
    -moz-box-shadow: 0px 0px 10px 0px var(--glow);
    box-shadow: 0px 0px 10px 0px var(--glow);
    /* Flex */
    flex-grow: 0;
    flex-shrink: 0;
}

.nav-link {
    margin-top: 5px;
    display: flex;
    flex-direction: column-reverse;
    transition: 0.3s;
}

.nav-link:hover {
    color: var(--text-main) !important;    
    transition: 0.3s;
}

.nav-link:before {
    content: '';
    height: 2px;
    width: 12px;
    border-bottom: 2px solid var(--main);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    /* Shadow */
    -webkit-box-shadow: 0px 0px 5px 2px var(--glow);
    -moz-box-shadow: 0px 0px 5px 2px var(--glow);
    box-shadow: 0px 0px 5px 2px var(--glow);
}

.nav-link:hover:before {
    width: 80%;
}

#navMenu {
    background-color: var(--background);
}

.nav-item {
    margin-top: 5px;
    align-items: center;
    font-family: ethnocentric-rg;
    font-size:14pt;
}

.dropdown-menu.show {
    margin-top: 9px;
    margin-left: -19px;
    border: transparent;
    border-left: 3px solid var(--main);
    border-right: 3px solid var(--main);
    border-bottom: 3px solid var(--main);
    border-radius: 0;
    border-bottom-right-radius: 28px;
    background-color: var(--background);
    /* Shadow */
    -webkit-box-shadow: 0px 0px 10px 0px var(--glow);
    -moz-box-shadow: 0px 0px 10px 0px var(--glow);
    box-shadow: 6px 7px 8px -5px var(--glow), 
    -6px 7px 8px -5px var(--glow);
}

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover {
    color: var(--text-main) !important;
    background-color: var(--dropdown-item-hover) !important;
    transition: 0.2s;
    border-bottom-right-radius: 0 !important;
}

.dropdown-item:hover:last-child {
    border-bottom-right-radius: 8px !important;
}

/* Main
-------------------------------------------------- */

main {
    color: var(--text-main);
    font-family: alata;
    /* Flex */
    flex-grow: 1;
    flex-shrink: 1;
}

/* Footer
-------------------------------------------------- */

footer {
    height: 70px;
    /* Flex */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    /* Other */
    color: var(--text-accent);
    background-color: var(--background);
    font-family: alata;
    border-top: 3px solid var(--main);
    /* Shadow */
    -webkit-box-shadow: 0px 0px 10px 0px var(--glow);
    -moz-box-shadow: 0px 0px 10px 0px var(--glow);
    box-shadow: 0px 0px 10px 0px var(--glow);
}

footer ul {
    height: 100%;
    color: inherit;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer ul li {
    color: inherit;
    margin: 2px 1em;
}

footer ul li a {
    color: inherit;
    transition: .5s;
    text-decoration: none;
}

footer ul li a:hover {
    color: var(--main);
    text-decoration: none;
    transition: .5s;
    text-shadow: 0px 0px 15px var(--glow);
}

/* Scrollbar
-------------------------------------------------- */

::-webkit-scrollbar {
	width: 12px;
	background-color: var(--background);
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: var(--background);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--scrollbar-thumb);
}

/* Partner Page
-------------------------------------------------- */

.col.p-0.my-4 h1 {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.col.p-0.my-4 h1:after {
    content: '';
    width: 200px;
    border: 2px solid var(--main);
    border-radius: 0 0 20px 20px;
    /* Center */
    margin: 7px auto 0 auto;
    /* Box Shadow */
    -webkit-box-shadow: 0px 0px 5px 2px var(--glow);
    -moz-box-shadow: 0px 0px 5px 2px var(--glow);
    box-shadow: 0px 0px 5px 2px var(--glow);
}

/* Container Styling 
-------------------------------------------------- */

.container a {
    color: var(--main) !important;
    text-decoration: none !important;
}

.container strong {
    color: var(--accent);
}

.container h3, h4 {
    color: var(--main);
}

.container ul li p {
    margin-left: .5em;
}

.container .terms p {
    margin-left: .5em;
}

/* Container Styling 
-------------------------------------------------- */

/* Home Page Circles */
.circle {
    /* Height & Width */
    height: 150px;
    width: 150px;
    /* Flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Text */
    font-size: 60px;
    /* Colors */
    color: var(--text-soft);
    background-color: var(--background);
    /* Border */
    border: 2px solid var(--main);
    border-radius: 100%;
    /* Box Sizing */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* Animation */
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.5), 0px 0px 5px 0px var(--glow);
    } to {
        box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.5), 0px 0px 15px 0px var(--glow);
    }
}

.circle:hover {
    color: var(--main);
    border: 3px solid var(--main);
    transition: .15s;
    background-color: var(--background);
}

.circle.mdi::before {
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.75));
    /* Animation */
    animation: glow_icon 2s ease-in-out infinite alternate;
}

@keyframes glow_icon {
    from {
        text-shadow: 0px 0px 5px var(--glow);
    } to {
        text-shadow: 0px 0px 15px var(--glow);
    }
}

.circle.mdi:hover::before {
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
}

.circle-container {
    display: flex;
    margin-top: 4%;
}

.circle-container h3 {
    margin-top: 35px;
}

.circle-container article section {
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    font-family: alata;
}

.circle-container article a {
    color: var(--main);
    text-decoration: none;
}

.circle-container article a:hover {
    color: var(--main);
    transition: .2s;
}

.circle-container article p {
    text-align: center;
    margin: 1em 0;
    width: 75%;
}

/* /crew circles */
.rounded-circle {
    height: 150px;
    width: 150px;
    border: 3px solid var(--main);
    background-color: var(--glow);
    /* Box Shadow */
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.5), 0px 0px 15px 0px var(--glow);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.5), 0px 0px 15px 0px var(--glow);
    box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75), 0px 0px 15px 0px var(--glow);
}

/* Contact Form
-------------------------------------------------- */

.contact-section{
    background-size: cover;
    padding: 40px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-section h1{
    text-align: center;
    font-family: alata;
    font-weight: lighter;
    color: var(--text-accent);
}

.border{
    width: 100px;
    height: 5px;
    background: var(--main);
    margin: 40px auto;
}

.contact-form{
    max-width: 550px;
    width: 95%;
}

.contact-form-text{
    font-family: "alata", sans-serif;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 16px 0;
    border: 2px solid var(--main);
    border-radius: 10px;
    background: rgba(0, 0, 0, .5) !important;
    color: var(--text-main);
    padding: 20px 40px;
    outline: none;
    transition: 0.5s;
    /* Box Shadow */
    -webkit-box-shadow: 0px 0px 5px 2px var(--glow);
    -moz-box-shadow: 0px 0px 5px 2px var(--glow);
    box-shadow: 0px 0px 5px 2px var(--glow);
}

.contact-form-text:focus{
    box-shadow: 0 0 10px 4px var(--main);
}

textarea.contact-form-text{
    resize: none;
    height: 120px;
}

.contact-form-btn{
    float: right;
    border: 0;
    background: var(--main);
    color: #040e0f;
    padding: 12px 50px;
    border-radius: 20px;
    cursor: pointer;

    transition: 0.5s;
}

.contact-form-btn:hover{
    background: var(--main);
}

/* Media Queries
-------------------------------------------------- */

@media screen and (max-width: 730px) {

    /* Mobile Navbar */
    .nav-link:hover:before {
        width: 20%;
    }

    .navbar-nav {
        margin-left: 10px !important;
    }

    .dropdown-item:hover {
        background-color: transparent !important;
    }

    .dropdown-menu.show {
        margin: 0 !important;
        margin-left: -19px !important;
        border: transparent !important;
    }


    /* Mobile Footer */
    footer {
        height: 130px;
    }

    footer ul {
        flex-direction: column-reverse;
	}
}