.isBastardTitleJourney
{
    position: absolute;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: wheat;
    font-family: "smartpeople";
    box-sizing: border-box;
    padding: 5px;
    padding-left: 10px;
    height: 100px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.isBastardTitleJourney p{
    font-size: 1.5rem;
}
.journey_desc{
    font-family: refbeverage;
}
.isJourneyContent
{
    position: relative;
    margin: auto;
    top: 105px;
    width: 99%;
    height: calc(99% - 105px);

    display: grid;
    grid-template-columns: 0.25fr 0.75fr;
    gap: 5px;

}

.jrn-information
{
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    min-width: 300px;
    /* transform: skewY(-1deg); */
}
.jrn-selections
{
    transform: rotateY(-20deg) skewY(2.5deg);
}

.jrn-information,
.jrn-selections
{
    position: relative;
    top: 0px;
    border: 3px outset rgba(192, 192, 192, 0.352);
    border-radius: 10px;
    background: linear-gradient(
        rgba(128, 128, 128, 0.2),
        rgba(192, 192, 192, 0.1),
        rgba(0, 0, 0, 0.1)
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.jrn-information
{
    border-width: 1px;
}
.jrn-information::-webkit-scrollbar
{
    background-color: rebeccapurple;
    width: 7px;
    border-radius: 5px;
    cursor: pointer;
}
.jrn-information::-webkit-scrollbar-thumb
{
    background-color: greenyellow;
    border-radius: 5px;
    cursor: grab;
}
.jrn-information:active::-webkit-scrollbar-thumb
{
    cursor: grabbing;
}

/***********************/
/* the hinge animation */
@keyframes doorhingeA
{
    from
    {
        top: 0px;
        transform: rotateY(-20deg) skewY(2.5deg);
    }
    to
    {
        top: -10px;
        transform: rotateY(20deg) skewY(-2.5deg);
    }
}
@keyframes doorhingeB
{
    from
    {
        top: 0px;
        transform: skewY(-1deg);
    }
    to
    {
        top: -10px;
        transform: skewY(1deg);
    }
}
.hingeA
{
    animation: doorhingeA 0.5s ease-in-out 1s 1 normal forwards;
}
.hingeB
{
    animation: doorhingeB 0.5s ease-in-out 1s 1 normal forwards;
}
/***********************/

.jrn-selections
{
    box-sizing: border-box;
    padding: 5px;
    padding-left: 15px;
}
.jrn-selections button
{
    margin-bottom: 10px;
    margin-right: 5px;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    border-color: transparent;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.5s ease;

}
.jrn-selections button div
{
    width: 100%;
    height: 100%;
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;

    -webkit-box-reflect: 
        below -30px 
        linear-gradient(#00000000 30%, #00000066 100%);
}

@media only screen and (max-width: 599.98px)
{
    .jrn-selections button
    {
        width: 70px;
        height: 70px;
    }
    .jrn-selections button div
    {
        -webkit-box-reflect: 
        below -20px 
        linear-gradient(#00000000 30%, #00000066 100%);
    }
}
#jrn-dash{
    background-image: url('/assets/images/journey/dashboard.png');
}
#jrn-game{
    background-image: url('/assets/images/journey/gamepad.png');
}
#jrn-study{
    background-image: url('/assets/images/journey/books.png');
}
#jrn-purchase{
    background-image: url('/assets/images/journey/credit1.png');
}
#jrn-faq{
    background-image: url('/assets/images/journey/magnify.png');
    background-size: contain;
}