/* style.css */

@font-face {
    font-family: 'Rubik Bubbles';
    font-style: normal;
    font-weight: 400;
    src: local('Rubik Bubbles'), local('RubikBubbles-Regular'),
       url('style/Rubik_Bubbles/RubikBubbles-Regular.ttf') format('ttf'),
  }
  
  /* Votre autre code CSS va ici */
  
body,a{
    background-color: dodgerblue;
    font-size: large;
    font-family: 'Rubik Bubbles', sans-serif;
    color:yellow;
    text-shadow:1em;
    
}
body{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}
#lien_playlist {
    width: 75vw; /* Utilisation de 50% de la largeur de l'écran, ajustez selon vos besoins */
    max-width: 600px; /* Limite la largeur maximale à 600 pixels */
    background-color: dodgerblue;
    border: 1px dashed yellow;
    font-family: 'Rubik Bubbles', sans-serif;
    font-style: italic;
    color: blue;
    border-radius: 0.9em;
    margin-bottom: 0.4em;
}

h2,h1,a{
    text-align: center;
}
h1{
    width: 100%;
}

#form_playlist{
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1, h2, label,input,button,legend,p {
    -webkit-text-stroke: 0.75px rgb(0,0,255,0.8); /* Pour les navigateurs basés sur WebKit (Chrome, Safari) */
    /*text-stroke: 0.75px rgb(0,0,255,0.8);*/
}
input{
    width:auto;
    height: 2em;
    border-color: rgb(0,0,255,0.7);
    border-radius: 1em;
    color: yellow;
    background-color: rgb(255,255,0,0.7);
    font-family: 'Rubik Bubbles', sans-serif;
}
legend{
    font-style:italic;
    font-weight: bold;

}
.titre{
    text-decoration: none;
    text-align: center;
}
a:visited{
    text-decoration: none;
}

img {
    margin-top: 5vh;
    text-align: center;
  }

#devoiler-revoiler,#lancement,#recherche{
    margin-top: 2vh;
    text-align: center;
}