@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&display=swap');

html,body
{
    font-family: "Rubik", serif;
    font-style: normal;
    min-height: 100vh;

    & header {

        position: sticky;
        top: 0;
        background-color: white;
        z-index: 9999;
    }

    & main {

        & #main-section
        {

            position: relative;
            background: rgb(0,100,138);
            color: white;
            background: linear-gradient(160deg, rgba(0,100,138,1) 0%, rgba(66,42,89,1) 49%, rgba(91,76,124,1) 100%) !important;
            animation: main_bg 2s linear infinite;
            animation-direction: alternate;
            overflow: hidden;

            & .container
            {
                position: relative;
                overflow: hidden;
                min-height: 400px;
    
                & .row{
                    position: relative;
                    z-index: 2;
                }
            }

            & .main-section-icon-container{
                position: absolute;
                left: -10%;
                bottom: -10%;
                width: 50%;
                max-width: 600px;
                max-height: auto;
            }
            & .avatar-image-container{
                position: absolute;
                right: -10%;
                top: 10%;
                width: 50%;
                max-height: auto;

                & img{
                    max-width: 100%;
                }
            }
        }
    }
    

    & .login-page{
        background-color: #999;

        & main{
            z-index: 1;
            position: relative;

            & .login-container{
                background-color: white;
                box-shadow: 0 0 48px 24px rgba(0, 0, 0, 0.5);
    
                & h2,h3{
                    font-weight: 300;
                }
                & h2{
                    font-size: 24px;
                    color: rgb(54, 22, 87);
                }
                & h3{
                    font-size: 18px;
                }
            }

        }
        
        & .login-bg-container{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
    
            & .login-bg{
                position: absolute;
                background-color: black;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            
            & img{
                display: block;
                object-fit: cover;
                width: 100%;
                height: 100%;
            }

            @keyframes anim_fade_in {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
            @keyframes anim_fade_out {
                from {
                    opacity: 1;
                }
                to {
                    opacity: 0;
                }
            }
    
            & .sub{
                position: absolute;
                bottom: 12px;
                left: 12px;
                width: 100%;
                text-align: left;
                text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
                font-size: 18px;
                color: #fff;
                z-index: 1;
            }
        }
    }
}

@keyframes anim_fade_out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes anim_fade_in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes main_bg{
    0%{
        background: linear-gradient(0deg, rgba(0,100,138,1) 0%, rgba(66,42,89,1) 49%, rgba(91,76,124,1) 100%) !important;
    }
    50%{
        background: linear-gradient(160deg, rgba(0,100,138,1) 0%, rgba(66,42,89,1) 49%, rgba(91,76,124,1) 100%) !important;
    }
    100%%{
        background: linear-gradient(320deg, rgba(0,100,138,1) 0%, rgba(66,42,89,1) 49%, rgba(91,76,124,1) 100%) !important;
    }
}