@font-face {
  font-family: A DAY WITHOUT SUN;
  src: url("A DAY WITHOUT SUN.otf");
}

@font-face {
  font-family: the Gallery;
  src: url("the Gallery.otf");
}
@font-face {
  font-family: Dosis;
  src: url("Dosis-Regular.ttf");
}
br {
background-image: url("br.png")
}

#vert {
	height:30px;
	background-color: #58c600;
}

h4  {
    font-family: 'Dosis', sans-serif;
	font-size: 30px;
	background-color: #58c600;
	color: white;
}
h2 {
	font-family: A DAY WITHOUT SUN;
	margin-bottom: -1rem;
}
#placard {
	font-family: the Gallery;
	color: #004e7b;
	margin: -1rem;
}
#date, #heure {
	font-family: the Gallery;
	color: #004e7b;
	margin: 0.1rem;
}

@media (max-width: 414px){
  h2 {
    font-size: 2.8rem;
    }
}
@media (min-width: 768px){
h2 {
	font-size: 50px;
}
}
@media (max-width: 414px){
  #date {
    font-size: 4rem;
    }
}
@media (min-width: 768px){
#date {
	font-size: 150px;
}
}
@media (min-width: 768px){
#heure {
	font-size: 100px;
}
}
@media (max-width: 414px){
  #heure {
    font-size: 3rem;
    }
}
@media (min-width: 768px){
h5 {
	font-size: 70px;
}
}
@media (max-width: 414px){
  h5 {
    font-size: 2.5rem;
    }
}
#textplayer {
	font-size: 70px;
}
}
@media (max-width: 414px){
  #textplayer {
    font-size: 2.5rem;
    }
}
@media (max-width: 414px){
  #placard {
    font-size: 5rem;
    }
}
@media (min-width: 768px){
#placard {
	font-size: 100px;
  }
}
#titre, #photo, #dateheure {
	background-color: transparent;
}
h5 {
	font-family: the Gallery;
}
#live, #qui {
	font-family: the Gallery;
	color: #58c600;
	margin-bottom: -1rem;
}
@media (max-width: 414px){
  #live, #qui {
    font-size: 4rem;
    }
}
@media (min-width: 768px){
#live, #qui {
	font-size: 100px;
  }
}
#qui {
	margin-top: 2rem
}
p {
	font-family: Dosis;
}
#textplayer {
	color: white;
	font-family: the Gallery;
	margin: 5rem;
}
#espaces {
	height:700px;
}