/*
/Sélectionnez seulement les éléments qui ont les classes "title" ET "main-title" en même temps et donnez-leur un background "khaki"
/Sélectionnez seulement les h2 qui descendent directement d'un élément avec la classe ".content" et donnez-leur la couleur "red"
/Sélectionnez tous les éléments qui contiennent la classe "txt" et tous les éléments qui contiennent la classe "article-link" en même temps, et donnez-leur la couleur "darkcyan"
--Sélectionnez seulement le bouton qui contient la classe "modify-btn" et qui est directement précédé par le bouton contenant la classe "delete-btn" et donnez-lui un fond "hotpink"
/Sélectionnez les inputs qui contiennent l'attribut type="text" et donnez-leur un fond "slateblue"
/Changez la couleur de fond du formulaire en "lightblue" seulement quand un des enfants reçoit le focus
--sélectionnez le 4ème élément de la liste et donnez-lui un fond "seagreen"
--sélectionnez tous les li sauf le 5ème et donnez-leur un fond "midnightblue"
/Sélectionnez seulement les liens pointant vers des sites sécurisés(https) et donnez-leur un fond "plum"
/Donnez une couleur de fond "crimson" à la premiere ligne du dernier paragraphe et augmentez la taille de sa première lettre à 50px (Vous devez faire deux sélections )
*/

*,
::before,
::after {
    box-sizing: border-box;
    padding: 0;
}

body {
    background: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
    padding: 50px;
    color: #333;
}

h1 {
    margin-top: 0;
}

button {
    margin-top: 15px;
    padding: 10px 12px;
    cursor: pointer;
}

.label,
.input {
    display: block;
}

label {
    margin-bottom: 3px;
}

input {
    display: block;
    padding: 5px;
    min-width: 350px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid rgb(116, 116, 116);
}

ul {
    padding: 15px;
    font-size: 18px;
}

ul li {
    margin: 7px 0;
}

a {
    color: #333;
    font-size: 20px;
}



/* exercice */
.title, .main-title {
    background-color: khaki;
}

.content h2 {
    color:red
}

p, .article-link {
    color:darkcyan
}

/* a revoir*/
.btn:last-of-type {
    background-color:hotpink;
}

input[type=text] {
    background-color: slateblue;
}
  
form input:focus {
    background-color: lightblue;
}  
  

li:nth-child(-n+4){
    background-color:midnightblue
}

li:nth-child(4){
    background-color:seagreen
}

a[href^="https://"] {
    background-color: plum;
  } 

.final-txt::first-line {
    background-color: crimson;
}

.final-txt::first-letter {
    font-size: 50px
}