html{
    background-image: url(../static-media/bg-projects.jpg) !important ;
    overflow: hidden;
    font-family: 'Major Mono Display', monospace !important;
    color: rgb(255, 255, 255);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
}




/* NAV */

.fas:hover, .fab:hover{
    color: rgb(177, 47, 47);
    transition: ease-in-out 1s;

}

.links a li:hover{
    color: rgb(177, 47, 47);
    cursor: pointer;
}





/* Content */

.container{
    font-family: monospace;
    margin: 5rem 15rem;
}

h1{
    font-size: 5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.project{
    display: flex ;
    justify-content: center ;
    font-size: 1.5rem;
}

li a{
    color: rgb(255, 255, 255);
    transition: ease-in-out 1s;
}

li a:hover{
    color: rgb(180, 180, 180);
}

p{
    color: rgb(223, 223, 223);
    text-align: center;
    margin-bottom: 2.5rem;
}

.hidden{
    display: none;
}

.card{
    font-family: monospace;
    position: absolute;
    height: 30rem;
    width: 20rem;
    top: 1rem;
    left: 8.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5%;
    transition: ease-in-out 2s;
    box-shadow: -5px -5px 14px 2px rgba(209, 107, 107, 0.295),
    4px 4px 10px 2px rgba(68, 30, 30, 0.596);
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.055);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    /* tilt.js */
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.h2{
    font-size: 2.5rem;
    margin: 1rem 0;
    transform: translateZ(-50px);
}

img{
    width: 15rem;
    margin: 1em 0;
    border-radius: 5%;
    transform: translateZ(50px);
}

.card p{
    margin: 1.5rem 1rem;
    transform: translateZ(-50px);
}

.card a{
    color: rgb(255, 255, 255);
    transition: ease-in-out 1s;
}

.card a:hover{
    color: rgb(207, 115, 115);
}