/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/
/*♠~♠~ HTML/Body START ~♠~♠*/
html, body 
    {
        width: 100%;
        height: 100%;
        min-height: 100%;
        background: url(../images/Kar_Bg_Image.webp) no-repeat center center fixed;
        background-size: cover;
        font-family: "Times New Roman";
    }

body 
    {
        margin: 0;
        display: grid;
        grid-template-rows: 100%;
        grid-template-columns: 20% 65% 15%;
        grid-template-areas:
            "menu main-content title";
        overflow-x: hidden;
    }
/*♠~♠~ HTML/Body END ~♠~♠*/
/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/


/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/
/*♠~♠~ Main Menu Trigger START ~♠~♠*/
.main-menu-trigger 
    {
        display: flex;
        flex-direction: row;
        height: 4.25em;
        justify-content: center;
        z-index: 20001;
        font-size: 11px;
        grid-area: menu;
        padding: 10px;
    }

.slice 
    {
        border-top: 1.25em solid transparent;
        border-right: none;
        border-bottom: 1em solid transparent;
        border-left: 1.875em solid #00667f;
        position: absolute;
        transform-origin: left bottom;
        border-radius: 3px 3px 0 0;
        z-index: 1;
    }

.slice:nth-child(1) 
    {
        transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
    }

.slice:nth-child(2) 
    {
        transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
    }

.slice:nth-child(3) 
    {
        transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
    }

.slice:nth-child(4) 
    {
        transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
    }

.slice:nth-child(5) 
    {
        transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
    }

.slice:nth-child(6) 
    {
        transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
    }

.icon 
    {
        position: relative;
        display: inline-block;
        width: 1.5em;
        line-height: 1em;
        height: 2px;
        top: 1.4em;
        left: -0.8em;
        transform-origin: center center;
        background: #fff;
        transition: transform .4s;
        z-index: 2;
    }

.icon:after, .icon:before 
    {
        content: '';
        display: block;
        width: 1.5em;
        height: 2px;
        left: 0;
        position: absolute;
        background: #fff;
        transition: transform .4s;
    }

.icon:before 
    {
        top: -6px;
        transform: rotateZ(0deg);
    }

.icon:after 
    {
        bottom: -6px;
        transform: rotateZ(0deg);
    }

a 
    {
        color: #00D0FF;
        cursor: pointer;
    }

/* Nav Menu Button Triggered */
.main-menu-triggered i.icon 
    {
        height: 0;
        transform: rotateZ(90deg);
    }

.main-menu-triggered .icon:before 
    {
        transform: rotateZ(45deg);
        top: -1px;
        left: 0;
    }

.main-menu-triggered .icon:after 
    {
        transform: rotateZ(-45deg);
        bottom: -1px;
        left: 0;
    }
    

/*♠~♠~ Main Menu Trigger END ~♠~♠*/
/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/


/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/
/*♠~♠~ Overlay START ~♠~♠*/
nav 
    {
        grid-area: menu;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 0;
        background-color: rgb(0,0,0,0.9);
        overflow-x: hidden;
        transform: translateX(-100%);
        transition: all 500ms;
    }

.navigation 
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20%;
        flex-grow: 0.5;
        width: 100%;
    }

.navigation ul 
    {
        padding: 0;
        list-style-type: none;
    }

.nav-about, .nav-projects, .nav-resume .nav-awards, .nav-contact 
    {
        font-size: 200%;
        transition: transform 1s;
    }

.nav-about:hover, .nav-projects:hover, .nav-resume:hover, .nav-awards:hover, .nav-contact:hover 
    {
        color: #00667F;
        transform: translate(20px);
    }

.login-social-nav 
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 170%;
        width: 100%;
    }

.login 
    {
        display: flex;
        flex-direction: row;
        cursor: pointer;
        width: 140px;
        height: 33px;
    }

.login-icon 
    {
        background-image: url(../images/Login.png);
        width: 32px;
        height: 32px;
        background-size: contain;
        background-repeat: no-repeat;
    }

.login-text 
    {
        padding-left: 10px;
    }

.social 
    {
        display: flex;
        flex-direction: row;
        padding: 10px;
    }

.facebook 
    {
        background-image: url(../images/Facebook.png);
        width: 32px;
        height: 32px;
    }

.facebook:hover 
    {
        background-image: url(../images/Facebook_Hover.png);
    }

.twitter 
    {
        margin-left: 10px;
        background-image: url(../images/Twitter.png);
        width: 32px;
        height: 32px;
    }

.twitter:hover 
    {
        background-image: url(../images/Twitter_Hover.png);
    }

.linkedin 
    {
        margin-left: 10px;
        background-image: url(../images/Linkedin.png);
        width: 32px;
        height: 32px;
    }

.linkedin:hover 
    {
        background-image: url(../images/Linkedin_Hover.png);
    }

.instagram 
    {
        margin-left: 10px;
        background-image: url(../images/Instagram.png);
        width: 32px;
        height: 32px;
    }

.instagram:hover 
    {
        background-image: url(../images/Instagram_Hover.png);
    }

.main-content-overlay 
    {
        grid-area: main-content;
        width: 100%;
        height: 100%;
        transform: translateX(125%);
        background-color: rgb(0,0,0,0.9);
        transition: all 500ms;
    }

/*♠~♠~ Overlay END ~♠~♠*/
/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/


/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/
/*♠~♠~ Title START ~♠~♠*/
.top-overlay 
    {
        grid-area: title;
        background-color: rgb(0,0,0,0.9);
        transform: translateX(100%);
        transition: all 500ms;
    }

.dakota-chandler-title 
    {
        grid-area: title;
        z-index: 1;
        font-family: "Brush Script MT", cursive;
        font-size: 200%;
        color: #00667f;
    }

.dakota-top-title 
    {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin: 0 30px 0 0;
    }

.chandler-bottom-title 
    {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin: 0 30px 0 0;
    }
/*♠~♠~ Title END ~♠~♠*/
/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/


/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/
/*♠~♠~ Footer START ~♠~♠*/
footer 
    {
        height: 87px;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        text-align: center;
        color: #00667f;
        background: linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%);
        background-color: #fff;
        border-top: 6px solid #00667f;
    }

.footer-text {
    text-align: center;
    align-content: center;
    vertical-align: middle;
}


/*♠~♠~ KAR Equipment Logo START ~♠~♠*/
.dakota-initial-logo-footer 
    {
        position: fixed;
        bottom: 4px;
        left: 30px;
        width: 87px;
        height: 76px;
        background-image: url(../images/DC\ Signature.png);
    }

.dakota-initial-border-footer
    {
        position: fixed;
        bottom: 4px;
        left: 30px;
        width: 87px;
        height: 76px;
    }

.dakota-initial-border-footer span
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.dakota-initial-border-footer span:nth-child(1)
    {
        transform:rotate(0deg);
    }

.dakota-initial-border-footer span:nth-child(2)
    {
        transform:rotate(90deg);
    }

.dakota-initial-border-footer span:nth-child(3)
    {
        transform:rotate(180deg);
    }

.dakota-initial-border-footer span:nth-child(4)
    {
        transform:rotate(270deg);
    }

.dakota-initial-border-footer span:before
    {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height: 2px;
        background: #00D0FF;
        animation: keBox 4s linear infinite;
    }

@keyframes keBox 
    {
        0% {
            transform:scaleX(0);
            transform-origin: left;
    } 50% {
        transform:scaleX(1);
        transform-origin: left;
    } 50.1% {
        transform:scaleX(1);
        transform-origin: right;  
    } 100% {
        transform:scaleX(0);
        transform-origin: right;
        }
    }
/*♠~♠~ KAR Equipment Logo END ~♠~♠*/


/*♠~♠~ UMD Logo START ~♠~♠*/
.umd-logo-symbol 
    {
        position: fixed;
        bottom: 4px;
        right: 30px;
        width: 64px;
        height: 64px;
        background-image: url(../images/UMD_Logo_64.png);
    }

.umd-logo-letters 
    {
        position: fixed;
        bottom: 6px;
        right: 30px;
        width: 64px;
        height: 64px;
        background-image: url(../images/UMD_Letters_64.png);
        animation: rotation 30s infinite linear;
    }

@keyframes rotation 
    {
        from {
            transform: rotate(0deg);
        } to {
            transform: rotate(359deg);
        }
    }


/*.footer-border
    {
        position: fixed;
        bottom: 75px;
        left: 0;
        width: 100%;
        height: 5px;
        background: red;
        animation: shine 10s linear infinite;
        z-index: 2;
    }

@keyframes shine 
    {
        0% {
            transform:scaleX(0);
            transform-origin: left;
    } 50% {
        transform:scaleX(1);
        transform-origin: left;
    } 50.1% {
        transform:scaleX(0);
        transform-origin: right;  
    } 100% {
        transform:scaleX(1);
        transform-origin: right
    }*/
/*♠~♠~ UMD Logo END ~♠~♠*/
/*♠~♠~ Footer END ~♠~♠*/
/*♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~♠~*/