body
{
    position: relative;
    margin: 0; padding: 0;
    background-color: black;
    font-family: sans-serif;
}

#floating-player
{
    position: absolute;
    top: 0.25rem;
    right: 1rem;
    z-index: 5;
    transition: opacity 0.5s linear;
    opacity: .5;
}
#floating-player:hover
{
    opacity: .8;
}

h4
{
    text-align: center;
    font-size: .9rem;
    color: white;
}

#page-wrapper
{
    height: 100vh;
    min-height: 920px;
    display: flex;
    justify-content: center;
    align-items: center;
}

noscript
{
    position: absolute;
    text-align: center;
    padding: .5rem 1rem;
    border: 1px solid red;
    border-radius: 5px;
    background-color: white;
    font-size: .85rem;
    color: red;
    z-index: 3;
}

#login-popup
{
    position: absolute;
    padding: 1rem 2rem;
    background-color: white;
    border: 1px solid black;
    z-index: 3;
}

#valid-btn
{
    width: 100%;
    margin-top: 10px;
    background-color: white;
    padding: .5rem;
    font-size: .9rem;
    color:black;
    border: 1px solid black;
}
#valid-btn:hover
{
    cursor: pointer;
    background-color:black;
    color: white;
    border: 1px solid black;
}

#floating-block
{
    position: relative;
}

img
{
    height: 940px;
}

.case
{
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 15px;
    border: 3px solid red;

    text-align: center;
    font-family: sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: goldenrod;
    line-height: 3.75rem;

    transition: opacity, color, ease-in .66s;
    background-color: #222;
    opacity: .8;
    z-index: 1;
}

.already-seen /* Surcharge de .case */
{
    opacity: .4;
}

#c25 /* Surcharge spécifique de .case */
{
    width: 102px; height: 102px;
    font-size: 3.125rem;
    line-height: 6.25rem;
}

.case:hover
{
    border: 3px solid transparent;
    background-color: transparent;
    background: linear-gradient(135deg,gold, white, gold, goldenrod, gold);
    opacity: 1;
    color: #333;
}

.popin
{
    position: absolute;
    margin: -21px 0 0 -21px;
    padding: 10px;
    width: 86px; height: 86px;
    border-radius: 15px;
    text-align: center;
    line-height: 1.4rem;
    border: 1px solid red;
    background-color: white;
    font-size: 1.1rem;
    color: red;
    z-index: 2;
}

#c1, #p1 {
    top: 414px; left: 91px;
}
#c2, #p2 {
    top: 669px; left: 513px;
}
#c3, #p3 {
    top: 656px; left: 629px;
}
#c4, #p4 {
    top: 450px; left: 304px;
}
#c5, #p5 {
    top: 243px; left: 711px;
}
#c6, #p6 {
    top: 491px; left: 394px;
}
#c7, #p7 {
    top: 369px; left: 249px;
}
#c8, #p8 {
    top: 269px; left: 260px;
}
#c9, #p9 {
    top: 540px; left: 670px;
}
#c10, #p10 {
    top: 366px; left: 415px;
}
#c11, #p11 {
    top: 626px; left: 718px;
}
#c12, #p12 {
    top: 680px; left: 204px;
}
#c13, #p13 {
    top: 418px; left: 784px;
}
#c14, #p14 {
    top: 483px; left: 189px;
}
#c15, #p15 {
    top: 663px; left: 336px;
}
#c16, #p16 {
    top: 463px; left: 481px;
}
#c17, #p17 {
    top: 575px; left: 574px;
}
#c18, #p18 {
    top: 721px; left: 416px;
}
#c19, #p19 {
    top: 313px; left: 803px;
}
#c20, #p20 {
    top: 575px; left: 455px;
}
#c21, #p21 {
    top: 313px; left: 165px;
}
#c22, #p22 {
    top: 561px; left: 286px;
}
#c23, #p23 {
    top: 260px; left: 385px;
}
#c24, #p24 {
    top: 331px; left: 540px;
}
#c25, #p25 {
    top: 396px; left: 631px;
}

.hidden
{
    display: none;
}