html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#main{
    width: 100%;
}

section{
    margin-left: 40px;
    flex-grow: 1;
    height: 100%;
}

.container{
    overflow-y: scroll;
    max-height: 100%;
}

.no-login{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: absolute;

    section{
        height: 300px;
        width: 300px;
        flex-grow: unset;
        margin: auto;
        box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.1),
                    -1px -1px 10px 0 rgba(0,0,0,0.1);
        position: relative;
        padding: 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
                
        &::before,&::after{
            content: '';
            display: block;
            position: absolute;
            max-width: 10vh;
            max-height: 10vh;
            width: 5vh;
            height: 5vh;
            background: transparent;
            border-style: solid;
            border-width: 2px;
            border-color: #b3219a;
            word-break: break-all;
            white-space: normal;
                
        }
                
        &::before{
            top: 0;
            left: 0;
            transform: translate(-7px,-7px);
            border-bottom-width: 0;
            border-right-width: 0;
        }
                
        &::after{
            bottom: 0;
            right: 0;
            transform: translate(7px,7px);
            border-top-width: 0;
            border-left-width: 0;
        }

        img {
            max-width: 25%;
            max-height: 25%;
            margin: 45px auto;
        }
        h3 {
            font-weight: 300;
            font-size: 17px;
            color: #b279fed4;
        }
    }
}