:root
{

    --mobile-device-width:         440px;
    --desktop-device-width:        1280px;
    --color-palette-raspberry:     #941C4A;
    --color-palette-prussian-blue: #152238;
    --color-palette-white-smoke:   #F5F5F5;
    --color-pallete-gray:          #7A7A7A;
    --default-border-radius:       1.2rem;
    --font-size-navigation:        0.7rem;
    --golden-ratio:                1.61803398875;
    --backdrop-opacity:            60%;

    --display-large-desktop:       189.80px;
    --display-medium-desktop:      118.49px;
    --display-small-desktop:       73.97px;
    --headline-desktop:            46.18px;
    --title-desktop:               25.63px;

    --display-large-mobile:        58.45px;
    --display-medium-mobile:       46.18px;
    --display-small-mobile:        36.49px;
    --headline-mobile:             28.83px;
    --title-mobile:                22.78px;

    --display-large:               var(--display-large-mobile);
    --display-medium:              var(--display-medium-mobile);
    --display-small:               var(--display-small-mobile);
    --headline:                    var(--headline-mobile);
    --title:                       var(--title-mobile);
    --body:                        16px;
    --label:                       12.64px;

    --padding_0:                   4px;
    --padding_1:                   8px;
    --padding_2:                   16px;
    --padding_3:                   32px;
}

*, *:before, *:after
{
    scroll-behavior: smooth !important;
    scrollbar-width: none;
    box-sizing:      inherit;
    user-select:     none;

}

html
{
    scroll-behavior: smooth !important;

    box-sizing:      border-box;
    margin:          0;
    padding:         0;

    font-family:     "Montserrat", sans-serif, "Arial";
    font-weight:     normal;

    min-width:       320px;
    overflow:        clip;
}

img
{
    width: 320px;
    height: 320px;

}
body
{
    padding:         var(--padding_2);
    height:          100vh;
    display:         flex;
    flex-direction:  column;
    justify-content: space-around;
    align-items:     center;
    margin:          0;

    gap:             4rem;
    color:           #EBEBEB;
    font-size:       var(--body);
    font-family:     "Montserrat", Courier, serif;

}

.hidden
{
    display: none;
}

a
{
    color:           var(--color-palette-white-smoke);
    text-decoration: none;

}

a:visited
{
    color:           var(--color-palette-white-smoke);
    text-decoration: none;
}

.info_container
{
    justify-content: center;
    gap:             1rem;
    align-items:     center;

    display:         flex;
    flex-direction:  row;

    width:           100%;
    height:          100%;
}

.info
{

    display:         flex;
    flex-direction:  row;

    height:          100%;
    width:           100%;
    min-height:      0;
    min-width:       0;
    justify-content: center;
    gap:             1rem;
    align-items:     center;

    text-wrap:       nowrap;
    text-align:      center;
    color:           var(--color-palette-prussian-blue);
    font-size:       var(--display-small);
}

.sub_info
{
    display:         flex;
    flex-direction:  row;

    height:          100%;
    width:           100%;
    justify-content: flex-end;
    gap:             1rem;
    align-items:     center;

    text-wrap:       nowrap;
    text-align:      center;
    color:           var(--color-palette-prussian-blue);
    font-size:       var(--display-small);
}

.inline
{
    /*display: inline;*/
}

.raspberry
{
    color: var(--color-palette-raspberry);
}

.spinny-wrapper
{
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    position:        relative;
    height:          100%;
    width:           100%;
}

.spinny-words
{
    min-width:  350px;
    width:      100%;
    height:     100%;
    min-height: 0;

}

.spinny-words span
{
    position:        absolute;
    display:         flex;
    flex-direction:  column;
    text-align:      left;
    justify-content: center;
    color:           #941C4A;
    overflow-wrap:   anywhere;
    word-break:      normal;
    opacity:         0;
    width:           100%;
    height:          100%;
    animation:       rotateWord 10s linear infinite 0s;
}

.spinny-words span:nth-child(2)
{
    animation-delay: 2s;
}

.spinny-words span:nth-child(3)
{
    animation-delay: 4s;
}

.spinny-words span:nth-child(4)
{
    animation-delay: 6s;
}

.spinny-words span:nth-child(5)
{
    animation-delay: 8s;
}

@keyframes rotateWord
{
    0%
    {
        opacity: 0;
    }
    2%
    {
        opacity:   0;
        transform: translateY(-30px);
    }
    5%
    {
        opacity:   1;
        transform: translateY(0px);
    }
    17%
    {
        opacity:   1;
        transform: translateY(0px);
    }
    20%
    {
        opacity:   0;
        transform: translateY(30px);
    }
    80%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 0;
    }
}

@media screen and (width < 1280px)
{
    .info
    {
        flex-direction: column;
    }

    .sub_info
    {
        justify-content: center;
    }

    .spinny-words span
    {

        text-align: center;
    }

}