Siren

Layout CSS

/*==========================================================
                  SIREN - SUNMI
      Inspiré du MV : mer, lune, perles, reflets
==========================================================*/

body{
background-image:url("https://friendrewind.com/uploads/gallery/2339/img_6a59085b38d4e9.46778931.webp");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
background-color:rgb(18,28,48);
font-family:"Trebuchet MS",sans-serif;
color:rgb(220,240,245);
}

/* ------------------------------ */
/* CONTENEUR PRINCIPAL */
/* ------------------------------ */

.blog-entry{
background:rgba(20,35,55,0.78);
backdrop-filter:blur(12px);
padding:28px;
border-radius:25px;
border:2px solid rgb(110,210,235);
box-shadow:
0px 0px 18px rgba(100,220,255,0.40),
0px 0px 35px rgba(175,130,255,0.25);
}

/* ------------------------------ */
/* TITRE */
/* ------------------------------ */

.blog-entry .title{
font-family:Georgia,serif;
font-size:40px;
text-align:center;
font-weight:bold;
letter-spacing:4px;
color:rgb(165,240,255);
text-shadow:
0px 0px 10px rgb(110,220,255),
0px 0px 18px rgb(175,150,255),
2px 2px rgb(255,255,255);
margin-bottom:22px;
}

/* ------------------------------ */
/* CONTENU */
/* ------------------------------ */

.blog-entry .content{
background:rgba(35,55,80,0.82);
padding:22px;
border-radius:20px;
border:2px solid rgb(115,205,235);
color:rgb(225,240,250);
line-height:1.9;
}

/* ------------------------------ */
/* PARAGRAPHES */
/* ------------------------------ */

p{
font-size:15px;
color:rgb(225,238,248);
}

/* ------------------------------ */
/* LIENS */
/* ------------------------------ */

a{
color:rgb(120,235,255);
text-decoration:none;
font-weight:bold;
transition:0.4s;
}

a:hover{
color:rgb(255,225,180);
text-shadow:0px 0px 8px rgb(255,235,190);
}

/* ------------------------------ */
/* TITRES */
/* ------------------------------ */

h1{
color:rgb(165,240,255);
}

h2{
color:rgb(190,175,255);
}

h3{
color:rgb(255,230,190);
}

h4{
color:rgb(150,255,225);
}

/* ------------------------------ */
/* BOUTONS */
/* ------------------------------ */

button{
background:rgb(90,185,235);
color:rgb(255,255,255);
border:none;
border-radius:25px;
padding:11px 22px;
font-weight:bold;
transition:0.4s;
}

button:hover{
background:rgb(180,150,255);
box-shadow:0px 0px 12px rgb(170,220,255);
}

/* ------------------------------ */
/* CHAMPS DE TEXTE */
/* ------------------------------ */

input,
textarea{
background:rgb(35,55,80);
border:2px solid rgb(120,215,240);
border-radius:15px;
padding:10px;
color:rgb(240,245,255);
}

input:focus,
textarea:focus{
outline:none;
border-color:rgb(255,225,180);
box-shadow:0px 0px 12px rgb(255,220,180);
}

/* ------------------------------ */
/* BARRE DE DÉFILEMENT */
/* ------------------------------ */

::-webkit-scrollbar{
width:12px;
}

::-webkit-scrollbar-track{
background:rgb(18,28,48);
}

::-webkit-scrollbar-thumb{
background:rgb(95,190,230);
border-radius:25px;
}

::-webkit-scrollbar-thumb:hover{
background:rgb(175,145,255);
}

/* ------------------------------ */
/* SÉLECTION */
/* ------------------------------ */

::selection{
background:rgb(110,215,240);
color:rgb(20,30,45);
}

/* ------------------------------ */
/* TABLEAUX */
/* ------------------------------ */

table{
background:rgb(28,45,70);
border:2px solid rgb(110,205,235);
border-radius:15px;
}

td{
padding:8px;
color:rgb(225,240,250);
}

/* ------------------------------ */
/* LISTES */
/* ------------------------------ */

ul{
color:rgb(225,238,248);
}

li::marker{
color:rgb(120,220,255);
}

/* ------------------------------ */
/* CITATIONS */
/* ------------------------------ */

blockquote{
background:rgb(30,48,70);
border-left:5px solid rgb(110,220,245);
padding:15px;
border-radius:12px;
color:rgb(230,240,250);
}

/* ------------------------------ */
/* SURVOL */
/* ------------------------------ */

.blog-entry:hover{
box-shadow:
0px 0px 30px rgba(110,220,255,0.45),
0px 0px 45px rgba(180,150,255,0.35);
transition:0.5s;
}