/* ========= FONTS ========= */
/*Regular*/
@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo2.0-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo2.0-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/*Bold*/
@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo2.0-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo2.0-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/*Medium*/
@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo2.0-Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo2.0-MediumItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/*Light*/
@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo2.0-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo2.0-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
/* ========= FONTS ========= */

body {
    color: white;
    background-color: #1f1f1f;
    font-family: 'Exo', sans-serif;
    font-weight: 400;
    word-spacing: 0.1cm;
}

button {
    color: aliceblue;
    background-color: #414141;
    border: none;

    padding: 1px 5px;

    font-family: 'Exo', sans-serif;
    font-weight: 300;
    font-style: normal;

    transition: background-color 0.3s ease;
}

.grey { color:grey;}
.red { color:rgb(214, 91, 91); }

.center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    min-height: 10vh;
    color: white;
}

.logo {
    max-width: 50%;
    height: auto;
    position: relative;
    
    left: 14%;
    transform: translateX(-100%);
}

.rosu {
    max-width: 17%;
    height: 17%;
}


.top-box {
  margin-bottom: 0px;
  justify-content: left;
  align-items: start;
}

.top-box-header {
  margin-bottom: 0px;
  align-items: start;
  background: #3a3a3a;
  display: flex;
  max-width: 540px;
  width: 100%;
}

.center-box {
    background-color: #2f2f2f;
    padding: 20px;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    width: 100%;
    color: white;
}