* {
    /*font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    font-family: 'Poppins','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
    font-weight: 300;
}
:root {
    width: 100%;
    height: 100dvh;
    background-color: rgb(39, 38, 38);
}
#_subtitle a { 
    text-decoration: none;
    color: rgb(218, 218, 218);
}

#_heading {
    text-transform: uppercase;
    text-decoration: underline solid rgb(202, 202, 202) 0.5px;
    text-underline-offset: 30%;
    
}
    
#_subheading {
    text-transform: capitalize;
}
#_subtitle {
    color: rgb(196, 195, 195);
    text-underline-offset: 20%;
    
}
#_paragraph {
    text-indent: 5px;
}

/* made to use on dark backgrounds */
.shadow-light,
.shadow-red-glow,
.shadow-green-glow,
.shadow-purple-glow,
.shadow-blue-glow,
.shadow-orange-glow,
.shadow-yellow-glow {
    transition: 0.4s;
}
.shadow-light:hover {
    box-shadow: 
        0 0 3px 0 rgb(104, 103, 103),
        0 0 8px 3px rgba(245, 245, 245, 0.847);
}
.shadow-red-glow:hover {
    box-shadow: 
        0 0 3px 0 rgb(104, 103, 103),
        0 0 8px 3px rgba(250, 15, 15, 0.707)
}
.shadow-green-glow:hover {
    box-shadow: 
        0 0 3px 0 rgb(104, 103, 103),
        0 0 8px 3px rgba(15, 250, 105, 0.707)
}
.shadow-purple-glow:hover {
    box-shadow: 
        0 0 3px 0 rgb(136, 135, 135),
        0 0 8px 3px rgb(122, 22, 254)
}
.shadow-blue-glow:hover {
    box-shadow: 
        0 0 3px 0 rgb(130, 128, 128),
        0 0 8px 3px rgb(15, 62, 250)
}
.shadow-orange-glow:hover {
    box-shadow: 
        0 0 3px 0 rgb(104, 103, 103),
        0 0 8px 3px rgba(250, 164, 15, 0.707)
}
.shadow-yellow-glow:hover {
    box-shadow: 
        0 0 3px 0 rgb(104, 103, 103),
        0 0 8px 3px rgba(250, 246, 15, 0.707)
}
/* end */
.shadow-inset:hover {
    box-shadow: 
        inset 0 0 4px 0 rgb(136, 135, 135);
}

.img-card-container {
    perspective: 700px;
    width: 100px;
    height: 100px;
    background-color: transparent;
   
}
.img-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    
}
.img-front,
.img-back {
    position: absolute;
    transform-style: preserve-3d;
    border: 3px solid black;
    border-radius: 20%;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 0.5rem;
    object-fit: contain;
}
.img-front {
    
    background-image: url('../pics/header-img.jpg');
}
.img-back {
    
    transform: rotateY(.5turn);
}

.img-container:hover .img-card {
    transform: rotateY(.5turn);
}