/* Stiluri generale pentru toate dispozitivele */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #333;  /* Fundal închis */
    color: #fff;  /* Text alb */
    text-align: center;
}

h2, h3 {
    font-size: 36px;  /* Dimensiune mare pentru titluri */
    color: #FF9800;  /* Culoare portocalie pentru titluri */
    margin-top: 20px;
}

p {
    font-size: 28px;  /* Text mare pentru paragrafe */
    color: #ccc;  /* Text gri deschis pentru paragrafe */
}

input[type="text"], button {
    font-size: 26px;  /* Text mare pentru inputuri și butoane */
    padding: 20px;
    margin: 10px;
    background-color: #555;  /* Fundal buton/input mai închis */
    color: #fff;  /* Text alb pe buton/input */
    border: 2px solid #888;  /* Contur ușor pe inputuri și butoane */
    border-radius: 5px;
}

input[type="text"]:focus, button:focus {
    outline: none;  /* Eliminăm conturul implicit la focus */
    border-color: #FF9800;  /* Contur galben la focus */
}

button {
    cursor: pointer;
    background-color: #FF5722;  /* Culoare roșu-portocaliu pentru buton */
}

button:hover {
    background-color: #FF3D00;  /* Schimbă culoarea la hover */
}

/* Stiluri pentru linkuri */
a {
    font-size: 24px;  /* Text mare pentru linkuri */
    color: #FF5722;  /* Culoare roșu-portocaliu pentru linkuri */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Stiluri specifice pentru smartphone (cu lățimi mai mici de 768px) */
@media (max-width: 768px) {
    body {
        font-size: 22px; /* Text adaptat pentru smartphone */
    }

    h2, h3 {
        font-size: 28px;  /* Titluri mai mici pentru smartphone */
    }

    p {
        font-size: 24px;  /* Text mai mare pe smartphone */
    }

    input[type="text"], button {
        font-size: 28px;  /* Text mare în formular */
        padding: 20px;
        width: 90%;  /* Lățime mai mare pe smartphone */
    }

    video {
        width: 100%;  /* Player video mare pe smartphone */
        height: auto;
    }
}

/* Stiluri specifice pentru desktop (cu lățimi mai mari de 768px) */
@media (min-width: 769px) {
    body {
        font-size: 24px; /* Text adaptat pentru desktop */
    }

    h2, h3 {
        font-size: 36px;  /* Titluri mari pentru desktop */
    }

    p {
        font-size: 28px;  /* Text mai mare pe desktop */
    }

    input[type="text"], button {
        font-size: 30px;  /* Text mare în formular */
        padding: 25px;
        width: 60%;  /* Lățime mai mică pentru desktop */
    }

    video {
        width: 800px;  /* Player video standard pe desktop */
        height: 600px;
    }
}