body {
    display:flex;
    flex-flow: row;
    align-items: center;
    background-color:lightgray;
    font-family:sans-serif;
    background-image: url("https://ponomarov.org/img/2021/20210822_wheaton_brookside_garden/20210822_wheaton_brookside_garden_001.jpg");
    background-size:cover;
}

.main {
    xwidth:75%;
    display:flex;
    flex-flow: column;
    justify-content:left;
    align-items:normal;
}

.statistics {
    font-size:1.5rem;
    color:antiquewhite;
}
.main-play {
    display:flex;
    flex-flow: row;
    justify-content:left;
}

.right {
    display:flex;
    flex-flow: row;
    justify-content: end;
    align-items: flex-start;
}

.right-play {
    display:flex;
    flex-flow: column;
    justify-content:space-between;
    align-items:stretch;
    max-height:30rem;
}
.right-play * {
    margin:5px 0 10rem 0;
}

#phScore, #phCardsDealt, #phGames {
    font-weight: bold;
    margin-right:2rem;
}
#phScore::before {
    content:'Score: '
}
#phCardsDealt::before {
    content:'Cards dealt: '
}
        
#phGames::before {
    content:'Games: '
}

#phPlayArea {
    margin-right:1rem;
    Xborder:1px solid green;
    display:flex;
    flex-wrap: wrap;
    width: 83rem;
    min-height:20rem;
    xbackground-color:slategray;
}

.card {
    width:5rem;
    height:10rem;
    margin:1rem;
    background-color: white;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#phPlayArea .card{ transform:rotate(5deg); }
#phPlayArea .card:nth-child(2n) { transform:rotate(-4deg); }
#phPlayArea .card:nth-child(3n) { transform:rotate(2deg); }
#phPlayArea .card:nth-child(4n) { transform:rotate(-5deg); }
#phPlayArea .card:nth-child(5n) { transform:rotate(-6deg); }
#phPlayArea .card:nth-child(6n) { transform:rotate(6deg); }
#phPlayArea .card:nth-child(7n) { transform:rotate(3deg); }
#phPlayArea .card:nth-child(8n) { transform:rotate(-3deg); }

.card>div{
    margin:.5rem;
}

dialog {
    z-index:1;
}
dialog .example {
    display:flex;
    flex-wrap: wrap;
    background-color:slategray;

}

.c0>div {background-color:red; color:red;}
.c1>div {background-color:green; color:green;}
.c2>div {background-color:blue; color:blue;}

.f1.c0>div {background-color:rgb(252, 175, 175); color:red;}
.f1.c1>div {background-color:rgb(188, 248, 188); color:green;}
.f1.c2>div {background-color:rgb(184, 184, 243); color:blue;}

X.f0>div {opacity:100%;}
X.f1>div {opacity:20%;}
.f2>div {background-color:white; }

.c0>div {border:5px solid red; }
.c1>div {border:5px solid green; }
.c2>div {border:5px solid blue; }

.s0>div {height:30px; width:30px; border-radius: 50%;}
.s1>div {height:30px; width:30px; }
.s2>div {height:15px; width:45px;}

.card{
    border:10px solid white;
}

.card.selected {
    border:10px solid orchid;
}

.card.hint {
    background-color:white;
    Xbox-shadow: 10px 5px 5px red;
}

.remove {
    animation-duration: 1s;
    animation-name: opac;
}

@keyframes opac {
    from {
      opacity:100%;
    }
  
    to {
        opacity:10%;
    }
  }

button {
    height:2rem;
    margin-bottom:.25rem;
    font-weight:bold;
    font-size:1rem;
}

 button.big {
    height:4rem;
    width:8rem;
    font-size:1.5rem;

}

  button.new {
    color:black;
  }  
  
  button.check {
    color:green;
    border:10px solid coral;
  }  
  
  button.add {
    color:blue;
  }
  dialog form {
    margin-top:1rem;
}