body {
}

      /*px	vw
        
        1px = .052075 vw
        40px	2.083vw
        50px	2.604vw
        60px	3.125vw
        70px	3.646vw*/

        /*10px = 100vh*/

:root {
    --stdfont: calibri;
    --hgt: 97vh;
    --wdt: 100vh;
    --buttonfontsize: clamp(1rem, 0vw + 1rem, 3rem);
    --bordercolor: blue;
    --borderwidth: thin;
    --contentht: 80vh;
}

.maindiv {
    /*background-color: dodgerblue;*/
    /*background: linear-gradient(358deg,rgba(4, 6, 128, 1) 0%, rgba(87, 122, 199, 1) 50%, rgba(83, 191, 237, 1) 100%);*/
    height: var(--hgt);
    background-image: url('images/lrflat.PNG');
    background-size:auto;
    /*opacity: 0.6;*/
}

.maindiv-modal{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
}

.logindiv {
    height: var(--hgt);
    width: var(--wdt);
    display: flex;
    margin: auto;
    align-items: center;
}

.loginframe {
    display: flex;
    margin: auto;
    align-items: center;
    box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.75);
    border-radius: 9vh;
    height: 60vh;
    /*width: 100vw;*/
    background: linear-gradient(90deg,rgba(4, 6, 128, 1) 0%, rgba(87, 122, 199, 1) 50%, rgba(83, 191, 237, 1) 100%);
}

.loginbox {
    display: flex;
    margin: auto;
    height: 50vh;
    width: 90%;
    border-radius: 5vh;
    border: white solid thin;
    /*background-color: antiquewhite;*/
}

.logintext {
    display: block;
    margin: auto;
    font-size: 40px;
    font-family: var(--stdfont);
    font-weight: 600;
    color: white;
    text-shadow: #312d2d 3px 5px 2px;
    color: #FFFFFF;
    width: 100%;
}

.loginleft {
    width: 50%;
    display: grid;
    padding: 1.5vw;
    grid-gap: 2vw;
}

.loginlogo {
    height: 2vh;
    display: flex;
    grid-gap: 1vw;
    align-items: center;
    padding-top: 1vw;
}

.logocaption {
    width: 100%;
    height: 36vh;
    border-radius: 50%;
    box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.75);
}

.loginright {
    display: grid;
    width: 50%;
    margin: auto;
    grid-gap: 3vw;
}

.buttondiv {
    display: flex;
    grid-gap: 1vw;
    padding-top: 2vw;
    width: 100%;
}

.buttoncontainer {
    display: flex;
    grid-gap: 2vw;
    margin: auto;
}

.buttonprop {
    min-width: 75px;
    max-width: 8vw;
    width: 8vw;
    height: 4vh;
    font-family: var(--stdfont);
    font-weight: 600;
    border: solid thin;
    /*font-size: 21px;*/
    font-size: var(--buttonfontsize);
    border-radius: 15px;
    color: darkblue;
}

    .buttonprop:hover {
        color: white;
        background-color: darkblue;
    }

.textsize {
    font-family: var(--stdfont);
    font-size: 28px;
    font-weight: 600;
    width: 100%;
}

.inputdiv {
    border: solid thin white;
    width: 95%;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}