:root{
    --main-bg-color: rgb(0, 8, 31);
    --secondary-bg-color: rgb(5, 37, 56);
    --main-font-color: #00A8E8;
    --minor-font-color: #007EA7;
    --header-font-color: #FFFFFF;
    --misc-color: #003459;
    --icon-color: white;
    scroll-behavior: smooth;
}
html, body {margin:0;padding:0;height:100%;}
/* @media screen and (max-width: 1020px) {
    :root {
        --main-bg-color: rgb(3, 48, 63);
        --secondary-bg-color: rgb(8, 68, 66);
    }
} */
.centerCard {
    margin-left: 2rem;
    margin-right: 2rem;
    background-color: var(--misc-color);

}
.fixedCanvas{
    background: transparent;
    margin-top: 10%;
    width:100%;
    z-index: -1;
}
@media screen and (max-width: 1200px) {
    .fixedCanvas {
        width: 0%;
    }
}
.lead {
    color: var(--main-font-color);
}
.container-social{
    position: fixed;
    color: var(--misc-color);
    width: 40px;
    height: 40px;
    left: 5%;
}
.headerTitleText {
    padding-top: 25%;
    font-size: 20px;
    padding-left: 40px;
    color: var(--minor-font-color);
    font-family: 'Roboto', sans-serif; 
    text-align: left;
    margin-bottom: 0;
}
.headerName{
    font-size: 65px;
    padding-left: 40px;
    color: var(--main-font-color);
    font-family: 'Roboto', sans-serif; 
    text-align: left;
    page-break-after: always;
    margin-bottom: 5%;
}
.resumeButton{
    align-self: left;
    border-color: var(--minor-font-color);
    color: var(--main-font-color);
    /* margin-bottom: 60%; */
}
@media screen and (max-width: 480px) {
    .resumeButton {
        margin-left: -35%;
        /* margin-bottom: 24rem;    */
    }
}
@media screen and (min-width: 760px) {
    .resumeButton {
        margin-left: -65%;
        /* margin-bottom: 40rem;    */
    }
}
@media screen and (min-width: 1024px) {
    .resumeButton {
        margin-left: -72%;
        /* margin-bottom: 70rem;    */
    }
}
@media screen and (min-width: 1202px) {
    .resumeButton {
        margin-left: -78%;
        /* margin-bottom: 32rem;    */
    }
}
@media screen and (min-width: 1500px) {
    .resumeButton {
        margin-left: -67%;
        /* margin-bottom: 35rem;    */
    }
}
.background {
    height: 100%;
    width: 100%;
    margin: 0px;
    display:block;
    background-size: cover;
    background-repeat:no-repeat;
    min-height: 100%;
    background-color: var(--main-bg-color);
    color: var(--minor-font-color);
    background: var(--main-bg-color);
    background: linear-gradient(to right bottom,var(--secondary-bg-color), var(--main-bg-color) );
}
.titleText{
    color: var(--header-font-color);
}
@media screen and (max-width: 767px) {
.mobile-space {
    margin-top:0rem;
}
}
.animationIcon{
    left: -100px;
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-name: IconFlyIn;
    animation-fill-mode: forwards;
    vertical-align: text-top;
    position: fixed;
}
.fab {
    color:var(--icon-color)
}
.far {
    color:var(--icon-color)
}
@keyframes IconFlyIn{
    0%   {color:transparent; left:-10px;}
    100%   {color:var(--icon-color); left:5%;}
}
.cardFlyInLeft{
    position:relative;
    animation-duration: 1s;
    animation-name: cardInLeft;
    animation-fill-mode: forwards;
}
@keyframes cardInLeft {
    0%   {
        background-color:transparent; 
        color: transparent;
        Left:100px;}
    100%   {
        background-color:var(--misc-color); 
        color:var(--header-font-color);
        Left:20%;}
}

.cardFlyInRight{
    position:relative;
    animation-duration: 1s;
    animation-name: cardInRight;
    animation-fill-mode: forwards;
}
@keyframes cardInRight{
    0%   {
        background-color:transparent; 
        color: transparent;
        Right:100px;}
    100%   {
        background-color:var(--misc-color); 
        color:var(--header-font-color);
        Right:20%;}
}