@font-face {
font-family: IntegralCF_Heavy;
src: url('../fonts/IntegralCF_Heavy.otf') format("opentype");
}
@font-face {
font-family: PlayfairDisplay;
src: url('../fonts/PlayfairDisplay.otf') format("opentype");
}

@font-face {
font-family: IntegralCF_Regular;
src: url('../fonts/IntegralCF_Regular.otf') format("opentype");
}

a {
color: #fca311;
text-decoration: none;
}

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

* {
box-sizing: border-box;
}

#main_title:hover {
cursor: pointer;
user-select: none;
}

body {
font-family: Arial;
color: #ffffff;
margin: 0;
background: #8998B8;
}

.container {
padding-left: 100px;
padding-right: 100px;
padding-bottom: 120px;
padding-top: 20px;
}

.vert {
color: #fca311;
font-family: IntegralCF_Heavy;
letter-spacing: 2px;
}
.vert_petit {
color: #8998b8;
font-family: IntegralCF_Heavy;
letter-spacing: 2px;
font-size: 20px;
text-align: center;
}

.artiste {
color: #fca311;
font-family: IntegralCF_Heavy;
letter-spacing: 2px;
font-size: 23px;
}

.date {
color: #8998b8;
font-weight: bolder;
font-size: 15px;
}

p {
font-size: 24px;
font-style: italic;
text-align: center;
letter-spacing: 0.3px;
font-family: PlayfairDisplay;
}

.about-text {
font-size: 25px;
font-family: PlayfairDisplay;
color: #ffffff;
letter-spacing: 0.5px;

}

p .commentaire {
font-size: 20px;
font-style: normal;
}

.numero{
color: white;
font-family: IntegralCF_Regular;
font-size: 15px;
}

.lettre {
color: #8998b8;
font-weight: bolder;
font-size: 28px;
}
.centre {
color: #fca311;
font-family: IntegralCF_Heavy;
letter-spacing: 2px;
font-size: 40px;
text-align: center;
}

.menu {
color: white;
font-family: IntegralCF_Heavy;
letter-spacing: 2px;
padding: 1px;
font-size: 20px;
text-align: center;
background: #14213d;
margin-top:5px;
padding-left: 50px;
padding-right: 50px;
margin-bottom: 50px;
}

.menu:hover{
color: #8998b8;
}
.menu-bloc {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Header/Blog Title */
.header {
padding: 5px;
font-size: 40px;
text-align: center;
background: #14213d;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Add a card effect for articles */
.card {
background-color: #14213d;
padding: 20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.card-input {
background-color: #14213d;
padding: 10px;
margin-top: -45px;
margin-bottom: 50px;
}
#search-input {
background-color: #0e172c;
color: white;
border: none;
padding: 10px;
font-size: 20px;
}
.search-button {
background-color: #0e172c;
color: white;
border: none;
padding: 10px;
font-size: 20px;
font-weight: bold;
}
.search-button:hover {
  cursor: pointer;
}



/* width */
::-webkit-scrollbar {
width: 10px;
background : #8998B8;
}

/* Track */
::-webkit-scrollbar-track {
border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #14213d; 
border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #fca311; 
}