:root {
    --primary-color: #1d5888;
    --secondary-color: #ff993b;
    --dark-color: #292929;
    --white-color: #e7e7e7;
}

.active {
    color: #ffffff
}

a.nav-link:hover.active {
    font-variant-caps: normal;
    color: #ffffff;
    text-shadow: 0 0 5px #520faa;
    transform: rotate(0.000turn);
    transition: .30s;
}
p{
    color: snow;
}
body {
    color: var(--dark-color);
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    position: sticky;
}

nav {
    background-color: var(--dark-color);
    min-height: 5vh;
}

footer {
    background-color: var(--dark-color);
}

html,
body {
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-color);
}

.common-bg {
    background: #141E30;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.taskContainer {
    background-color: white;
    border: solid .5em #ffc107;
    border-radius: .5em;
    box-sizing: border-box;
    flex: 0 0 30%;
    height: 240px;
    margin-top: 1em;
    overflow: auto;
}

main>.container {

    /* padding: 60px 15px 0; */
}

.footerspan {
    color: white;
    font-size: xx-small;
}

a.nav-link:hover {
    font-variant-caps: small-caps;
    color: #ffee10;
    text-shadow: 0 0 5px #ffee10;
    transform: rotate(0.015turn);
    transition: .5s;
}

a.footerlink::before {
    transform: scale(1.0);
}

.footerlink:hover {
    font-variant-caps: small-caps;
    transform: scale(1.5) translate(-100%, -100%);
    color: #ffee10;
    text-shadow: 0 0 5px #ffef19;

}

.portfolio {
    position: relative;
    display: block;
    text-align: center;
    transition: .5s;

}

.portfolio::before {
    /* content: ''; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .5s;
    transform: scale(.9);
    z-index: -1;
}

.portfolio:visited {}

.portfolio:hover::before {
    transform: scale(1.1);
}

.portfolio:hover {}

.portfolio:active {}

/* (A) FIXED WRAPPER */
.hwrap {
    overflow: hidden;
    /* HIDE SCROLL BAR */
    background: rgba(0, 0, 0, 0);
}

/* (B) MOVING TICKER WRAPPER */
.hmove {
    display: flex;
}

/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
    0% {
        transform: translate3d(100%, 0, 0);
    }

    100% {
        transform: translate3d(-1500%, 0, 0);
    }
}

.hmove {
    animation: tickerh linear 60s infinite;
}

.hmove:hover {
    animation-play-state: paused;
}

.description {
    /* blank for now */
}

.d-brief {
    font-size: larger;
    color: burlywood;
}

.d-paragraph {
    color: #e7e7e7;
}

.d-t-span {
    font-size: smaller;
}

.checklist {
    color: mistyrose;
}

.checklist>li i {
    color: var(--secondary-color);
}

.tech-used {}

.icon-bs {
    color: #7e0af9;
    font-size: xx-large;
}

.icon-js {
    color: #f0db4f;
    font-size: xx-large;
}

.icon-html5 {
    color: #e34c26;
    font-size: xx-large;
}

.icon-css3 {
    color: #264de4;
    font-size: xx-large;
}

code[class*="language-"],
pre[class*="language-"] {
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}