@font-face {
    font-family: 'jetbrains';
    src: url('/css/fonts/jetbrains-mono_5.1.1_cyrillic-100-normal.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    background-color: #e9d9be;
    color: #c0bdddff;
    margin: 0;
    padding: 0;
}

section {
    margin: 0;
    padding: 0;
}

/*.profile-card*/


.profile-card {
    background-color: #F5E8D0;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 400px;
    max-width: 400px;
    margin: 10px auto 0; /* Verringere den Abstand nach oben */
    text-align: center;
    overflow: hidden;
}

.profile-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

.profile-card div.small-white {
    color: white;
    font-size: 1em !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 2px;
    text-align: left;
}

.profile-card h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.profile-card p {
    font-size: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 12px;
}

.profile-card p.index {
    font-size: 1em !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 4px;
    text-align: left;
}

.profile-card p.index-big {
    font-size: 2em !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 0px;
    text-align: left;
}

.profile-card a {
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.profile-card a:hover {
    color: #c0bdddff;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.profile-card a.index {
    font-size: 1em !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 12px;
    text-align: left;
}

.profile-card a.index:hover {
    color: #c0bdddff;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}


/*.profile-card-wide*/

.profile-card-wide {
    background-color: #F5E8D0;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 10px auto 0; /* Verringere den Abstand nach oben */
    text-align: center;
}

.profile-card-wide img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

.profile-card-wide div.small-white {
    color: white;
    font-size: 1em !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 2px;
    text-align: left;
}

.profile-card-wide div.small-purple {
    color: #c0bdddff;
    font-size: 1em !important;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    margin-bottom: 2px;
    text-align: left;
}

.profile-card-wide div.small-dark-purple {
    /*font-family: 'jetbrains';*/
    color: #8674a8;
    font-size: 1em !important;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    margin-bottom: 2px;
    text-align: left;
}

.profile-card-wide h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.profile-card-wide p {
    font-size: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 12px;
    color: white;
}

.profile-card-wide p.index {
    font-size: 1em !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 12px;
    text-align: left;
}

.profile-card-wide p.index-big {
    font-size: 2em !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 0px;
    text-align: left;
}

.profile-card-wide a {
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.profile-card-wide a.shorten-links  {
    color: white;
    font-size: 1.25rem;
    font-weight: 100;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);  
}

.profile-card-wide a.index {
    font-size: 1em !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: 12px;
    text-align: left;
}

.profile-card-wide a.extract {
    color: #c0bdddff;
    font-size: 1em !important;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    font-weight: 100;
    margin-bottom: 12px;
    text-align: left;
}

.profile-card-wide a:hover {
    color: #c0bdddff;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.profile-card-wide a.shorten-links:hover {
    color: #c0bdddff;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.profile-card-wide a.extract:hover {
    color: #8674a8;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

/*.list-group-item*/

.list-group-item {
    font-size: 0.9em;
    line-height: 1.2em;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5em;
}

/*.social-icons*/

.social-icons {
    margin-bottom: 10px;
}

.social-icons a {
    margin: 0 10px;
    color: #333;
    font-size: 1.5rem;
}

.social-icons a:hover {
    color: #c0bdddff;
}

/*-btn-custom*/

.btn-custom {
    background-color: #c0bdddff;
    color: white !important; /* Sicherstellen, dass die Farbe weiß ist */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none; /* Entfernt die Unterstreichung */
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #c0bdddff;
    color: white !important; /* Sicherstellen, dass die Farbe beim Hover weiß bleibt */
}

.btn-custom a {
    color: white !important; /* Überschreibe die Standard-Linkfarbe innerhalb des Buttons */
    text-decoration: none; /* Keine Unterstreichung */
}

.btn-custom a:hover {
    color: white !important; /* Sicherstellen, dass auch beim Hover der Text weiß bleibt */
}

/*.custom-label*/

.custom-label {
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    color: white; /* Ersetze #ff0000 durch die gewünschte Farbe */
}

/*.custom-input*/

.custom-input {
    color: #8674a8;
}

.custom-input::placeholder {
    color: #c0bdddff;
}

/* Mozilla Firefox */
.custom-input::-moz-placeholder {
    color: #c0bdddff;
}

/* Internet Explorer 10+ */
.custom-input:-ms-input-placeholder {
    color: #c0bdddff;
}

/* Microsoft Edge */
.custom-input::-ms-input-placeholder {
    color: #c0bdddff;
}

/* WebKit-Browser (Chrome, Safari, Opera) */
.custom-input::-webkit-input-placeholder {
    color: #c0bdddff;
}

.custom-input:focus {
    color: #8674a8;
    opacity: 1;
}