.skill-container {
    padding-left: 32px; 
    /* border-left: 1px var(--dark) solid;  */
    position: relative;
}

.skill-border {
    position: absolute;
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 1px; 
    background-color: var(--dark);
}

.skill-block {
    padding: 20px 0; 
}

.hero .intro {
    padding-right: 80px; 
}


/* LOADER */
.loader {
    position: fixed;
    top: 0; 
    left: 0; 
    z-index: 9999;
    background-color: var(--light);
    width: 100vw; 
    height: 100vh;
}

.loader .emblem {
    width: 50px; 
    height: 50px; 
}

.loader .emblem img {
    width: 15px;
    height: 15px;
    animation: spin 2s;
    animation-iteration-count: infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg);
    }
}


@media screen and (max-width: 900px) {

 .hero .inner.flexed {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
 }

 .hero .half {
    width: 100%; 
 }

 .skill-container {
    border-left: none; 
    padding-left: 0; 
    margin-top: 20px; 
 }

 .skill-border {
    display: none;
 }


}

@media screen and (max-width: 620px) {
    .hero .half {
        padding-right: 0; 
    }
}