@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Special+Gothic+Condensed+One&display=swap');

* {
    font-family: "Special Gothic Condensed One";
    transition: 1s;
}

body {
    align-items: center;
    justify-content: center;
    display: flex;
    transform: scale(1.5);

}

.container {
    font-size: 20px;
    position: relative;
    margin-left: 10px;
}

.container input {
    border-width: 2;
    border-radius: 5px;
    border-style: solid;
    border-color: rgb(176, 176, 176);
    width: 200px;
}

.title {
    margin-top: 25px;
    line-height: 10px;
    margin-left: 10px;
}

#background {
    width: 700px;
    height: 380px;
    background-color:hsla(0,100%,50%,1);
    background-image:
    radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
}

#loginbutton {
    border-radius: 5px;
    background-color: #f5f9ff;
    outline-style: solid;
    outline-width: 0.7px;
    margin-left: 1;
    font-size: 20px;
    font-family:"Boldonse";
    transition: .5s;
    bottom: 40px;
}

#loginbutton:hover {
    cursor: pointer;
    background-color: #bdc2c9;
}

/* So i am going to take some fonts and glassmorphism
from google sorry! */

#glass {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.71);
    width: 300px;
    height: 320px;
    margin-top: 30px;
    margin-left: 350px;
    transition: 1s;
    position:relative;
}

#loginsuccesstext {
    color: white;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0.5px;
    transition: 1s;
    opacity: 0;
    margin-top: -35px;
}

#loggingintext {
    color: white;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0.5px;
    transition: 1s;
    opacity: 0;
    margin-top: -35px;
    z-index: 10;
}

#loginfailedtext {
    color: white;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0.5px;
    transition: 1s;
    opacity: 0;
    margin-top: -30;
}

#usernamepls, #passwordpls {
    color: red;
    transition: opacity 0.3s ease;
    margin-top: 5px;
    font-size: 14px;
    opacity: 0;
}

#spinner {
    opacity: 0;
    block-size: 20px;
    z-index: 11;
    margin-top: -21px;
    margin-left: 85px;
}