@import "base";

// Color Variables // ----------------------------------------------------------
@off-white: #eeecf1;
@muted-purple: #473273;
@text-gray: #bdc3c7;
@purple-gray: #56535c;
@dark-purple-gray: #302f34;

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
}

// Helpers// --------------------------------------------------------------
.light {
    font-weight: 300;
}
.normal {
    font-weight: 400;
}
.semi-bold {
    font-weight: 600;
}
.bold {
    font-weight: 700;
}
.cushion {
    padding: 50px 0 50px 0;
}


// Nav Bar // ------------------------------------------------------------------
.static-nav {
    position: absolute;
    box-shadow: none;

}
.nav-wrapper {
    padding: 0px 20px 0px 20px;
    z-index: 1000;

    .menu-text {
        font-weight: 300;
        &:hover {
            text-decoration:underline;
            transition: font .3s;
            font-weight: bold;
            background-color: rgba(71, 50, 115, 0.5);
        }
    }

    .brand-logo {
        letter-spacing: 0.05em;
    }
    .brand-logo .logo-img {
        vertical-align: text-bottom;
    }
    .login-btn{
        margin-left: 20px;
        background-color: @purple;
        &:hover {
            background-color: lighten(@purple, 10%);
        }
    }
    // .side-nav {
    //     left: -0%;
    // }
}

// Custom Footer // ------------------------------------------------------------
.page-footer.static-footer {
   margin-top: 0;
   background-color: @dark-gray;

   .footer-copyright {
       .logo-img {
           opacity: 0.3;
           vertical-align: middle;
       }
       .wordmark {
           font-weight: 700;
           letter-spacing: 0.05em;
           color: #757575;
       }
       background-color: darken(@dark-gray, 1%);
   }
}
.external-link-item a{ 
    
    &:hover {
        color: @off-white !important;
        transition: color 0.3s;
    }

}
// EZ-Page Header w/ gradient // -----------------------------------------------
.content-header {
    background-color: @dark-purple;

    background:  #0E0038 linear-gradient(to bottom,
        #130c25 0%, #130c25 70%,
        #160f2d 70%, #160f2d 75%,
        #1a1134 75%, #1a1134 80%,
        #1E143C 80%, #1E143C 85%,
        #221643 85%, #221643 90%,
        #26194b 90%, #26194b 100%);

    height: 400px;

    .title {
        color: @white;
    }
    .description {
        color: @dark-white;
    }
}
