/*BGDesign CSS Start*/

.container{
    position: relative;
}

#margin1{
    padding-top: 5vh;
    padding-bottom: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
}

#grad1{
    background-image: linear-gradient(#120599, #9109C5); 
    height: 100vh;
    width: 100vw;
    margin: 0;
}

#page1{
    height:90vh;
    width: 90vw;
    background-color: #FFFFFF;
    opacity: 0.15;
    border-radius: 40px;
    position: relative;
    z-index: 1;
}

#box1{
    height: 24.1vh;
    width: 22vw;
    left: 5vw;
    top: 5vh;
    background-color: #FFFFFF;
    opacity: 0.20;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 40px;
    position: fixed;
    z-index: 2;
}

#box2{
    height: 26vh;
    width: 11vw;
    top: 22vh;
    left: 5vw;
    background-color: #FFFFFF;
    opacity: 0.20;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    position: fixed;
    z-index: 3;
}

#box3{
    height: 41.6vh;
    width: 14.5vw;
    background-color: #FFFFFF;
    opacity: 0.20;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    position: fixed;
    bottom: 13vh;
    left: 45.9vw;
    z-index: 4;
}

#box4{
    height: 24.9vh;
    width: 19vw;
    background-color: #FFFFFF;
    opacity: 0.20;
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;
    position: fixed;
    bottom: 5vh;
    left: 29.2vw;
    z-index: 5;
}

#box5{
    background-color: #FFFFFF;
    opacity: 0.20;
    width: 45vw;
    height: 90vh;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    position: fixed;
    top: 5vh;
    right: 5vw;
    z-index: 6;
}

#box6{
    height: 27vh;
    width: 22vw;
    left: 5vw;
    top: 5vh;
    background-color: #FFFFFF;
    opacity: 0.20;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 40px;
    position: fixed;
    z-index: 2;
}

#box7{
    height: 29.3vh;
    width: 10vw;
    top: 23.8vh;
    left: 5vw;
    background-color: #FFFFFF;
    opacity: 0.20;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    position: fixed;
    z-index: 3;
}

#box8{
    height: 41.6vh;
    width: 14.5vw;
    background-color: #FFFFFF;
    opacity: 0.20;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    position: fixed;
    bottom: 13vh;
    right: 5vw;
    z-index: 4;
}

#box9{
    height: 14.7vh;
    width: 22.2vw;
    background-color: #FFFFFF;
    opacity: 0.20;
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;
    position: fixed;
    bottom: 5vh;
    right: 13vw;
    z-index: 5;
}

#logo1{
    position: fixed;
    top: 7vh;
    left: 7vw;
    z-index:9;
    cursor: pointer;
}
/*BGDesign CSS End*/




/*Content CSS Start*/

#infoBox{
    display: grid;
    align-content: center;
    background-color: #FFFFFF;
    width: 43vw;
    height: 86vh;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    position: fixed;
    top: 7vh;
    right: 7vw;
    z-index: 7;
}

#span1{
    display: flex;
    align-items: center;
    justify-content: center;
}

#header1{
    text-align: center;
    color: #9109C5;
    font-family: sans-serif;
    font-size: 4.2vh;
}

#underl1{
    border-bottom: 2.5px solid #9109C5;
    align-items: center;
}

#uname, #passwd, #email, #cpasswd{
    width: 28vw;
    height: 7vh;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    border-width: 0;
    font-family:sans-serif;
}

#uname:focus, #passwd:focus, #email:focus, #cpasswd:focus{
    outline: #FFFFFF;
}

#uname::placeholder, #passwd::placeholder, #email::placeholder, #cpasswd::placeholder{
    font-size: 2.24vh;
}

#unImg1{
    height: 1.96vh;
    width: 1.96vh;
}

#crtImg1{
    height: 0.98vh;
    width: 1.96vh;
}

#info1{
    color: #848387;
    font-size: 1.26vh;
    font-family: sans-serif;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;
}

#underl2{
    margin-right: 1vw;
    margin-left: 1vw;
    border-bottom: 3px solid #9109C5;
    align-items: center;
}

#fname, #lname{
    width: 14vw;
    height: 7vh;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    border-width: 0;
    font-family:sans-serif;
}

#fname:focus, #lname:focus{
    outline: #FFFFFF;
}

#fname::placeholder, #lname::placeholder{
    font-size: 1.96vh;
}


#elImg1{
    height: 1.68vh;
    width: 1.96vh;
}

#psImg1{
    height: 1.40vh;
    width: 1.96vh;
}



#cpImg1{
    height: 1.68vh;
    width: 1.96vh;
}

#btn1{
    box-sizing: content-box;
    display: flex;
    background-image: linear-gradient(to left, #120599,#9109C5);
    width: 28vw;
    border-radius: 18px;
    border-width: 0;
    color: #FFFFFF;
    align-items:center;
    justify-content:end;
    padding-top: 0.8vh;
    padding-bottom: 0.8vh;
}

#btnLbl1{
    font-size: 1.96vh;
}

#btImg1{
    height: 2.1vh;
    width: 1.4vh;
}

#lbl2{
    color: #848387;
    font-size: 1.96vh;
    font-family: sans-serif;
    margin-right: 4px;
}

#aref2{
    text-decoration: none;
    color: #9109C5;
    font-size: 1.96vh;
    font-family: sans-serif;
}



#wlcmBox{
    display: grid;
    align-content: center;
    width: 43vw;
    height: 86vh;
    position: fixed;
    top: 7vh;
    left: 7vw;
    z-index: 8;
}

#wlLbl1{
    color: #FFFFFF;
    font-size: 30px;
    font-family: sans-serif;
}

#viLbl1{
    color: #FFFFFF;
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bold;
}

#sgnLbl1{
    color: #FFFFFF;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: lighter;
}

#aref3{
    color: #FFFFFF;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: lighter;
}

#aref4{
    color: #FFFFFF;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: lighter;
}

#anLbl1{
    color: #FFFFFF;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: lighter;
    padding-left: 3px;
    padding-right: 3px;
}

#hr1{
    height: 2px;
    width: 12vw;
    background-color: #9109C5;
}

#pdTxt1{
    padding-left: 2vw;
    padding-right: 2vw;
    font-family: sans-serif;
    font-size: 1.96vh;
    color: #848387;
}

#aref1{
    text-decoration-line: none;
    color: #848387;
    font-family: sans-serif;
    font-size: 1.68vh;
}

#lbl1{
    color: #848387;
    font-size: 1.68vh;
    font-family: sans-serif;
}

#reMe1{
    color: #848387;
    height: 1.4vh;
    width: 1.4vh
}

#margin2{
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 5vh;
    padding-bottom: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
    z-index: 6;
}

#contentMain{
    display: grid;
    align-content: center;
    height:90vh;
    width: 90vw;
    top: 5vh;
    left: 5vw;
    border-radius: 40px;
    position: fixed;
    z-index: 7;
}

#content1{
    text-align: center;
    font-family: sans-serif;
    font-size: 36px;
    color: #FFFFFF;
}

#content2{
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 36px;
    color: #FFFFFF;
}

#button1{
    min-height: 4.8vh;
    background-color: #FFFFFF;
    width: 244px;
    text-align: center;
    font-family: sans-serif;
    font-size: 22px;
    font-weight: lighter;
    border: 1px;
    border-radius: 18px;
    border-color: #FFFFFF;
    box-shadow: 2px 2px 5px #600080;
    color:#9109C5;
    cursor: pointer;
}

#button2{
    min-height: 4.8vh;
    background-color: #FFFFFF;
    width: 430px;
    text-align: center;
    font-family: sans-serif;
    font-size: 22px;
    font-weight: lighter;
    border: 1px;
    border-radius: 18px;
    border-color: #FFFFFF;
    box-shadow: 2px 2px 5px #600080;
    color:#9109C5;
    cursor: pointer;
}
/*Content CSS End*/



@media (orientation: portrait) {
    #infoBox{
        background-color: #FFFFFF;
        width: 86vw;
        height: 86vh;
        border-radius: 40px;
        position: fixed;
        top: 7vh;
        right: 7vw;
        z-index: 7;
    }

    #uname{
        width: 56vw;
        height: 7vh;
        border-color: #FFFFFF;
        background-color: #FFFFFF;
        border-width: 0;
        font-family:sans-serif;
    }

    #fname{
        width: 28vw;
        height: 7vh;
        border-color: #FFFFFF;
        background-color: #FFFFFF;
        border-width: 0;
        font-family:sans-serif;
    }

    #lname{
        width: 28vw;
        height: 7vh;
        border-color: #FFFFFF;
        background-color: #FFFFFF;
        border-width: 0;
        font-family:sans-serif;
    }

    #email{
        width: 56vw;
        height: 7vh;
        border-color: #FFFFFF;
        background-color: #FFFFFF;
        border-width: 0;
        font-family:sans-serif;
    }

    #passwd{
        height: 7vh;
        width: 56vw;
        border-color: #FFFFFF;
        background-color: #FFFFFF;
        border-width: 0;
        font-family: sans-serif;
    }

    #cpasswd{
        height: 7vh;
        width: 56vw;
        border-color: #FFFFFF;
        background-color: #FFFFFF;
        border-width: 0;
        font-family: sans-serif;
    }

    #btn1{
        display: flex;
        background-image: linear-gradient(to left, #120599,#9109C5);
        height: 27px;
        width: 56vw;
        border-radius: 14px;
        border-width: 0;
        color: #FFFFFF;
        align-items:center;
        justify-content:end;
    }

    #hr1{
        height: 2px;
        width: 24vw;
        background-color: #9109C5;
    }

    #wlcmBox{
        opacity: 0;
        display: grid;
        align-content: center;
        width: 43vw;
        height: 86vh;
        position: fixed;
        top: 7vh;
        left: 7vw;
        z-index: 7;
    }

    #button1{
        min-height: 4.8vh;
        background-color: #FFFFFF;
        width: 244px;
        text-align: center;
        font-family: sans-serif;
        font-size: 30px;
        font-weight: lighter;
        border: 1px;
        border-radius: 18px;
        border-color: #FFFFFF;
        box-shadow: 2px 2px 5px #600080;
        color:#9109C5;
        cursor:pointer;
    }
    
    #button2{
        min-height: 4.8vh;
        background-color: #FFFFFF;
        width: 430px;
        text-align: center;
        font-family: sans-serif;
        font-size: 30px;
        font-weight: lighter;
        border: 1px;
        border-radius: 18px;
        border-color: #FFFFFF;
        box-shadow: 2px 2px 5px #600080;
        color:#9109C5;
        cursor:pointer;
    }


  }