body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(45deg, #ee7752, #e73c7e, #19789b, #24dbb1);
    background-size: 600% 600%;
    animation: gradient 8s ease infinite;
    color: rgb(224, 212, 212);
    
}

h1 {
    color: rgb(25, 25, 151);
    text-align: center;
    text-decoration: underline;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h2 {
    font-size: xx-large;
    text-decoration: underline;
}

h2>a
{
    text-decoration: none;
    color: rgb(224, 212, 212);
}

ul
{
    max-width: 60%;
    display: block;
}

li
{
    margin-bottom: 2em;
}
ol
{
    margin-bottom: 200px;
}


@keyframes gradient { /* Dégradé animé */
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

main {
    font-size: larger;
    
}

footer {
    font-size: medium;
}

blockquote {
    font-style: italic;
}

blockquote>p::before {
    content: '"';
    color:blue;
}
blockquote>p::after {
    content: '"';
    color:blue;
}

blockquote>p {
    background: purple;
}

#photo
{
    position: relative;
    float: right;
    bottom: 550px;
    text-align: center;
}

.chien {
    width: 400px;
    height: 300px;
    border: 2px solid black;
    right: 300px;
    bottom: 500px;
}
.legende
{
    border-radius: 3%;
    background-color: #7f7fce;
    color: #ececec;
    width: 150px;
    border:2px solid #424276;
    text-align: center;
    position: relative;
    align-items: center;
}



cite {
    font-size: larger;
}

p {
    font-size: larger;
}

@media screen and (max-width:1200px) { /* Affichage TD1 pour les supports verticals  */
    #photo
    {
        float:none;
    }
    .chien
    {
        width: 400px;
        height: 300px;
        position: relative;
        top: 400px;

    }
    .legende
    {
        width: 150px;
        position: relative;
        top: 400px;
        left: 250px;
    }
    li
    {
        max-width: 700px;
        font-size: large
    }

    footer{
        position:relative;
        top: 200px;}
}

@media screen and (max-width:700px) { /* Affichage TD1 pour les supports verticals  */
    #photo
    {
        float:none;
        position: relative;
        right: 220px;
    }
    .chien
    {
        width: 250px;
        height: 200px;
        position: relative;
        top: 400px;
        left: 200px;

    }
    .legende
    {
        width: 150px;
    }
    li
    {
        max-width: 700px;
        font-size: large
    }

    footer{
        position:relative;
        top: 200px;}
}       



/*
#######################################################################################
#                                   Page à propos                                     #
####################################################################################### 
*/

.top {
    text-align: center;
}

#phantom
{
    padding:5px;
    width: 150px;
    box-shadow:10px 10px 80px black;
    background-color: #770c0c;
    border-radius: 100%;
    align-items: center;
}

.tooltip
{
    display: none;
    position: relative;
    text-align: center;
    padding:8px;
    border-radius: 10%;
    background-color: #a00300;
    color: white;
    width: 100px;
    border:4px solid #770c0c;
    top: 150px;
    right: 450px;
    align-items: center;
}

#phantom:hover +.tooltip
{
    display: inline-block;
    position: fixed;  
}


#main, #main li {font-size: x-large;} /* Liste a propos de moi*/


/* Affichage page a propos pour smartphone  */

@media screen and (max-width:600px) {
        span{left: 72%;}
        #main,#main li{font-size: xx-large;}
    }