/*Importing fonts from google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Open+Sans&display=swap');

/*Adding common colors to the root*/
:root {
    --champagne: rgb(244, 242, 232);
    --space-cadet: #002D62;
    --darkest: #00162d;
    --aero: #6BBAEC;
    --dark-champ: #E8E6DC;
    --passed: #006D77;
    --failed: #ce5374;
    --light-aero: #a5dcff;
}

/*Backgrounds*/
.dark-champ-bg {
    background-color: var(--dark-champ);
}

.main-banner {
    background-color: var(--champagne) !important;
    font-family: 'Lora', serif;
    padding-bottom: 0 !important;
    height: 75vh;
}

.blog-banner {
    background-color: var(--champagne) !important;
    font-family: 'Lora', serif;
    padding-bottom: 0 !important;
    height: 25vh;
    border-bottom: 5px solid var(--space-cadet);
}

.aero-bg {
    background-color: var(--space-cadet) !important;
    font-family: 'Lora', serif;
}

.light-blue-bg {
    background-color: var(--aero) !important;
    font-family: 'Lora', serif;
}

.light-blue-bg p {
    font-size: 21px;
    color: var(--darkest)
}

.three-quoters {
    height: 75vh;
}

.light-aero-bg {
    background-color: var(--light-aero) !important;
    font-size: 21px;
}

.champ-bg {
    background-color: var(--champagne) !important;
}

.passed-bg {
    background-color: var(--passed);
    color: var(--champagne);
}

.failed-bg {
    background-color: var(--failed);
}

/*Text colors*/
.darkest-text {
    color: var(--darkest) !important;
}

.space-text {
    color: var(--space-cadet) !important;
}

.champ-text {
    color: var(--champagne) !important;
}

.dark-champ-text {
    color: var(--dark-champ) !important;
}

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

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

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

/*Header and navigation*/
header {
    z-index: 300 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

nav {
    position: fixed !important;
    top: 0 !important;
    width: 100%;
    background-color: white;
}

.nav-link:hover {
    color: var(--space-cadet) !important;
}

/*Footer*/
footer {
    background-color: var(--darkest);
    position: sticky;
    padding: 0.001rem;
    font-family: 'Lora', serif;
}

.footer-menu {
    padding-top: 4rem;
}

/*Profile page*/
#profile-picture {
    height: 67.5vh;
    z-index: -1 !important;
}

.personal-details label,
.personal-details p {
    display: inline;
    font-size: 25px;
}

.personal-details p {
    margin-left: 10px;
}

#collage-pic {
    width: 40vw;
}

/*Spaces*/

.no-bottom-margin {
    margin-bottom: 0 !important;
}

.big-padding-top {
    padding-top: 5rem;
}

.div-pic {
    max-width: 100%;
    max-height: 100%;
}

#dashboard {
    border-top: none !important;
}

/*Underlines*/
.underline {
    display: inline-block;
    position: relative;
    color: var(--space-cadet);
}

.underline:after

/*dark underline animation 1)*/
    {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--space-cadet);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.underline:hover:after

/*dark underline animation 2)*/
    {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.underline-light {
    display: inline-block;
    position: relative;
    color: var(--champagne);
}

.underline-light:after

/*light underline animation 1)*/
    {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--champagne);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.underline-light:hover:after

/*light underline animation 2)*/
    {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/*Lists*/

.list-group-item-champ {
    background-color: var(--champagne) !important;
    font-size: 19px;
}

.list-group-item-space {
    background-color: var(--space-cadet) !important;
    font-size: 19px;
}

/*Links*/
.no-link-feature:hover {
    text-decoration: none !important;
    color: var(--space-cadet) !important;
    font-family: 'Lora', serif;
}

.light-link {
    color: var(--champagne) !important;
}

.light-link:hover {
    color: white !important;
}

/*Home page*/
#banner {
    padding-top: 0;
}

article#banner {
    background-image: url('/images/hz-building.jpg') !important;
    background-size: cover;
}

/*Font sizes and colors*/
.med-par {
    font-size: 20px;
}

.small-heading {
    font-size: 2.5rem;
}


details {
    font-size: 23px;
}

details p {
    color: var(--space-cadet)
}

.blog p {
    font-size: 23px;
}

.subheading {
    text-decoration: underline;
}

/*Corners*/
.rounded-corners {
    border-radius: 25px;
}

.no-top-border {
    border-top-width: 0 !important;
}

.rounded-corner-right {
    border-radius: 0 0 25px 0px !important;
}

.rounded-corner-left {
    border-radius: 0 0 0 25px !important;
}

/*Icons*/
.icon-link {
    font-size: 50px;
    color: var(--space-cadet)
}


.icon-link:hover {
    color: var(--darkest)
}

/*Progress bar*/
#myProgress {
    width: 100%;
    background-color: var(--dark-champ);
}

#myBar {
    width: 1%;
    height: 30px;
    background-color: var(--aero);
}

#border-point {
    margin-left: 73%;
}

#end-point {
    margin-left: 90%;
}

/*Responsiveness*/
@media only screen and (max-width: 1195px) {
    #profile-column {
        display: none;
    }

    #end-point {
        margin-left: 85% !important;
    }

    #border-point {
        margin-left: 70%;
    }

    .hidden {
        display: none;
    }
}

@media only screen and (max-width: 750px) {
    #end-point {
        margin-left: 75% !important;
    }

    .main-banner {
        height: auto;
    }
}


@media only screen and (max-width: 500px) {
    .scale-down {
        font-size: 4.5rem !important;
    }
}

/* Description list */
dl {
    width: 100%;
}

dt,
dd {
    display: inline;
}

/* Sticky banner */
.sticky-banner {
    z-index: 1 !important;
}

/* Strikethrough */
.strikediag {
    background: linear-gradient(to left top, transparent 47.75%, var(--failed) 46.5%, var(--failed) 53.5%, transparent 52.25%);
}