@font-face {
    font-family: 'Fibre Vintage';
    src: url('fibre-font.ott');
}

body {
    background-image: url("Bgrd.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

h1 {
font-family: 'Fibre Vintage', Arial, sans-serif;
text-align: center;
font-size: 90px;
color: rgb(37, 19, 19);
}

.btn-primary {
background-color: crimson;
}

h5 {
font-size: 70px;
color: rgb(0, 0, 0);
position: ;
}

.introtext {
font-family: 'Fibre Vintage', Arial, sans-serif;
text-align: center;
font-size: 20px;
color: rgb(0, 0, 0);
margin-bottom: 30px;
}

.intro {
margin-top: 50px;
}

.textintro {
    background-color: rgba(245, 245, 245, 0.274);
color: rgb(0, 0, 0);
font-size: 30px;
text-align: center;
}

.motdepasse {
    color: whitesmoke;
    text-align: center;
}

.formulaire {
margin-top: 100px;
}

.artist1 {
    background-image: url(https://www.leparisien.fr/resizer/1FdvpNuknOtj-vb5fBpdygohwFM=/932x582/cloudfront-eu-central-1.images.arcpublishing.com/leparisien/7TSXPL7XD6NIKLEAYIAVIOLQE4.jpg);
    height: 300px;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.artist1:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.artist2 {
    background-image: url(https://d3vhc53cl8e8km.cloudfront.net/artists/1054/ydBhPIjuTVVynFHuoM7fkKgR79cwJFXPHOWvucAY.jpeg);
    height: 300px;
    height: 300px;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.artist2:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.artist3 {
    background-image: url(https://epic-magazine.ch/wordpress/wp-content/uploads/2019/05/Photo2-1024x812.jpg);
    height: 300px;
    height: 300px;
    height: 300px;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.artist3:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.artist4 {
    background-image: url(https://www.lenouvelliste.ch/media/image/79/big_16_9/kt-gorique.jpg);
    height: 300px;
    height: 300px;
    height: 300px;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.artist4:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.artist5 {
    background-image: url(https://mx3.ch/pictures/mx3/file/0096/1742/original/m-s.jpg?1586747658);
    height: 300px;
    height: 300px;
    height: 300px;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.artist5:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.artist6 {
    background-image: url(https://d3vhc53cl8e8km.cloudfront.net/hello-staging/wp-content/uploads/2016/06/16182112/1KbTJDiRHVZtfPMylPyOPCJ0mzaxUtmAjYfg7RpS-972x597.jpeg);
    height: 300px;
    height: 300px;
    height: 300px;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.artist6:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.artist7 {
    background-image: url(https://cdn.unitycms.io/image/focus/1200,900,1000,1000,0,0,500,500/d0MbsXvohOE/EkQNp57Mqym8hotLZYFhC6.jpg);
    height: 300px;
    height: 300px;
    height: 300px;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.artist7:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.artist8 {
    background-image: url(https://www.baronbarone.com/favicon.ico);
    height: 300px;
    height: 300px;
    height: 300px;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.artist8:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.hover08 figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover08 figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.card-title {
    color: cornsilk;
}
.card-text {
    color: cornsilk;
}
  
h2 {
    color: rgb(0, 0, 0);
    margin-top: 50px;
    margin-bottom: -50px;
    text-align: center;
}

h4 {
    background-color: rgba(245, 245, 245, 0.274);
    text-align: center;
    font-size: 45px;
}