.album
{
    background-color: #151515 !important;
}

.card
{
    background-color: #101010;
    color: white;
}

body
{
    background-color: #101010;
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.white-text
{
    color: white;
}

.gray-text
{
    color: #a1a1a1 !important;
}

.my-button
{
    border-radius: 2rem !important;
    background-color: yellow !important;
    font-weight: 600;
    color: black !important;
}


.my-link
{
    color: yellow !important;
}

.featurette-divider
{
    border-image: linear-gradient(90deg, rgba(2,0,36,0) 10%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.1) 75%, rgba(0,212,255,0) 90%) 100% 1 !important;
    opacity: 0.65;
}

.featurette-image
{
    box-shadow: 0 0 10px 10px rgb(20, 20, 20);
    border: solid 0.1rem rgb(60,60,60);
    border-radius: 0.8rem;
}

.rightImage
{
    height: 300px;
}

.leftImage
{
    height: 300px;
}

.hobbiesList
{
    list-style-type: square;
}

.hobbiesInnerList
{
    list-style-type: circle;
}



#carouselExampleInterval
{
    height: 15rem;
}

a
{
    color: yellow;
    text-decoration: none;
}

a:hover
{
    color: orange;
}

.listOfLinks
{
    margin-top: -0.8rem;
    margin-bottom: 0.6rem;
}

.listOfLinks > li
{

    font-size: 1.25rem !important;
    font-weight: 300 !important;
}

.featurette
{
    text-align: justify;
}

.border-bottom
{
    border-bottom: 2px solid !important;
    border-image: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.1) 80%, rgba(0,212,255,0) 100%) 100% 1 !important;
}





/* MEDIA QUERIES */

@media (max-width: 490px)
{
    header > a
    {
        margin-left: 1rem;
        margin-bottom: 0rem !important;
        margin-right: 0rem;
    }

    header > a.mb-3
    {
        margin-bottom: 1rem !important;
    }

    header > ul
    {
        margin-left: 1rem;
    }
}

@media (max-width: 770px) and (min-width: 491px)
{
    .leftImage
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .rightImage
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .featurette-heading
    {
        margin-top: 1rem;
        text-align: center;
    }
    .listOfLinks > li
    {
        text-align: initial;
    }

    header > a
    {
        margin-left: 3rem;
        margin-bottom: 0rem !important;
        margin-right: 0rem;
    }

    header > a.mb-3
    {
        margin-bottom: 0rem !important;
    }

    header > ul
    {
        margin-left: 9rem !important;
    }
}

@media (min-width: 770px) {
    .rightImage
    {
        float: right;
    }
    .leftImage
    {
        float: left;
    }
}