MSJS_WANG_SERNY/stylepagecss/style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* lien "machine à sous NSI" qui nous mène vers la page avec l'interface graphique de la machine à sous*/
a {
    font-family: arial;
    position: relative;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    font-size: 7.5em;
    width: 100%;
    color:white;
    text-shadow: 20px 10px 25px #000000;
    letter-spacing: 19.8px;
    transition: 3s;
}

/* petit effet sur le lien*/
a:hover {
    font-size: 3em;
    transition: 3s;
    text-shadow: 20px 10px 10px black, 0 0 25px blue, 0 0 5px darkblue;
}
/* le fond avec un gradient*/
body {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    min-height: 100vh;
    background: rgb(18,79,96);
    background: -moz-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
    background: linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#124f60",endColorstr="#5421a3",GradientType=1);
    padding: 2.5rem;
    color: white;
    overflow: hidden;
}

/* cadre qui entoure le rouleaux*/
.cadre_rouleaux {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* Affichage numéros */
.rouleaux {
    position: relative;
    display: flex;
    justify-content: space-around;
    width: 14rem;
    height: 6.9rem;
    overflow: hidden;
    background-color: linear-gradient(to right, #fc5c7d, #6a82fb);
    box-shadow: inset 0 2px 20px 5px #000, 0 2px 20px 1px rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    text-align: center;
    color: #fff;
    text-shadow: -2px -2px 0 #aaa;
    font: 5rem/1.4 monaco, monospace;
}

/* Boutons */
.button {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button button {
    display: inline-block;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 5%;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 25px 80px;
    text-transform: none;
    cursor: pointer;
    margin: 15px 30px;
    transition: all 0.7s;
}

button:hover {
    background-color: white;
    color: black;
    transition: all 0.7s;
}

.mise {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.mise > * {
  padding: 5px;
}
.mise label {
  font-size: 18px;
}
.mise input {
  filter: invert(1);
  border-radius: 2%;
}

/* affichage des "coin player et machine" */
.option {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	  color: white;
    height: 40vh;
}

/* titre qui renvoie à la page index.html */
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    top: 2%;
    left: 2%;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 1px;
    transition: 2s;
    z-index: 9998;
}

/* affiche les règles*/
#show_rules {
  position: relative;
  display: none;
  background-color: #fff;

}

#show_rules > p {
  padding: 100px;
  color: black;
}

#show_rules > div {
  width: 3vh;
  height: 3vh;
  background-color: red;
  position: absolute;
  right: 0%;
  font-size: 4vh;
  cursor: pointer;
}