* {
    box-sizing: border-box;
}

html {
    font-size:62.5%;
}

header {
    display:flex;
    flex-direction:column;
    justify-content:center;
}
h1 {
    text-align:center;
    font-size: 6rem;
    color: #800080;
    font-weight:bold;
    line-height:50px;
    margin-bottom: 0px;
}

h3 {
    font-size: 2rem;
    color: purple;
    text-align: center;
}
div.cardLayout {
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left:5%;
    padding-right:5%;
    padding-top:2%;
    padding-bottom:2%; 
    width: 100%;
    margin-left:auto;
    margin-right:auto;
}

section.card {
    width:11.5%;
    background: lavender;
    border: 2px solid purple;
    padding-left: 2%;
    padding-right: 2%;
    padding-top:2%;
    padding-bottom:2%;
    margin-left: .5%;
    margin-right:.5%;
    margin-bottom: .5%;
    margin-top: .5%;
    display:flex;
    align-items:center;
    transform-style: preserve-3d;
    transition: all 0.8s ease;

}

.backImg {
    transform: rotateY('180deg')
}

.flipCard .backImg{
    transform: rotateY('180deg')
}
section.card > img {
    width:100%;
    
}

 .hide {
    display:none;   
}

.card.match {
    background: rgb(255, 172, 254);
    border: 2px solid rgb(121, 42, 121); 
}

.button , span {
    font-size: 2rem;
    border: 2px solid purple;
    padding-left: 2%;
    padding-right:2%;
    padding-top:1%;
    padding-bottom:1%;
    color: purple;
    box-shadow: 2px 2px; 

}

section.controls{
    display:flex;
    justify-content: center;
}

.controls a {
    margin-left: 2%;
}