.login { width: 100%; height: 100vh; position: relative; font-family: numeralLight; &__options{ color: #B5B5B5; a { color: #84de56; } } img { // transform: rotate(-90deg); } .MuiButtonBase-root{ padding: 0px !important; } background: linear-gradient( 135deg, hsla(0, 0%, 31%, 1) 0%, hsla(0, 0%, 0%, 1) 100% ); background: -moz-linear-gradient( 135deg, hsla(0, 0%, 31%, 1) 0%, hsla(0, 0%, 0%, 1) 100% ); background: -webkit-linear-gradient( 135deg, hsla(0, 0%, 31%, 1) 0%, hsla(0, 0%, 0%, 1) 100% ); .footer { position: fixed; bottom: 0px; left: 0px; } } @media screen and (min-width: 1441px) { .login { section { width: 410px; b { color: white; font-size: 20px; margin-bottom: 30px; font-weight: 500; p { font-size: 16px; } } button { margin-top: 25px; background-color: #84de56; color: white; font-size: 20px; padding: 10px 0px; border: 0px; border-radius: 10px; } } &__info { width: 350px; margin: 40px auto 0px; text-align: center; color: white; font-size: 14px; a { color: #84de56; } } &__back { margin-bottom: 60px; img{ transform: rotate(-90deg); } a { color: white; font-size: 13px; } } &__options{ div{ font-size: 13px; } a{ font-size: 15px; } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 15px 14px !important; font-family: numeralLight; font-size: 20px; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0.5px); } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: 22px; padding: 0px !important; transform: translate(0px, 0px) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #2F2F2F; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: 16px; } .Mui-focused { color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .login { section { width: 350px; transform: scale(0.9); b { color: white; font-size: calc(100vw / 80); margin-bottom: 30px; font-weight: 500; } button { margin-top: 25px; background-color: #84de56; color: white; font-size: calc(100vw / 80); padding: 10px 0px; border: 0px; border-radius: 10px; } } &__info { width: 300px; margin: 40px auto 0px; text-align: center; color: white; font-size: calc(100vw / 110); a { color: #84de56; } } &__back { margin-bottom: 40px; img{ transform: rotate(-90deg); } a { color: white; font-size: calc(100vw / 110); } } &__options{ div{ font-size: calc(100vw / 110); } a{ font-size: calc(100vw / 110); } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 10px 14px !important; font-family: numeralLight; font-size: calc(100vw / 80); &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0px); z-index: 100; } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: calc(50%); padding: 0px !important; transform: translate(0px, -50%) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #2F2F2F; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: calc(100vw / 100); z-index: 110; } .Mui-focused { color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .login { background: black; .footer{ display: none !important; } section { // background-color: red; width: 90%; max-width: 700px; height: calc(100% - 60px); justify-content: center; b { color: white; font-size: calc(100vw / 30); margin-bottom: 30px; font-weight: 500; } button { background-color: #84de56; color: white; font-size: calc(100vw / 30); width : 100%; max-width: 400px; margin: 50px auto 0px; padding: 10px 0px; border: 0px; border-radius: 10px; } } &__info { width: 300px; margin: 40px auto 0px; text-align: center; color: white; font-size: calc(100vw / 40); a { color: #84de56; } } &__back { position: fixed; top: 100px; margin-bottom: 40px; left: 30px; a { color: white; font-size: calc(100vw / 110); } img{ width : 50px; } } &__options{ padding-top: 20px; div{ font-size: calc(100vw / 40); } a{ font-size: calc(100vw / 45); } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 10px 14px !important; font-family: numeralLight; font-size: calc(100vw / 30); background-color: #2A2A2A; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0px); z-index: 100; } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: calc(50%); padding: 0px !important; transform: translate(0px, -50%) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #2A2A2A; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: calc(100vw / 40); z-index: 110; } .Mui-focused { color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } } @media screen and (max-width: 640px) { .login { background: black; section { // background-color: red; width: 90%; max-width: 400px; height: calc(100% - 60px); // transform: scale(0.9); justify-content: center; // align-items: center; b { color: white; font-size: calc(100vw / 18); margin-bottom: 30px; font-weight: 500; } button { // position: absolute; // top: 100px; // left: 20px; margin-top: 25px; background-color: #84de56; color: white; font-size: calc(100vw / 25); padding: 10px 0px; border: 0px; border-radius: 10px; } } &__info { width: 300px; margin: 40px auto 0px; text-align: center; color: white; font-size: calc(100vw / 30); a { color: #84de56; } } &__back { position: fixed; top: 70px; left : 20px; margin-bottom: 40px; a { color: white; font-size: calc(100vw / 110); } img{ // transform: scale() } } &__options{ div{ font-size: calc(100vw / 30); } a{ font-size: calc(100vw / 30); } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 10px 14px !important; font-family: numeralLight; font-size: calc(100vw / 20); background-color: #2A2A2A; border-radius: 10px; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0px); z-index: 100; } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: calc(50%); padding: 0px !important; transform: translate(0px, -50%) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #2A2A2A; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: calc(100vw / 30); z-index: 110; } .Mui-focused { color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } }