:root {
    --color-primary-100: #ffc107;
    --color-primary-200: #ffc83b;
    --color-primary-300: #ffce58;
    --color-primary-400: #ffd572;
    --color-primary-500: #ffdc8a;
    --color-primary-600: #ffe3a2;
    /** CSS DARK THEME SURFACE COLORS */
    --color-dark-100: #121212;
    --color-dark-200: #282828;
    --color-dark-300: #3f3f3f;
    --color-dark-400: #575757;
    --color-dark-500: #717171;
    --color-dark-600: #8b8b8b;
    /** CSS DARK THEME MIXED SURFACE COLORS */
    --color-mixed-100: #272116;
    --color-mixed-200: #3c362b;
    --color-mixed-300: #514c42;
    --color-mixed-400: #68635a;
    --color-mixed-500: #7f7b73;
    --color-mixed-600: #98948e;
     /** CSS WHITE TEXT COLOR */
    --color-text: ghostwhite;
}

html, body {
    height: 100%; /* Set html and body height to 100% of viewport height */
    margin: 0; /* Remove default margin */
    background-color: var(--color-dark-100);
    font-family: 'Sixtyfour', sans-serif;
}html, body {
    height: 100%; /* Set html and body height to 100% of viewport height */
    margin: 0; /* Remove default margin */
    background-color: var(--color-dark-100);
    font-family: 'Sixtyfour', sans-serif;
}
a {
    text-decoration: none;
}
.body {
    padding-top: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.top {
    animation-name: FadeInHeader;
    animation-duration: 0.3s;
    margin-bottom: 5%;
}

.title {
    color: var(--color-primary-400);
    text-align: center;
    margin: 0px;
    padding-top: 2%;
    padding-bottom: 0.5%;
}

.subTitle {
    color: var(--color-primary-500);
    text-align: center;
    margin: 0px;  
}

.contentBlock {
    width: 500px;
    height: 100px;
    background-color: var(--color-dark-200);
    border: solid 1px var(--color-dark-300);
    margin: 5px;
    margin-left: auto;
    margin-right: auto;
    animation-name: FadeInBoxes;
    animation-duration: 0.3s;
}
.contentBlock:hover{
    width: 550px;
    height: 110px;
}

.contentDiv {    
    
}

.contentText {
    text-shadow: -2px 2px 0 #000,
                 2px 2px 0 #000,
                 2px -2px 0 #000,
                 -2px -2px 0 #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: var(--color-primary-500);
    filter: none;
}

.resume, .journey, .education, .projects{
    display: flex;
    justify-content: center;
    align-items: center;
    filter:grayscale();
    height: 100%;
    width: 100%;
    background-size: cover;
}

.resume{
    background-image:url('images/resume_background.webp');
    background-position: top;
}
.journey{
    background-image:url('images/journey_background.webp');
    background-position: center;
}

.education{
    background-image:url('images/education_background.webp');
    background-position: center;
}
.projects{
    background-image:url('/images/pastprojects_background.webp');
    background-position: center;
}
.resume:hover, .journey:hover, .education:hover, .projects:hover{
    filter: none;
}

.iconBlock{
    position: absolute;
    right: 0;
    bottom: 0;
    padding-bottom: 5px;
    padding-left: 5px;
    animation-name: FadeInRight;
    animation-duration: 0.3s;
    
}
.linkedin, .github, .email, .itchio{
    height: 30px;
    width: 30px;
    padding-right: 10px;
    cursor: pointer;
}
.sportsBlock{
    position: absolute;
    bottom: 0;
    padding-bottom: 12px;
    padding-left: 10px;
    color: var(--color-primary-500);
    animation-name: FadeInLeft;
    animation-duration: 0.3s;
}
@keyframes FadeInBoxes {
    0% {
        width: 55px;
        height: 11px;
    }
    80% {
        width: 550px;
        height: 110px;
    }
    100% {  
        width: 500px;
        height: 100px;
    }
}

@keyframes FadeInHeader {
    0% {
        transform: scaleX(0.5);
    }
    80% {
        transform: scaleX(1.1);
    }
    100% {  
        transform: scaleX(1);
    }
}
@keyframes FadeInRight {
   0% {
      opacity: 0;
      transform: translateX(-40px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
} 
@keyframes FadeInLeft {
   0% {
      opacity: 0;
      transform: translateX(-40px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}