*{
    text-decoration: none;
    list-style: none;
    font-family: 'SkateFont2', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'SkateFont1';
    src: url('/fonts/ENDLESSBUMMER-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'SkateFont2';
    src: url('/fonts/Baskararegular.ttf') format('truetype');
}
@font-face {
    font-family: 'SkateFont3';
    src: url('/fonts/pandoramaDEMO.otf') format('opentype');
}

/**********GESTION DES COULEURS ET MODE NUIT *************/
:root {
    --text-color: #333;        
    --accent-color: #B91C1C;    
    --background-color: white;
    --menu-background: lightgray;
    --transparent-background: rgba(255, 255, 255, 0.747);
    --text-color-opposite: white;
    --button-hover: lightgray;
}

/* Mode nuit */
body.night-mode {
    --text-color: white;
    --accent-color: #B91C1C;
    --background-color: black;
    --menu-background: rgb(33, 33, 55);
    --transparent-background: rgba(0, 0, 0, 0.273);
    --text-color-opposite: #333;
    --button-hover: rgb(114, 114, 114);
}

/* Appliquer les couleurs */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden;
    background-image: url('../img/nnnoise.svg');
    background-repeat: repeat;
}
/* SYMFONY TOOLBAR */
.sf-toolbar{
    display: none!important;
}
a {
    color: var(--accent-color);
}
/* Cache la scrollbar par défaut */
::-webkit-scrollbar {
    width: 16px;
}

/* Style du conteneur de la barre de défilement */
::-webkit-scrollbar-track {
    background: var(--transparent-background);
    border: 1px solid var(--text-color);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

/* Style de la barre de défilement elle-même */
::-webkit-scrollbar-thumb {
    background: var(--text-color);
    border: 1px solid var(--text-color);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

/* Au survol de la barre de défilement */
::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
}



img.logo-strasspot-homepage{
    max-width: 100%;
}
.home-main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
   
/********************IMAGES**********************************/

.image-show-spot{
    width: 400px;
}
/*************SHOW_SPOT******************/
.show_spot_note{
    display: flex;
    align-items: center;
}


/*******GESTION DES MARGES SUR LA PAGE ********/ 
.page-width{
    /* margin:0 1.5rem; */
}
.head-show-profile{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}