:root {
    /*used by signup module*/
    --roundal-size-desktop: 160px;
    --roundal-size-mobile: 120px;

    --roundal-top-desktop:25px;
    --roundal-top-mobile:25px;

    --roundal-info-distance-desktop:30px;
    --roundal-info-distance-mobile:20px;

    --info-text-height-desktop: 30px;
    --info-text-width-desktop: 300px;

    --info-text-height-mobile: 20px;
    --info-text-width-mobile: 250px;

    --info-input-distance-desktop:25px;
    --info-input-distance-mobile:10px;

    --input-submit-distance-desktop:50px;
    --input-submit-distance-mobile:25px;

    /*login info*/
    --login-top-distance-desktop:100px;
    --login-top-distance-mobile:65px;

    --login-width-desktop:300px;
    --login-height-desktop:40px;

    --login-width-mobile:300px;
    --login-height-mobile:35px;

    --upload-did-login-distance-desktop:80px;
    --upload-did-login-distance-mobile:50px;
}

.login-panel {
    background-image: url("../../assets/hex_2.svg");
    position: relative
}

.roundal {
    background-image: url("../../assets/entry/login_link.svg");
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.top-info {
    background-image: url("../../assets/entry/name_your_did.svg");
    position: absolute;
    left:50%;
    transform: translateX(-50%);
}

.login-info {
    background-image: url("../../assets/entry/log_in.svg");
    position: absolute;
    left:50%;
    transform: translateX(-50%);
}

.upload-did-button{
    background-image:url("../../assets/entry/upload_did.svg");
    position: absolute;
    left:50%;
    transform: translateX(-50%);

    border-style:none;
    outline:none;
}

.login-text-input{
    position:absolute;
    width:60%;
    height:10%;

    left:50%;
    transform: translateX(-50%);

    font-size:90%;
    font-weight:bold;

    border-radius:40px;
    border-style:none;
    outline:none;

    background-color:rgba(0,0,0,0.5);
    color:white;

    padding:10px;

    box-shadow:-1px 1px 1px rgba(255,255,255,0.5);
}

.create-user-button{
    position:absolute;

    border-style:none;
    outline:none;

    background-image: url("../../assets/did_eclipse.png");
    left:50%;
    transform:translateX(-50%);
}

.back-button{
    position:absolute;
    top:100%;
    left:0%;

    transform:translate(0%,-50%);

    border-style:none;
    outline:none;

    background-image: url("../../assets/entry/brand_logo.svg");
}

/*for desktop*/
@media (min-width:600px) {
    .login-panel {
        height: var(--login-panel-size-desktop);
        width: var(--login-panel-size-desktop);
    }

    .roundal {
        top: var(--roundal-top-desktop);

        height: var(--roundal-size-desktop);
        width: var(--roundal-size-desktop);
    }

    .top-info {
        width: var(--info-text-width-desktop);
        height:var(--info-text-height-desktop);

        top: calc(var(--roundal-top-desktop) + var(--roundal-size-desktop) + var(--roundal-info-distance-desktop));
    }

    .login-info{
        width: var(--login-width-desktop);
        height:var(--login-height-desktop);

        top: var(--login-top-distance-desktop);
    }

    .login-text-input{
        top: calc(var(--roundal-top-desktop) + var(--roundal-size-desktop) + var(--roundal-info-distance-desktop) + var(--info-text-height-desktop) + var(--info-input-distance-desktop));
    }

    .upload-did-button{
        width:250px;
        height:250px;
        top: calc(var(--login-top-distance-desktop) + var(--upload-did-login-distance-desktop));
        cursor:pointer;
    }

    .create-user-button{
        width: 100px;
        height: 100px;
        top: calc(var(--roundal-top-desktop) + var(--roundal-size-desktop) + var(--roundal-info-distance-desktop) + var(--info-text-height-desktop) + var(--info-input-distance-desktop) + 10% +  var(--input-submit-distance-desktop));
    }

    .back-button{
        height:100px;
        width:100px;
    }
}

/*for mobile*/
@media (max-width:600px) {
    .login-panel {
        height: var(--login-panel-size-mobile);
        width: var(--login-panel-size-mobile);
    }

    .roundal {
        top: var(--roundal-top-mobile);
        height: var(--roundal-size-mobile);
        width: var(--roundal-size-mobile);
    }

    .top-info {
        width: var(--info-text-width-mobile);
        height:var(--info-text-height-mobile);
        top: calc(var(--roundal-top-mobile) + var(--roundal-size-mobile) + var(--roundal-info-distance-mobile));
    }

    .login-info{
        width: var(--login-width-mobile);
        height:var(--login-height-mobile);
        top: var(--login-top-distance-mobile);
    }

    .login-text-input{
        top: calc(var(--roundal-top-mobile) + var(--roundal-size-mobile) + var(--roundal-info-distance-mobile) + var(--info-text-height-mobile) + var(--info-input-distance-mobile));
    }

    .upload-did-button{
        width:180px;
        height:180px;
        top: calc(var(--login-top-distance-mobile) + var(--upload-did-login-distance-mobile));
        cursor:pointer;
    }

    .create-user-button{
        width: 70px;
        height: 70px;
        top: calc(var(--roundal-top-mobile) + var(--roundal-size-mobile) + var(--roundal-info-distance-mobile) + var(--info-text-height-mobile) + var(--info-input-distance-mobile) + 10% + var(--input-submit-distance-mobile));
    }

    .back-button{
        height:100px;
        width:100px;
    }
}