:root{
    --slide-duration: 60s;
    --start-top-offset: -2500px;
    --end-top-offset: 200px;
    --start-left-offset: -3500px;
    --end-left-offset: 0px;
    --height: 1000px;
    --anim-direction: alternate;
    --color-primary: #36393F;
    --color-secondary: #2a2c30;
    --fill-col: red;
}

.portfolio-section{
    min-height: 1000px;
    background-color: var(--color-primary);
    position: relative;
}

#portfolio-introduction {
    background-color: floralwhite;
    z-index: 2;
    position: relative;
    min-height: 400px
}

.dustie-image {
    width: 25%
}

.icon {
    color: white;
}

a > i.fa-brands {
    color: rgba(196, 194, 194, 0.55)
}

.layered-image {
    -webkit-transform: matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
    -ms-transform: matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
    transform: matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.layered-image img{
    border-width: 30px;
    border-style: solid;
    border-color: var(--color-secondary);
    transition: transform ease-in-out 0.3s ;
}

.layered-image img:hover{
    transform: scale(1.05);
}

.discord-bgcolor {
    background-color: var(--color-primary);
}

.layered-image.slide-right {
    -webkit-animation: right-slide var(--slide-duration) ease-in-out infinite;
    animation: right-slide-small var(--slide-duration) ease-in-out infinite;
    -webkit-animation-direction: var(--anim-direction);
    animation-direction: var(--anim-direction)
}

.layered-image.slide-right.freeze{
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

@media(max-width: 789px){
    .layered-image.slide-right {
        -webkit-animation: right-slide-small var(--slide-duration) ease-in-out infinite;
        animation: right-slide-small var(--slide-duration) ease-in-out infinite;
        -webkit-animation-direction: var(--anim-direction);
        animation-direction: var(--anim-direction)
    }
}


@-webkit-keyframes right-slide {
    0%, 1% {
        -webkit-transform: translate(var(--start-left-offset), var(--start-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
        transform: translate(var(--start-left-offset), var(--start-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0)
    }
    99%, 100% {
        -webkit-transform: translate(var(--end-left-offset), var(--end-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
        transform: translate(var(--end-left-offset), var(--end-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0)
    }
}


@keyframes right-slide {
    0%, 1% {
        -webkit-transform: translate(var(--start-left-offset), var(--start-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
        transform: translate(var(--start-left-offset), var(--start-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0)
    }
    99%, 100% {
        -webkit-transform: translate(var(--end-left-offset), var(--end-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
        transform: translate(var(--end-left-offset), var(--end-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0)
    }
}

@keyframes right-slide-small {
    0%, 1% {
        -webkit-transform: translate(calc(var(--start-left-offset) + 500px), calc(var(--start-top-offset) + 500px)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
        transform: translate(calc(var(--start-left-offset) + 500px), calc(var(--start-top-offset) + 500px)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0)
    }
    99%, 100% {
        -webkit-transform: translate(var(--end-left-offset), var(--end-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
        transform: translate(var(--end-left-offset), var(--end-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0)
    }
}

@-webkit-keyframes right-slide-small {
    0%, 1% {
        -webkit-transform: translate(calc(var(--start-left-offset) + 500px), calc(var(--start-top-offset) + 500px)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
        transform: translate(calc(var(--start-left-offset) + 500px), calc(var(--start-top-offset) + 500px)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0)
    }
    99%, 100% {
        -webkit-transform: translate(var(--end-left-offset), var(--end-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0);
        transform: translate(var(--end-left-offset), var(--end-top-offset)) matrix(0.27, -0.04, 0.21, 0.17, 0, 0)
    }
}


.dustie-content {
    z-index: 2;
}

.dustie-content p {
    text-shadow: 2px 2px black;
}

.separator-box {
    background-color: var(--color-secondary);
    width: 100%;
    height: var(--height);
    margin-top: 300px;
    margin-bottom: 300px;
    -webkit-transition: all cubic-bezier(0.1, 0, 0.9, 1) 1s;
    -o-transition: all cubic-bezier(0.1, 0, 0.9, 1) 1s;
    transition: all cubic-bezier(0.1, 0, 0.9, 1) 1s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flipped{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

a i {
    color: #87888a;
}