#index{
    width: 90%;
}

.logo-and-title-box{
    width: 100%;
    gap: 15px;
    text-transform:uppercase;
    margin-bottom: 20px;
}

.logo-box{
    width: 100%;
    aspect-ratio: 1/1;
    max-width: 300px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

.logo-animation-container{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    --fade: 10%;
    mask-image: linear-gradient(to bottom, black var(--fade), transparent calc(100% - var(--fade)));
}

@keyframes rotate{0%{rotate: 0;}70%{rotate: 360deg;}100%{rotate: 360deg;}}
.logo-text{
    opacity: .2;
    background: var(--pink-decorated-background);
    background: linear-gradient(to bottom,black,hsl(0, 0%, 75%));
    width: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    -webkit-mask-image: url(/assets/media/branding/um-icon-text_black-500.png);
    mask-image: url(/assets/media/branding/um-icon-text_black-500.png);
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    animation: rotate 40s linear infinite;
}

.title{
    font-size:20px!important;
    font-weight:900;
    display: inline-flex;
}
.title > i[class*='fa-']{
    font-size: 10px;
    display: none;
}


/* the code under this line is active when screen goes over the specified px dimension ----------------------------------------------------------------------------*/
@media only screen and (min-width: 600px){

    #index{
        width: 350px;
    }
}