/* Rules for the complete table*/
table {
    border:1px solid;
    background:salmon;
    caption-side: bottom;
    border-radius: 10px;
    border-collapse: collapse; 
    box-shadow: 5px 5px 5px lightyellow;
}

/* Rules for the head of the table*/
table thead {
    color:white;
}

/* Rules for the cells of the head of the table*/
table thead tr th {
    text-align: center;
    border-width: 2px;
    border-color: white;
    border-style: solid;
    padding:5px;
}

/* Rules fot the first letter of each cells of the head of the table*/
table thead tr th::first-letter{
    color: lightsalmon;
}

/* Rules for each line of the body of the table*/
table tbody tr {
    background-color: lightsalmon;
}

/* Rules for the cells of the body of the table */
table tbody tr td {
    text-align: center;
    border-width: 2px;
    border-color: white;
    border-style: solid;
    padding:5px;
}

/* Rules for the 2nth lines of the body of the table*/
table tbody tr:nth-child(2n){
    background-color: lightyellow;
}

/* Rules for the first element of each lines of the body of the table*/
table tbody tr td:first-child{
    font-weight: bold;
}

/* Rules for the first letter of the first element of each lines of the body of the table*/
table tbody tr td:first-child::first-letter{
    color:red;
}

/* Rules for the second element of each lines of the body of the table*/
table tbody tr td:nth-child(2){
    font-style: italic;
}

/* Rules for just before the last child of each lines of the body of the table*/
table tbody tr td:last-child:before{
    content: "✆";
    margin: 2px;
}

caption {
    font-variant: small-caps;
    color: gray;
}


/*2nd table*/

#table_colored{
    border-collapse: collapse;
    border-spacing: 0;
}

#blue{
    width: 300px;
    height: 50px;
    background-color: blue;
    color:white;
}

#red{
    width: 100px;
    height: 200px;
    background-color: red;
    color:black;
}

#pink{
    width: 200px;
    height: 100px;
    background-color: pink;
    color:black;
}

#green{
    width: 100px;
    height: 50px;
    background-color: green;
    color:black;
}

#yellow{
    width: 100px;
    height: 50px;
    background-color: yellow;
    color:black;
}

#orange{
    width: 100px;
    height: 100px;
    background-color: orange;
    color:black;
}

#gray{
    width: 200px;
    height: 100px;
    background-color: gray;
    color:black;
}

#purple{
    width: 100px;
    height: 50px;
    background-color: purple;
    color:black;
}


/* Div that contains the Full Form */
#divForm{
    display: flex;
    justify-content: center;
}

/* Input part of the form*/
#divInput {
    border:1px solid black;
    border-radius: 10px;
    width: 500px;   
}

/* Submit part of the form*/
#divSubmit{
    display: flex;
    justify-content: center;
    margin:15px;
}
/* Rule for the button*/
button{
    background-color: skyblue;
    color:white;
    border-radius: 10px;
}

form fieldset{
    border: 0;
}

/* The following rules make sure that the input and textarea take % of the total width and apply lightgray color*/
form fieldset input {
    width: 100%;
    background-color: lightgray;
}
form fieldset textarea   {
    width: 100%;
    background-color: lightgray;
}
#range{
    width: 95%;
    background-color: lightgray; 
    outline: none;
    border-radius: 10px;
    appearance: none;
}

/* Rules for the cursor*/
#range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 10px;
}

/* To make sure that the p tag  before and after the range bar are in display inline mode*/
#minus{
    display:inline;
}
#plus{
    display: inline;
}

/* To apply a different color for the first letter*/
label {
    display: block;
}

form fieldset label::first-letter{
    font-size: 25px;
    color:blue;
}
/* To put (*) after the necessary label/input*/
label::after{
    content:" (*)";
    color:lightgray;
}
/* We don't want a necessary icon after the label "web site"*/
#site::after{
    content:" ";
}

/* Media queries */
@media screen and (min-width: 100px) and (max-width: 600px){
    /* Rule for the table*/
    table{
        width: 300px;
    }
    video{
        width: 300px;
    }
    img{
        width: 300px;
    }
    #divForm form{
        width: 300px;
    }
    #divForm #divInput{
        width: 300px;
    }

}