@import "3L/3L.less";

@header: 32px;

@spacing: 12px;

html {
    width: 100%;
    height: 100%;
    .reset();
}


body.bank {
    width: 100%;
    height: 100%;
    font-family: arial;
    position: relative;
    //background:  linear-gradient(135deg, #fefcea 0%,#f1da36 100%); /* W3C */
    background: white;
    font-size: 24px;
    > nav  {
        left: 0px;
        top: @header;
        right: 70%;
        bottom: @spacing;
        position: absolute;
        .window();
    }
    > section {
        position: absolute;
        
        .window();
        left: 32%;
        right: 32%;
        &.main {
            top: @header;
            bottom: 45%;
        }
        &.account {
            top: 60%;
            bottom: @spacing;

        }
        
        &.control {
            top: @header;
            right: 0px;
            left: 70%;
        }
    }

}


button[data-pointed='true'] {
    box-shadow: inset 2px 2px 5px gray;
}


.window() {
    .border-radius(6px);
    border: 1px solid black;
    .box-shadow(4px 4px 12px 4px rgba(16,128,32,0.9));
    .gradient(rgba(232,255,128,0.8),rgba(64,255,32,0.9));
    overflow: auto;
    padding: 32px;

}

.debug() {
    outline: 2px dashed gray;
}


button {
    background: rgba(128,255,0, 1);
    font-size: 24px;
    color: rgba(255,255,255,1);
    text-shadow: 0px 0px 3px rgba(0, 32, 0, 0.9);
    .border-radius(12px);
}

input {
    font-size: 24px;
}