body {
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
}

.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

a {
    text-decoration: none;
    display: block;
    color: rgb(70, 70, 70);
    border-radius: 10px;
    margin: 7px 5px;
    padding: 5px 10px;
    transition: 0.3s; /* transition */
}

a:hover {
    background-color: rgb(110, 190, 255);
}

pre {
    background-color: #282c34;
    color: #abb2bf;
    padding: 1.5rem;
    border-radius: 10px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
}

pre code {
    font-family: inherit;
}

li {
    margin: 5px 0px;
}




/* Les blog */

.blog {
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    background-color: rgb(225, 225, 225);
}


.example-1:hover {
    background-color: rgb(110, 190, 255);
}

.example-2 {
    transition: 0.5s;
}

.example-2:hover {
    background-color: rgb(110, 190, 255);
}

.example-3 {
    transition: 3s 1s;
}

.example-3:hover {
    background-color: rgb(110, 190, 255);
}

.example-4 {
    width: 500px;
    transition: background-color 5s steps(4, end),
                width 3s 2s linear,
                text-shadow 2s;
}

.example-4:hover {
    background-color: rgb(110, 190, 255);
    width: 1200px;
    text-shadow: 10px;
}

.example-5 {
    background-color: tan;
    transition: 3s;
}

.example-5:hover {
    background: teal;
    transition: .5s;
}

.obj1 {
    background-color: rgb(110, 190, 255);
    width: 200px;
    height: 50px;
    transition: 3s ease-out;
}

.obj2 {
    background-color: rgb(110, 190, 255);
    width: 200px;
    height: 50px;
    transition: 3s ease-in;
}

.obj3 {
    background-color: rgb(110, 190, 255);
    width: 200px;
    height: 50px;
    transition: 3s linear;
}

.obj4 {
    background-color: rgb(110, 190, 255);
    width: 200px;
    height: 50px;
    transition: 3s steps(4, end);
}

.obj1:hover, .obj2:hover, .obj3:hover, .obj4:hover {
    width: 1000px;
}

.transform {
    width: 200px;
    height: 50px;
    background-color: rgb(110, 190, 255);
    transform: rotate(10deg);
}



/* annimations */

main {
    margin: 25px;
}

#objet{
   width:100px;
   height:100px;
   background-color:rgba(238, 135, 0, 0.6);
   backdrop-filter: blur(5px);
   animation-name:monanimation;
   animation-duration: 1s;
}

@keyframes monanimation{
    0%{
        width:100px;
        height:100px;
        background-color:rgba(238, 135, 0, 0.6);
        backdrop-filter: blur(5px);
    }
    50%{
        width:100px;
        height:100px;
        background-color:rgba(0, 170, 0, 0.6);
        backdrop-filter: blur(5px);
        border-radius:100px;
        transform:rotate(180deg);
    }
    100%{
        width:100px;
        height:100px;
        background-color:rgba(238, 135, 0, 0.6);
        backdrop-filter: blur(5px);
        transform:rotate(180deg);
    }
}


#carre {
      width:100px;
      height:100px;
      background-color:rgba(238, 135, 0, 0.6);
      backdrop-filter: blur(5px);
      animation-name: monanimationtest;
      animation-iteration-count: 2;
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      animation-direction: normal;
}

@keyframes monanimationtest {
    0% {
        width:100px;
        height:100px;
        transform:translate(0,0) rotate(0);
        background-color:rgba(238, 135, 0, 0.6);
        backdrop-filter: blur(5px);
    }
    25% {
        width:100px;
        height:100px;
        transform:translate(100%,0) rotate(-90deg);
        background-color:rgba(0, 170, 0, 0.6);
        backdrop-filter: blur(5px);
    }
    50% {
        width:100px;
        height:100px;
        transform:translate(100%,100%) rotate(-180deg);
        background-color:rgba(255, 0, 255, 0.6);
        backdrop-filter: blur(5px);
    }
    75% {
        width:100px;
        height:100px;
        transform:translate(0,100%) rotate(-270deg);
        background-color:rgba(0, 0, 170, 0.6);
        backdrop-filter: blur(5px);
    }
    100% {
        width:100px;
        height:100px;
        transform:translate(0,0) rotate(-360deg);
        background-color:rgba(238, 135, 0, 0.6);
        backdrop-filter: blur(5px);
    }
}