body {
    background-color: #CCCCCC;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 20px;
}
.box {
    display: inline-block;
    width: 40%;
    height: 150px;
    margin: 20px;
    background-color: red;
}
.boxaudio {
    display: inline-block;
    width: auto;
    background-color: red;
}

audio {
    width: 150px;
    display: block;
    margin: 20px;
}

p {
    text-align: justify;
}


p#connaitre {
    background-color: black;
    text-align: end;
    color: white;
    border-radius: 10px;
    padding:15px;
}

 p#java {
     background-image: url('images/java.jpg');
     background-repeat: no-repeat;
     background-size:auto;
     background-color: black;
     text-align: end;
     color: white;
     border-radius: 10px;
     padding: 15px;
}
a:active {color: #FFFFFF; text-decoration: underline}
a:hover {color: #808080; text-decoration: underline}



.miniblanc {font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: #FFFFFF; font-weight: normal; line-height: 8px;}
.mini {font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: #000000; font-weight: normal; line-height: 8px;}
.mini:link {font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: #000000; text-decoration: none; font-weight: normal; line-height: 8px;}
.mini:visited {font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: #808080; text-decoration: none; font-weight: normal; line-height: 8px;}
.mini:active { font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: #FFFFFF; text-decoration: underline; font-weight: normal; line-height: 8px;}
.mini:hover {font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: #808080; text-decoration: underline; font-weight: normal; line-height: 8px;}