body{
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #000011, #000000 90%);
    background-attachment: fixed;
    font-family: 'Roboto Slab', sans-serif;
    color: #f0f8ffbe;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: #0087fd;
    font-weight: 700;
}

.my-nav{
    font-size: 1.5rem;
}

.my-nav a {
    color: #bdf5ff;
}

.my-nav a:hover {
    color: #bdf5ff8e;
}

.my-nav a:focus-within {
    color: #008397;
}


.my-nav-item {
    margin: 20px 10px 20px;
}

.hide-page-content {
    display: none;
}

.show-page-content {
    display: block;
    animation: showContent 0.5s ease-in;
}

@keyframes showContent {
    from {opacity: 0;}
    to {opacity: 1;}
}

.loading-bar {
    height: 50px;
    width: 0px;
    background-color: #81ecff;
}

.loading-bar-fill{
    width: 100%;
    transition: width 3s;
}

.abilities-logo {
    font-size: 5rem;
}

.my-skill-card {
    background-color: #7c7c7c44;
    color:#ffffffce;
    padding: 40px;
    border-radius: 1%;
    margin: 5px;
}

.bolded-text {
    font-weight: 700;
}

.section-background {
    background-color: #ffffff09;
}

.drop-shadow {
    box-shadow: 3px 3px 4px #000000;
}

.text-size {
    font-size: 1.5rem;
}

.contact-link {
    font-size: 3rem;
    color: #ffffffc4;
    margin:0 5px 0;
}