* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     outline: none;
     user-select: none;
     scrollbar-width: none;
     cursor: default;
}

::selection {
     background-color: #9370db;
     color: #fff;
}

::-weibkit-scrollbar {
     display: none;
}

body {
     font-family: 'Google Sans Code', monospace;
     background-color: #333;
     color: #fff;
     display: flex;
     min-height: 100dvh;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}

#nameApp {
     position: fixed;
     bottom: 130px;
     left: -135px;
     transform: rotate(90deg);
     color: mediumpurple;
     text-shadow: 0 0 10px mediumslateblue, 0 0 20px mediumpurple, 0 0 30px mediumpurple;
}

.box-decoration-bottom {
     position: fixed;
     bottom: -100px;
     right: -100px;
     border-radius: 50%;
     width: 200px;
     height: 200px;
     background: linear-gradient(320deg, #6a5acd, #9370db, #8a2be2, #7b68ee, #6a5acd);
}

.box-decoration-top {
     position: fixed;
     top: -100px;
     left: -100px;
     border-radius: 50%;
     width: 200px;
     height: 200px;
     background: linear-gradient(320deg, #6a5acd, #9370db, #8a2be2, #7b68ee, #6a5acd);
}

main {
     padding: 15px;
     background-color: transparent;
     border-radius: 10px;
     width: 90%;
}

section {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     padding: 20px;
     border-radius: 10px;
}

.toggle-mode {
     font-size: 14px;
     margin: 0;
     padding: 0 !important;
     line-height: 1.4;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
     width: 100%;
     padding: 10px;
     margin: 0 0 4px 0;
     border: 1px solid mediumpurple;
     border-radius: 5px;
     background-color: #444;
     color: #fff;
     font-size: 1em;
}

input::placeholder {
     color: #bbb;
     opacity: 0.8;
}

input:focus {
     border-color: #9370db;
     box-shadow: 0 0 5px #9370db;
}

button {
     padding: 12px 20px;
     border: none;
     border-radius: 5px;
     background-color: #9370db;
     color: #fff;
     font-size: 1em;
     cursor: default;
     transition: all 0.06s ease-in;
}

button:active {
     transform: scale(0.9);
}

.close {
     position: absolute;
     top: 10px;
     right: 10px;
     background-color: red;
     color: #fff;
     font-size: 1.5em;
     cursor: default;
     width: 40px;
     height: 40px;
     z-index: 1000;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     transition: all 0.06s ease-in;
}

.close:active {
     transform: scale(0.9);
}

.linkUp {
     color: #9370db;
     cursor: default;
     transition: all 0.06s ease-in;
}

.linkUp:active {
     text-decoration: underline;
}






/*Temporal*/

section.log-up {
     display: none;
}