body {
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0px;
    background-color: hsl(0, 100%, 8%);
    background-image: url(https://www.wsws.org/asset/b8c228a1-eb96-4169-b29a-ed561a5cd57e?rendition=image1280);
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-position-x: center;
    background-position-y: center;
    background-size: 100%;
    color: #e6e6e6;
    padding-bottom: 400px;
}

nav {
    width: 100%; /* Se extinde pe toată lățimea paginii */
    position: sticky; /* Se fixează în partea de sus a viewport-ului */
    top: 0; /* Se aliniază la partea de sus a ecranului */
    left: 0; /* Se aliniază la partea stângă a ecranului */
    right: 0; /* Se aliniază la partea dreaptă a ecranului */
    display: flex; /* Utilizează Flexbox pentru a organiza elementele interne */
    justify-content: space-between; /* Distribuie spațiul între elementele copil egal, asigurându-se că sunt aliniate atât la început cât și la sfârșit */
    padding: 10px; /* Adaugă un spațiu interior de 20px pe toate laturile */
    box-sizing: border-box; /* Include padding-ul în calculul lățimii totale și înălțimii */
    background-color: #1f1f1f; /* Setează culoarea de fundal a navbar-ului */
    z-index: 1000; /* Asigură că navbar-ul va fi deasupra altor elemente de pe pagină */
    overflow: visible; /* Se asigură că elementele copil ale navbar-ului pot fi afișate chiar și dacă depășesc dimensiunile părintelui */
}

/* Stilizează titlul din navbar */
h1 {
    margin: 0; /* Elimină orice spațiu exterior implicit */
    color: rgb(239, 239, 239); /* Setează culoarea textului la alb */
    font-family:'Courier New', Courier, monospace
    font- 700; /* Face textul mai gros */
    font-size: 2em; /* Dublează dimensiunea fontului standard */
    flex-shrink: 0; /* Previne reducerea dimensiunii titlului când spațiul devine prea mic */
}

/* Stilizează lista neordonată folosită pentru link-urile din navbar */
ul {
    list-style: none; /* Elimină marcatorii de listă */
    padding: 0; /* Resetează padding-ul la 0 */
    margin: 0; /* Resetează marginile la 0 */
    display: flex; /* Dispune elementele listei orizontal */
    justify-content: center; /* Centrează elementele listei */
    align-items: center; /* Aliniază elementele listei vertical */
    flex-grow: 1; /* Permite listei să ocupe tot spațiul disponibil */
    gap: 60px; /* Creează un spațiu de 60px între elementele listei */
    font-size: larger; /* Mărește dimensiunea fontului */
}

/* Aplică stiluri link-urilor din lista neordonată */
ul li a {
    text-decoration: none; /* Elimină sublinierea link-urilor */
    color: rgb(218, 218, 218); /* Setează culoarea textului la alb */
    padding: 10px 20px; /* Adaugă padding pentru a mări zona clicabilă */
    position: relative; /* Permite poziționarea absolută a pseudo-elementelor (::after) în raport cu link-ul */
    font-family:'Courier New', Courier, monospace; /* Folosește fontul 'Bai Jamjuree' */
    font-weight: 700; /* Face textul mai gros */
}

/* Adaugă un efect vizual atunci când link-ul este survolat */
ul li a:hover::after {
    content: ''; /* Adaugă un pseudo-element fără conținut text */
    position: absolute; /* Poziționează pseudo-elementul în raport cu link-ul */
    width: 100%; /* Lățimea pseudo-elementului este egală cu cea a link-ului */
    height: 2px; /* Înălțimea pseudo-elementului este de 2px */
    background-color: white; /* Setează culoarea de fundal la alb */
    left: 0; /* Aliniază pseudo-elementul la partea stângă a link-ului */
    bottom: -5px; /* Poziționează pseudo-elementul puțin sub link */
}

/* Ajustează poziționarea listei în cadrul navbar-ului */
nav > ul {
    position: absolute; /* Poziționează lista în mod absolut */
    left: 50%; /* Centrul listei este aliniat la jumătatea părintelui */
    transform: translateX(-50%); /* Deplasează lista la stânga cu jumătate din propria lățime pentru a o centra efectiv */
    display: flex; /* Dispune elementele listei orizontal */
}

/* Stilizează zona de conținut principal */
.content {
    position: absolute; /* Poziționează conținutul în mod absolut */
    top: 60%; /* Deplasează conținutul în jos, la 60% din înălțimea părintelui */
    left: 50%; /* Centrul conținutului este aliniat la jumătatea lățimii părintelui */
    transform: translate(-50%, -50%); /* Centrarea efectivă a conținutului pe orizontală și verticală */
    text-align: center; /* Aliniază textul pe centru */
    color: white; /* Setează culoarea textului la alb */
    font-weight: 700; /* Face textul mai gros */
}

/* Stilizează titlul secundar din zona de conținut */
.content h2 {
    font-size: 4em; /* Mărește dimensiunea fontului */
    margin-bottom: 0.5em; /* Adaugă un spațiu sub titlu */
}

/* Stilizează câmpul de introducere a email-ului */
#email-input {
    font-size: 1.5em; /* Mărește dimensiunea fontului */
    padding: 10px; /* Adaugă padding interior */
    width: 70%; /* Setează lățimea câmpului la 70% din lățimea părintelui */
    max-width: 700px; /* Stabilește o lățime maximă */
    border: 2px solid white; /* Adaugă o bordură albă */
    background-color: rgb(228, 228, 228); /* Setează o culoare de fundal semi-transparentă */
    color: white; /* Setează culoarea textului la alb */
    margin-bottom: 20px; /* Adaugă un spațiu sub câmpul de input */
    border-radius: 20px; /* Rotunjește colțurile bordurii */
}

/* Stilizează placeholder-ul câmpului de input */
#email-input::placeholder {
    color: white; /* Setează culoarea textului placeholder-ului la alb */
}

/* Asigură că tot conținutul se încadrează fără a necesita derulare */
html, body {
    height: 100%; /* Setează înălțimea la 100% pentru a ocupa întregul ecran */
}

/* Stilizează paragrafele din zona de conținut derulabil */
.scrollable-content p {
    margin: 20px; /* Adaugă margini exterioare pentru a crea spațiu în jurul paragrafelor */
    font-size: 18px; /* Setează dimensiunea fontului */
    line-height: 1.6; /* Setează înălțimea liniei pentru a îmbunătăți lizibilitatea */
    color: white; /* Setează culoarea textului la alb */
}

/* Stilizează containerul pentru conținutul derulabil */
.scrollable-content {
    margin-top: 600px; /* Creează un spațiu mare în partea de sus, forțând derularea */
    font-weight: 700; /* Face textul mai gros */
}

/* Pregătește un container relativ poziționat pentru conținutul dropdown */
.dropdown {
    position: relative; /* Necesar pentru a poziționa conținutul dropdown în raport cu acesta */
}

/* Inițial ascunde conținutul dropdown și îl poziționează absolut */
.dropdown-content {
    display: none; /* Ascunde conținutul dropdown inițial */
    position: absolute; /* Poziționează conținutul dropdown în mod absolut */
    background-color: #2c2c2c; /* Fundal deschis pentru dropdown */
    min-width: 160px; /* Lățimea minimă a dropdown-ului */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Adaugă o umbră pentru a evidenția dropdown-ul */
    z-index: 10000; /* Asigură că dropdown-ul este deasupra altor elemente */
}

/* Stilizează link-urile din conținutul dropdown */
.dropdown-content a {
    color: rgb(219, 219, 219); /* Culoarea textului pentru link-uri */
    padding: 12px 16px; /* Padding pentru elementele dropdown */
    text-decoration: none; /* Înlătură sublinierea link-urilor */
    display: block; /* Face fiecare link să ocupe propriul rând */
}

/* Modifică fundalul link-urilor la survol */
.dropdown-content a:hover {
    background-color: #343434; /* Schimbă culoarea de fundal la survol */
}

/* Arată conținutul dropdown atunci când părintele este survolat */
.dropdown:hover .dropdown-content {
    display: block; /* Face conținutul dropdown vizibil la survol */
}

header h1 {
    margin: 0;
}

section {
    padding: 20px;
    margin: 20px;
    background-color: #00000089;
}

#skills ul {
    list-style-type: none;
    padding: 0;
}

#skills li {
    background-color: #000000;
    margin: 10px 0;
    padding: 10px;
}

footer {
    background-color: #000000;
    color: #8f8f8f;
    text-align: center;
    padding: 0px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

a {
    color: #07d118;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


#portfolio {
    
    flex-wrap: wrap;
    justify-content: space-around;
}

#portfolio a {
    background-color: #232323b0;
    border: 3px solid #000000;
    border-radius: 7px;
    color: #ffffff;
    display: block;
    margin: 10px;
    padding: 20px;
    text-align: center;
    width: calc(19% - 20px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.15s ease-in-out;
}

#portfolio a:hover {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.738);
    transform: translateX(20px);
}