/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
/* ==========================
   STYLE NARUTO
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family: "Segoe UI", Arial, sans-serif;

    background: linear-gradient(135deg,#ff9800,#ff5722,#212121);

    color:white;

    padding:40px;

    min-height:100vh;
}

/* Conteneur principal */

body{

    max-width:1000px;
    margin:auto;
}

/* Titre */

h1{

    text-align:center;

    font-size:50px;

    color:#FFD54F;

    text-shadow:4px 4px 10px black;

    margin-bottom:30px;

    animation: apparition 1s ease;
}

/* Paragraphes */

p{

    font-size:20px;

    line-height:1.8;

    margin:20px 0;
}

/* Liens */

a{

    color:#00E5FF;

    text-decoration:none;

    font-weight:bold;

    transition:0.3s;
}

a:hover{

    color:#FFD54F;

    text-decoration:underline;
}

/* Texte important */

strong{

    color:#FFD54F;
}

em{

    color:#81D4FA;
}

/* Image */

img{

    display:block;

    width:320px;

    margin:30px auto;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.6);

    transition:.4s;
}

img:hover{

    transform:scale(1.08) rotate(-3deg);

    box-shadow:0 15px 35px rgba(255,255,255,.3);
}

/* Liste */

ul{

    background:white;

    color:#333;

    padding:25px;

    border-radius:15px;

    width:320px;

    margin:auto;

    box-shadow:0 10px 20px rgba(0,0,0,.4);
}

li{

    margin:12px 0;

    font-size:20px;
}

/* Premier paragraphe */

p:first-of-type{

    background:rgba(255,255,255,.15);

    padding:15px;

    border-left:6px solid yellow;

    border-radius:10px;
}

/* Dernier paragraphe */

p:last-of-type{

    text-align:center;

    font-size:24px;

    margin-top:40px;

    background:#FFD54F;

    color:#222;

    padding:20px;

    border-radius:15px;

    font-weight:bold;
}

/* Animation */

@keyframes apparition{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Responsive */

@media(max-width:768px){

    body{

        padding:20px;
    }

    h1{

        font-size:36px;
    }

    p{

        font-size:18px;
    }

    img{

        width:250px;
    }

    ul{

        width:100%;
    }

/* ============================
   Section Mission
============================ */

ul{

    list-style:none;

    width:450px;

    margin:40px auto;

    padding:25px;

    background:rgba(255,255,255,0.95);

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.35);

}

li{

    padding:18px;

    margin:15px 0;

    background:#FFF7E6;

}
    border-left:8px solid #ff9800;

    border-radius:12px;

    font-size:22px;

    font-weight:600;

    color:#333;

    transition:.3s;

}

li::before{

    content:"🍥 ";

    font-size:24px;

}

li:hover{

    transform:translateX(12px);

    background:#FFE082;

    cursor:pointer;

}