* {
  box-sizing: border-box;
}   

p {
        color:blueviolet    ;             
    }

h1 {
    margin-top: 10%;
    width : calc(80% - 40px);
    margin-left: calc(20px + 10%);
    margin-right: calc(20px + 10%);
    text-align: center;
    border: 2px inset red ;  
    background-color: crimson;
}
h1:hover{;
    text-shadow: 1px 0px 1px #FFFFFF, 0px 1px 1px #FFFFFF, -1px 0px 1px #FFFFFF, 0px -1px 1px #FFFFFF;
    color : #035956;
}

footer{
    /* On veut mettre un cadre coloré au titre. */
    border-color: #28c864;
    /* Par défaut, le cadre est invisible ; on le rend visible. */
    border-style:inset;
    margin-top: 5%;
}

header {
    /* On veut mettre un cadre coloré au titre. */
    border-color: #28c864;
    /* Par défaut, le cadre est invisible ; on le rend visible. */
    border-style:inset;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    /* On centre le texte dans le cadre. */
}
nav>ul>li{
    display: inline-block;
    float:right;
}
nav>ul{
    margin:0;
    padding:0;
}


nav>ul>li>p>a{
    border-radius: 0 0 20px 10px;
}

#page{
    background-color: #FAAC1B;
}


[href^="https"] {
    color : #0000FF;
}
[href*="@"] {
    color : #000000;
}
[href^="./"],[href^="../"]{
    color : #ffffff;
    border-color: #28c864;
    border-style:inset;
    background-color: #28c864;
    padding: 16px;
}

nav>ul>li>p{
    position:relative;
    margin-left: 2px;
}
nav>ul>li:hover .infobulle {
    display: inline-block;
}

.infobulle {
    color: #FFFFFF;
    display: none;
    background-color: #000000;
    position: absolute;
    padding: 10px;
    width: 200px;
    bottom:-330%;
    left: -200px;
    box-shadow: 1px 0px 1px #FFFFFF, 0px 1px 1px #FFFFFF, -1px 0px 1px #FFFFFF, 0px -1px 1px #FFFFFF;
    z-index: 1;
}


nav ul ul {
    display: none;
    background: #88905B;
    border-color: #28c864;
    border-style:inset;
    padding: 10px;
    position: absolute;
    border-radius: 10px 10px 10px 10px;
}


nav ul li:hover > ul {
    display: block;
}



[href^="./"]:hover,[href^="../"]:hover{
    background-color: #88905B;
    color : #f1f1f1;
    text-shadow: 1px 0px 1px #000000, 0px 1px 1px #000000, -1px 0px 1px #000000, 0px -1px 1px #000000;
}

blockquote{
    color: #000000;
    border-color: #000000;
    background-color: #f1f1f1; 
    border-style:inset;
    display: block;
}

blockquote::before{
    content: "\201C";
    color: #000000;
    font-size: 150%;
}

blockquote::after{
    content: "\201D";
    color: #000000;
    font-size: 150%;
}

main{
    width : 80%;
    min-width: 500px;
    max-width: 1000px;
    margin-left: 10%
}

h2{
    margin-top: 40px;
    border: 2px inset crimson ; 
    
}


pre {
    color: #000000;
    border-color: #000000;
    background-color: #f1f1f1; 
    border-style:inset;
}

#hover:hover{
    color : #f1f1f1;
    text-shadow: 1px 0px 1px #000000, 0px 1px 1px #000000, -1px 0px 1px #000000, 0px -1px 1px #000000;
}

.column {
  float: left;
  padding: 5px;
  width: 50%;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}

img{
    box-shadow: 2px 0px 1px #000000, 0px 2px 1px #000000, -2px 0px 1px #000000, 0px -2px 1px #000000,2px 2px 1px #000000,2px -2px 1px #000000,-2px 2px 1px #000000,-2px -2px 1px #000000;
    border-radius: 3%;
}



nav ul ul [href^="./"], nav ul ul [href^="../"]{
    background-color: #28c864;
    padding:inherit;
}



nav ul ul li {
    position: relative;
    list-style-type: none;
    text-align: left;
    padding: 5px;
    margin-left: 5px;

}

nav ul ul::after{
    border-radius: 10px 10px 10px 0px;
    
}