.rarity-section {
    margin-top: 80px;
    color: var(--color1);
}

.rarity-simulator-section {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 8fr 1fr 3fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.rarity-item-section {
    display: grid;
    grid-template-columns: 4fr 1fr 4fr 1fr 4fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: var(--color2) ;
    border-radius: 60px;
    padding: 15px;
}

.rarity-item {
    display: flex;
    border-radius: 60px;
    padding: 5px;
    background-color: var(--color4) ;
    min-height: 50px;
    text-align: center;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    user-select: none;
    font-size: 1.1rem;
}

.rarity-item:hover {
    border: 3px solid var(--color3);
    cursor: pointer;
}

.rarity-plus {
    color: var(--color4) ;
    font-size: 2rem;
    text-align: center;
    align-self: center;
}

.rarity-equal {
    color: var(--color2) ;
    font-size: 2.3rem;
    text-align: center;
    align-self: center;
}

.rarity-resultat-section {
    color: var(--color4) ;
    background-color: var(--color2) ;
    border-radius: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.animation-resultat {
    -webkit-animation: jello-horizontal 0.9s both;
	animation: jello-horizontal 0.9s both;
}

#rare {
    background-color: var(--color2) ;
}

#common {
    background-color:red ;
}

#leg {
    background-color:rgb(255, 0, 212) ;
}

#btc {
    background-color: rgb(255, 217, 0);
    color: var(--color1);
}

#xrp {
    background-color: rgb(19, 19, 19);
    color: var(--color4);
}

#eth {
    background-color: rgb(183, 232, 255);
    color: var(--color1);
}

#xmr {
    background-color: rgb(255, 123, 0);
    color: var(--color1);
}

.action-where-buy-button {
    color: var(--color4);
    background-color: var(--color2);
    font-weight: normal;
    font-size: 1.5rem;
    padding: 17px 40px 17px 40px;
    text-decoration: none;
}

.first-section-button:hover {
    background-color: var(--color3);
    cursor: pointer;
}

@-webkit-keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  @keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }

/* écran 4k */
@media screen and (min-width: 2560px) and (min-height: 1400px){
    .rarity-item {
        min-height: 100px;
        border-radius: 90px;
        font-size: 1.8rem;
    }
    .rarity-resultat-section {
        font-size: 2.4rem;
    }
    .action-where-buy-button {
        color: var(--color4);
        background-color: var(--color2);
        font-weight: normal;
        font-size: 1.9rem;
        padding: 22px 45px 22px 45px;
        text-decoration: none;
    }
}

/* écran HD 1440x900 */
@media screen and (max-width: 1440px) and (max-height: 900px) {

}

/* écran HD 1366x768 */
@media screen and (max-width: 1366px) and (max-height: 768px) {

}

/* écran HD 1280x1024 */
@media screen and (max-width: 1280px) and (max-height: 1024px) {

}

/* écran HD 1280x720 */
@media screen and (max-width: 1280px) and (max-height: 720px) {

}

/* ipdad air mini paysage 900x1200 */
@media screen and (max-width: 950px) and (max-height: 1400px) {

}

/* écran Mobile 360x800 */
@media screen and (max-width: 360px) and (max-height: 800px) {
    .rarity-simulator-section {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .rarity-item-section {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: var(--color2);
        border-radius: 40px;
        padding: 15px;
    }
    .rarity-item {
        display: flex;
        border-radius: 60px;
        padding: 5px;
        background-color: var(--color4);
        max-height: 40px;
        text-align: center;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        font-size: 1.1rem;
    }
    .rarity-resultat-section {
        color: var(--color4);
        background-color: var(--color2);
        border-radius: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        padding: 20px 0px 20px 0px;
    }
}

/* écran Mobile 390x844 */
@media screen and (max-width: 390px) and (max-height: 844px) {
    .rarity-simulator-section {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .rarity-item-section {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: var(--color2);
        border-radius: 40px;
        padding: 15px;
    }
    .rarity-item {
        display: flex;
        border-radius: 60px;
        padding: 5px;
        background-color: var(--color4);
        max-height: 40px;
        text-align: center;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        font-size: 1.1rem;
    }
    .rarity-resultat-section {
        color: var(--color4);
        background-color: var(--color2);
        border-radius: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        padding: 20px 0px 20px 0px;
    }
}

/* écran Mobile 414x896 */
@media screen and (max-width: 414px) and (max-height: 896px) {
    .rarity-simulator-section {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .rarity-item-section {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: var(--color2);
        border-radius: 40px;
        padding: 15px;
    }
    .rarity-item {
        display: flex;
        border-radius: 60px;
        padding: 5px;
        background-color: var(--color4);
        max-height: 40px;
        text-align: center;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        font-size: 1.1rem;
    }
    .rarity-resultat-section {
        color: var(--color4);
        background-color: var(--color2);
        border-radius: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        padding: 20px 0px 20px 0px;
    }
}

/* écran Mobile 393x873 */
@media screen and (max-width: 393px) and (max-height: 873px) {
    .rarity-simulator-section {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .rarity-item-section {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: var(--color2);
        border-radius: 40px;
        padding: 15px;
    }
    .rarity-item {
        display: flex;
        border-radius: 60px;
        padding: 5px;
        background-color: var(--color4);
        max-height: 40px;
        text-align: center;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        font-size: 1.1rem;
    }
    .rarity-resultat-section {
        color: var(--color4);
        background-color: var(--color2);
        border-radius: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        padding: 20px 0px 20px 0px;
    }
}

/* écran Mobile 412x915 */
@media screen and (max-width: 412px) and (max-height: 915px) {
    .rarity-simulator-section {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .rarity-item-section {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: var(--color2);
        border-radius: 40px;
        padding: 15px;
    }
    .rarity-item {
        display: flex;
        border-radius: 60px;
        padding: 5px;
        background-color: var(--color4);
        max-height: 40px;
        text-align: center;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        font-size: 1.1rem;
    }
    .rarity-resultat-section {
        color: var(--color4);
        background-color: var(--color2);
        border-radius: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        padding: 20px 0px 20px 0px;
    }
}

/* iphone SE 375x667 */
@media screen and (max-width: 375px) and (max-height: 667px) {
    .rarity-simulator-section {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .rarity-item-section {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: var(--color2);
        border-radius: 40px;
        padding: 15px;
    }
    .rarity-item {
        display: flex;
        border-radius: 60px;
        padding: 5px;
        background-color: var(--color4);
        max-height: 40px;
        text-align: center;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        font-size: 1.1rem;
    }
    .rarity-resultat-section {
        color: var(--color4);
        background-color: var(--color2);
        border-radius: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        padding: 20px 0px 20px 0px;
    }
}

/* galaxy s8+ 360x740 */
@media screen and (max-width: 360px) and (max-height: 740px) {
    .rarity-simulator-section {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .rarity-item-section {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: var(--color2);
        border-radius: 40px;
        padding: 15px;
    }
    .rarity-item {
        display: flex;
        border-radius: 60px;
        padding: 5px;
        background-color: var(--color4);
        max-height: 40px;
        text-align: center;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        font-size: 1.1rem;
    }
    .rarity-resultat-section {
        color: var(--color4);
        background-color: var(--color2);
        border-radius: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        padding: 20px 0px 20px 0px;
    }
}