@font-face {
    font-family: MyBold;
    src: url('./utils/font/NexaBold.otf');
}

@font-face {
    font-family: MyLight;
    src: url('./utils/font/NexaRegular.otf');
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* statt padding */
    margin: 0;
    background: #1F1F1F;
}

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* alles in der Mitte */
    justify-content: flex-start;
    /* oder center, wenn du alles vertikal zentrieren willst */
    width: 29.1875rem;
    height: 34.125rem;
    border-radius: 1rem;
    background: #232833;
    box-shadow: 0 4px 36.2px 18px rgba(0, 0, 0, 0.12);
}

div#main-headline {
    width: 29.1875rem;
    color: #FFF;
    text-align: center;
    font-family: MyBold;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 3rem;
}

div#usernamebox {
    display: flex;
    width: 24.1875rem;
    padding-top: 0.375rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.8125rem;
    margin-top: 5rem;
}

div#usernamelabel {
    color: #FFF;
    font-family: MyLight;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

input#usernameinput {
    background: rgba(30, 30, 30, 0.9) !important;
    outline: 0;
    border: 0;
    display: flex;
    width: 22.8rem;
    height: 0.8rem;
    padding: 1.0625rem 0.6875rem 1.0625rem 0.75rem;
    box-shadow: 0px 3.49342px 3.49342px rgba(0, 0, 0, 0.25);
    font-family: 'MyBold';
    color: #fff;
    font-size: 0.8rem;
}

div#passwordbox {
    display: flex;
    width: 24.1875rem;
    padding-top: 0.375rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.8125rem;
    margin-top: 1rem;
}

div#passwordlabel {
    color: #FFF;
    font-family: MyLight;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

input#passwordinput {
    background: rgba(30, 30, 30, 0.9) !important;
    outline: 0;
    border: 0;
    display: flex;
    width: 22.8rem;
    height: 0.8rem;
    padding: 1.0625rem 0.6875rem 1.0625rem 0.75rem;
    box-shadow: 0px 3.49342px 3.49342px rgba(0, 0, 0, 0.25);
    font-family: 'MyBold';
    color: #fff;
    font-size: 0.8rem;
}

div#action-btn {
    display: flex;
    width: 24.1875rem;
    height: 2.625rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(90deg, #5486D7 0%, #2C4671 100%);
    margin-top: 2rem;
    color: #FFF;
    text-align: center;
    font-family: 'MyBold';
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.2625rem;
}

#action-btn:hover {
    background: linear-gradient(90deg, #3b5f99 0%, #2C4671 100%);
    cursor: pointer;
}

#noaccount {
    color: #FFF;
    font-family: 'MyLight';
    font-size: 0.76rem;
    font-weight: 400;
    line-height: normal;
    width: 24.1875rem;
    margin-top: 1rem;
    text-align: left;
    /* optional, falls du alles zentriert willst */
}

#signup-link {
    color: #4A90E2;
    /* andere Farbe für "Sign up" */
    text-decoration: none;
    /* Unterstreichung entfernen */
    font-weight: 600;
    /* optional: etwas fetter machen */
    cursor: pointer;
    /* Mauszeiger als Hand */
}

#signup-link:hover {
    color: #6BB4FF;
    /* Hover-Farbe */
    text-decoration: underline;
    /* optional für klaren Hover-Effekt */
}