body{
background: linear-gradient(155deg, #4b767c 0%, hsl(350, 44%, 33%) 100%);
    background-repeat: no-repeat;
    height: 100vh;
    width:100vw;
    
    overflow: hidden;
    position: sticky;
    
}
@media screen and (max-width: 601px){
#NeuralImage{
    position: absolute;
    overflow: hidden;
    overflow-x: hidden;
    background-image: url(/Smart-Menu/Images/neural\ network.png);
    height: 28.8vh;
    width: 79vw;
    transform: rotate(33deg);
    background-position: center;
    background-repeat: no-repeat;
    left: 40vw;
    top:-8vh;
    border-radius: 120px;
    background-size: 79vw 28.8vh;
}

#Angle{
    color: white;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    font-weight: 700;
    font-style: normal;
    font-family: "Inter", sans-serif;
    font-size: 7vh;
    position: absolute;
    margin-top: 18.1vh;
    margin-left: 6vw;
}

#SmartMenuText{
    position: absolute;
    margin-top: 25.5vh;
    margin-left: 6vw;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    font-size: 2vh;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    color: #bebebe;
}

#PhoneText{
    color: rgb(172, 171, 171);
    font-size: 2vh;
    overflow: visible;
    white-space: pre;
    letter-spacing: 0.1px;
    line-height: 1.2;
     font-weight: 300;
     font-family: "Rubik", sans-serif;
    position: absolute;
    top: 34vh;
    margin-left: 6vw;
}

#PasswordText{
    color: rgb(172, 171, 171);
    font-size: 2vh;
    overflow: visible;
    white-space: pre;
    letter-spacing: 0.1px;
    line-height: 1.2;   
     font-weight: 300;
     font-family: "Rubik", sans-serif;
    position: absolute;
    margin-top: 44.5vh;
    margin-left: 6vw;
}

#Panel{
    width: 88vw;
    height: 6vh;
    position: absolute;
    top: 36.5vh;
    margin-left: 6vw;
    margin-right: 6vw;
    box-shadow: 1px 1px 13px 0px rgba(0, 0, 0, 0.25);
    background-color: rgba(255, 255, 255, 0.3);
    overflow: visible;
    border-radius: 6px;
}

#Panel2{
    width: 88vw;
    height: 6vh;
    position: absolute;
    margin-top: 47vh;
    margin-left: 6vw;
    margin-right: 6vw;
    box-shadow: 1px 1px 13px 0px rgba(0, 0, 0, 0.25);
    background-color: rgba(255, 255, 255, 0.3);
    overflow: visible;
    border-radius: 6px;
}

#Icon{
    height: auto;
    width: auto;
    color: white;
    position: absolute;
    margin: 1vh;    
}

#IconVisibility{
    height: fit-content;
    width: fit-content;
    color: white;
    position: absolute;
    left: 90%;
    top:1vh
    
}

#IconVisibility:active{
    background-color: rgba(255, 255, 255, 0.11);
}

#Phone{
    position: absolute;
    background-color: transparent;
    border-style: none;
    margin-left: 10vw;
    width: 77.7vw;
    height: 6vh;
    outline: none;
    letter-spacing: 0.1px;
    color: white;
    font-family: "Rubik", sans-serif;
    vertical-align: middle;
    padding-left: 3vw;
    
}

#Password{
    position: absolute;
    background-color: transparent;
    border-style: none;
    margin-left: 10vw;
    width: 77.7vw;
    height: 6vh;
    outline: none;
    letter-spacing: 0.1px;
    color: white;
    font-family: "Rubik", sans-serif;
    vertical-align: middle;
    padding-left: 3vw;
    
}


input::placeholder{
    color: rgb(235, 235, 235);
    font-family: "Rubik", sans-serif;
    font-size: 2vh;
    letter-spacing: 0.5px;    
}



#Phone:focus-within{
    border-style: none;
}

#LoginButton{
    width: 88vw;
    height: 6vh;
    margin-left: 6vw;
    margin-right: 6vw;
    margin-top: 57vh;
    position: absolute;
    box-shadow: 1px 1px 13px 2px rgba(0, 0, 0, 0.25);
    overflow: visible;
    border-radius: 8px;
    background-color: rgba(0, 92, 230, 0.85);
    color: white;
    text-transform: uppercase;
    border-style: none;
    font-family: "Rubik", sans-serif;
    font-size: 3.5vw;
    font-weight: 500;
}

#LoginButton:active{
    background-color: rgba(0, 92, 230, 0.932);
    width: 90vw;   
    height: 6.2vh;
    position: absolute;
    margin-top: 57vh;
    margin-left: 5vw;
    margin-right: 5vw;
}

#ForgotText{
    position: absolute;
    margin-top: 65.3vh;
    width: 88vw;
    text-align: center;
    margin-left: 6vw;
    margin-right: 6vw;
    overflow: visible;
    white-space: pre;
    letter-spacing: 0.1px;
    line-height: 1.2;
    font-weight: 500;
    font-family: "Rubik", sans-serif;
    font-size: 1.75vh;
    text-decoration: underline;
    color: #041e64;
}

#ForgotText:active{
    
    color: #1900ff;
}
#ForgotText.Shake{
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }
#TextContainer{  
    display: flex;
    
    height: auto;
    top: 74vh;
    left: 19%;
    position: absolute;
    vertical-align: bottom;
    
}

#CreateAccountText{
    display: inline-block;
    color: white;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    font-size: 4vw;
    padding: 4px;
}

#SignUpButton{
    width: fit-content;
    height: fit-content;
    display: inline-block;
    color: #fff;
    background-color: transparent;
    border-style: none;
    padding-left: 1vw;
    font-weight: 700;
    font-family: "Rubik", sans-serif;
    font-size: 4.2vw;
    text-transform: uppercase;
    text-decoration: underline 4px rgba(255, 255, 255, 0.932);;
    
}

#SignUpButton:active{
  /*  text-decoration: underline 4px rgba(0, 92, 230, 0.932);*/
    background-color: rgba(255, 255, 255, 0.151);
}

#Info{
    position: absolute;
    overflow: hidden;
    line-height: 2.8vh;
    text-align: center;
    font-size: 4vw;
    padding:0 4vw ;
    letter-spacing: 0px;
    color: #c7c7c7;
    font-weight: 300;
    font-style: normal;
    top: 90vh;
    text-align: center;
    height: 5.6vh;
    font-family: "Roboto", sans-serif;
}
}
/***************************************************************
****************************************************************
***************************************************************
------------------LARGER DISPLAY-------------------------------
***************************************************************
**************************************************************
*************************************************************/

@media screen and (min-width: 601px){
    #NeuralImage{
     position: absolute;

        height: 100vh;
        width: 100vw;
        background-color: rgba(255, 255, 255, 0.012);
        filter: drop-shadow(2px);
        filter: blur(1px);
        filter: opacity(0.1);
        
    }

    #Angle{
        top: 2vh;
        width: inherit;
        color: white;
        height: 7vh;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #ffffff;
        font-weight: 700;
        font-style: normal;
        font-family: "Roboto", sans-serif;
        font-size: 7vh;
        position: absolute;
        left: 10vw;
        
    }

    
#SmartMenuText{
    position: absolute;
    width: inherit;
    top: 10vh;
    left: 10vw;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 2.5vh;
    font-weight: 700;
    font-family: "Rubik", sans-serif;
    color: #bebebe;
}

#ColumnDisplay{
    
    position: absolute;
    top: 20.5%;
    width: 60vw;
    height: 60vh;
    background-color: rgba(255, 254, 252, 0.192);
    box-shadow: 1px 1px 13px 2px rgba(0, 0, 0, 0.25);
    left: 20%;
    right: 20%;
}


#PhoneText{
    color: rgb(214, 214, 214);
    overflow: visible;
    letter-spacing: 0.1px;
    top: 19vh;
    left: 10vw;
    width: inherit;
     font-size: 2vh;
     font-weight: 300;
     font-family: "Rubik", sans-serif;
    position: absolute;
   
}

#PasswordText{
    color: rgb(214, 214, 214);
    overflow: visible;    
    letter-spacing: 0.1px;
    font-size: 2vh;
    top :29vh;
    left: 10vw;
    font-weight: 300;
    font-family: "Rubik", sans-serif;
    position: absolute;
    
}


#Panel{
    width: 40vw;
    height: 5.7vh;
    top:22vh;
    position: absolute;
    left: 10vw;
    right: 10vw;
    box-shadow: 1px 1px 13px 0px rgba(0, 0, 0, 0.25);
    background-color: rgba(255, 255, 255, 0.3);
    overflow: visible;
    border-radius: 6px;
}

#Panel2{
    width: 40vw;
    height: 5.7vh;
    position: absolute;
    margin-top: 31.7vh;
    left: 10vw;
    right: 10vw;
    box-shadow: 1px 1px 13px 0px rgba(0, 0, 0, 0.25);
    background-color: rgba(255, 255, 255, 0.3);
    overflow: visible;
    border-radius: 6px;
}

#Icon{
    height:1.5vw;
    width: 1.5vw;
    color: white;
    position: absolute;
    margin: 1vh;    

}

#IconVisibility{
    
    
    color: white;
    position: absolute;
    left: 100%;
    top:1.5vh
    
}

#IconVisibility:active{
    background-color: rgba(255, 255, 255, 0.11);
    position: absolute;
}

#Phone{
    position: absolute;
    background-color: transparent;
    border-style: none;
    margin-left: 5vw;
    width: 35vw;
    height: 5.7vh;
    font-family: "Rubik", sans-serif;
    color: white;
    vertical-align: middle;
    padding-left: 0.5vw;
    outline: none;
    
}

#Password{
    position: absolute;
    background-color: transparent;
    border-style: none;
    margin-left: 5vw;
    width: 35vw;
    outline: none;
    height: 5.7vh;
    font-family: "Rubik", sans-serif;
    color: white;
    vertical-align: middle;
    padding-left: 1vw;
    
}


input::placeholder{
    color: rgb(235, 235, 235);
    font-family: "Rubik", sans-serif;
    font-size: 2vh;
    letter-spacing: 0.5px;    
}


#Phone:focus-within{
    border-style: none;
}

#LoginButton{
    width: 40vw;
    height: 5.7vh;
    top:41vh;
    left: 10vw;
    right: 10vw;
    position: absolute;
    box-shadow: 1px 1px 13px 2px rgba(0, 0, 0, 0.25);
    overflow: visible;
    border-radius: 8px;
    background-color: rgba(0, 92, 230, 0.85);
    color: white;
    text-transform: uppercase;
    border-style: none;
    font-family: "Rubik", sans-serif;
    font-size: 2vh;
    font-weight: 500;
}

#LoginButton:active{
    background-color: rgb(0, 102, 255);  
}

#ForgotText{
    position: absolute;
    top: 48.3vh;
    width: 40vw;
    left: 10vw;
    right: 10vw;
    text-align: center;
    overflow: visible;
    white-space: pre;
    letter-spacing: 0.1px;
    font-weight: 500;
    font-family: "Rubik", sans-serif;
    font-size: 2vh;
    text-decoration: underline;
    color: #041e64;
}

#ForgotText:active{
    
    color: #1900ff;
    
}
#ForgotText.Shake{
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }

#TextContainer{  
    
    height: 8vh;
    top: 53vh;
    width: 60vw;
    position: absolute;
  
    
}

#CreateAccountText{
    position: absolute;
    color: white;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    font-size: 1.75vh;
    padding: 4px;
    width: 40vw;
    left: 10vw;
    right: 10vw;
    text-align: center;
}

#SignUpButton{     
    position: absolute;
    color: #fff;
    background-color: rgba(160, 14, 14, 0);
    border-style: none;
    font-weight: 700;
    font-family: "Rubik", sans-serif;
    font-size: 2vh;
    top: 3vh;
   left: 10vw;
    right: 10vw;
    width: 40vw;
    text-transform: uppercase;
    text-align: center;
    text-decoration: underline 3px rgba(255, 255, 255, 0.932);
    
}

#SignUpButton:active{
  /*  text-decoration: underline 4px rgba(0, 92, 230, 0.932);*/
    background-color: rgba(255, 255, 255, 0.151);
}

#Info{
    position: absolute;
    text-align: center;
    font-size: 2vh;  
    width: 100vw;
    letter-spacing: 0px;
    color: #c7c7c7;
    font-weight: 300;
    font-style: normal;
    top: 95vh;
    height: 5.6vh;
    font-family: "Roboto", sans-serif;
}

}
/***************************************************************
****************************************************************
***************************************************************
------------------MEDIUM DISPLAY-------------------------------
***************************************************************
**************************************************************
*************************************************************/