:root{
  --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #fa0e7c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

::selection {
  background: rgba(244, 7, 197, 0.3);
}
body::-webkit-scrollbar {
  width: 10px;
}


/* customise l'arrière plan du scroll bar*/

body::-webkit-scrollbar-track {
  background-color: var(--white);
}

body::-webkit-scrollbar-track:hover {
  background-color: var(--white);
}


/* customise la petite ovale du scroll bar qui permet de défilé */

body::-webkit-scrollbar-thumb {
  background-color: var(--white);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: var(--white);
  border-radius: 10px;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  user-select: none;
}

.app-details {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.app-header {
  display: flex;
  align-items: center;
}

.app-icon {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  margin-right: 20px;
}

.app-info {
  flex: 1;
}

.app-title {
  font-size: 24px;
  margin: 0;
}

.app-developer {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  color: var(--pink);
  margin: 5px 0;
}

.app-rating {
  color: #f1c40f !important; /* Yellow color for stars */
}

.star {
  font-size: 24px;
}

.rating-count {
  margin-left: 5px;
}

.app-version{
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 70px;
  margin-top: 50px;
}

.version-detail {
  display: grid;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  gap: 10px;
  border-right:2px solid var(--gray);
}

.version-detail:nth-child(1) {
  padding-right: 50px;
}

.version-detail:nth-child(2) {
  display: none;
}
.version-detail label{
  color: black;
  font-weight: 600;
}

.version-detail span{
  color: black;
  margin-left: -5px;
  font-size: .8rem;
}

.version-detail:nth-child(3) {
  border:none;
}

.app-download {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 35px auto;
}

.app-download a {
  color: var(--white);
  text-decoration: none;
  background-color: var(--pink);
  border-radius: 50px;
  padding: 15px 22vw;
}

.app-description {
  margin-top: 20px;
  text-align: justify;
}

.app-description h2 {
  font-size: 20px;
}

.app-screenshots {
  display: grid;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-top: 50px;
}

.screenshot {
  display: flex;
  gap: 20px;
}

.screenshot img {
  width: 230px;
  border-radius: 10px;
}

#faq li a{
	color:var(--dark);
}

#app a{
  text-decoration: none;
  font-weight: bold;
  color: var(--pink);
}

.copyright{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
}

.copyright a{
  text-decoration: none;
  color: var(--black);
  font-size: .8rem;
  font-weight: 700;
}

.copyright a:hover{
  transform: scale(1.1);
  transition: .1s ease-in;
}

/* Download Page */
.app-download-page {
  display: grid;
  height: 200px;
  margin-bottom: 30px;
  background-color: rgba(67, 65, 67, 0.3);
  border-radius: 10px;
  padding-bottom: 20px;
}

.download-page-button {
  display: grid;
  justify-content: center;
  text-align: center;
  align-items: center;
  align-content: center;
}

#timerCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #fa0e7c;
  margin: 10px auto;
}

#timer{
  color: #fa0e7c;
}

#timerFail{
  display: none;
}

#timerFail a{
  text-decoration: none;
  margin-top: -4px;
  font-weight: 800;
  color: #fa0e7c;
}

.download-page-button #timer{
  font-size: 1.5rem;
  font-weight: 800;
}

/* MOBILE  */
@media screen and (max-width: 868px) {

  .app-details {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .app-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    margin-right: 15px;
  }
  
  .app-title {
    font-size: 1.1rem;
    margin-top: 25px;
  }
  
  .app-developer {
    font-size: 1rem;
    color: var(--pink);
    margin: 5px 0;
  }
  
  .app-rating {
    color: #f1c40f !important; /* Yellow color for stars */
  }
  
  .star {
    font-size: .9rem;
  }
  
  .rating-count {
    margin-left: 5px;
  }

  .app-version{
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 30px;
    margin-top: 30px;
  }
  
  .version-detail {
    display: grid;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    gap: 10px;
    border-right:2px solid var(--gray);
  }

  .version-detail:nth-child(1) {
    padding-right: 0;
  }

  .version-detail:nth-child(2) {
    display: grid;
  }
  
  .version-detail img{
    margin-left: 10px;
    width: 20px;
  }
  .version-detail label{
    color: black;
    margin-left: 5px;
    font-weight: 600;
    font-size: .9rem;
  }

  .version-detail span{
    color: gray;
    margin-left: 5px;
    font-size: .8rem;
  }
  
  .version-detail:nth-child(3) {
    border:none;
  }

  .app-download {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 30px auto;
  }
  
  .app-download a {
    color: var(--white);
    text-decoration: none;
    background-color: var(--pink);
    border-radius: 50px;
    padding: 13px 30vw;
  }

  .app-description {
    margin-top: 20px;
  }
  
  .app-description h2 {
    font-size: 1.1rem;
  }

  .app-description p,#faq,#app,#fix{
    text-align: justify;
    font-size: .8rem;
  }
  
  #faq{
  	font-size:.8rem;
  }

  .app-screenshots {
    display: grid;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 50px;
  }
  
  .screenshot {
    display: flex;
    overflow-x: scroll;
    height: 25vh;
    gap: 20px;
  }
  
  .screenshot img {
    width: 150px;
    border-radius: 10px;
  }

  .screenshot img:hover {
    filter: brightness(1.3);
    transition: .2s ease-in-out;
  }

  /* Download Page */
.app-download-page {
  margin: 50px 0;
}

.app-download-page h2{
  font-size: 1.1rem;
}

#timer{
  font-size:1.1rem;
}

#timerFail{
  display: none;
}

#timerFail a{
  text-decoration: none;
  margin-top: -4px;
  font-weight: 800;
}

.download-page-button #timer{
  font-size: 1rem;
  font-weight: 800;
}


}