#experience{
    font-size: 2.4rem;
    padding: 2rem;
    background: url('/src/images/cyber-bg1.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 100vh;
    position: relative;

    &::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.75) 65%, transparent 90%) ;
    }
}

#experience #experience-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: absolute;
    top: 5rem;
    right: 5rem;
    z-index: 1;
    max-width: 65rem;
}

#experience #no-xp-yet{
    font-size: 2em;
    font-family: var(--cyber);
    text-align: center;
    color: var(--title);
    text-shadow: 0 0 5px var(--title), 0 0 8px var(--title-shadow);
    padding: 1rem;
    letter-spacing: 5px;
}



#experience #beginning{
    padding: 1rem;
    text-align: justify;
    color: var(--text-color-2);
    font-family: var(--orbitron);
    font-size: 0.7em;
    line-height: 1.5;
}

#experience #hire-me{
    grid-area: hire-me;
    font-size: 1em;
    font-family: var(--neuropol);
    text-align: center;
    color: var(--logo1);
    text-shadow: 0 0 3px var(--logo1), 0 0 6px var(--logo1);
}


#experience #contact-me{
    grid-area: contact-me;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    gap: 2rem;
}

#experience #contact-me a{
    color: var(--text-color-1);
    font-family: var(--oxanium);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background-color: var(--bg-color-2);
    outline: none;
    border: 2px solid transparent;
    border-radius: 1rem;
    font-size: 0.8em;
    transition: all 500ms ease-in-out;
    
    &:hover, &:focus{
        color: var(--logo2);
        background-color: transparent;
        border: 2px solid var(--logo2);
        text-shadow: 0 0 5px var(--logo2), 0 0 8px var(--text-mark);
    }
}