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

body{
background-image: url("images/Caribbean-beach.jpg");
background-color: #cccccc;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
object-fit: contain;
}

#header {
background-color: #293250;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow-x: hidden;
padding-top: 20px;
}

.left {
left: 0
}

.right {
right: 0;
display: flex;
}

#find {
text-align: center;
margin-bottom: -50px;
margin-left: 200;
font-family: 'Oswald', Helvetica, sans-serif;
font-size: 80px;
transform: skewY(-10deg);
letter-spacing: 4px;
word-spacing: -8px;
color: #f9858b;
text-shadow: 
-1px -1px 0 #ED335F,
-2px -2px 0 #ED335F,
-3px -3px 0 #ED335F,
-4px -4px 0 #ED335F,
-5px -5px 0 #ED335F,
-6px -6px 0 #ED335F,
-7px -7px 0 #ED335F,
-8px -8px 0 #ED335F,
-30px 20px 40px dimgrey;
position: relative;
}

#shia {
float: right;
margin-top: 800px;
margin-right: 110px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #7fcdff;
}

body{
height: 100vh;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
}

.matching-game{
width: 1000px;
height: 1000px;
display: flex;
flex-wrap: wrap;
margin-top: 130px;
perspective: 1000px;
}

.matching-card{
width: calc(25% - 20px);
height: calc(33% - 20px);
position: relative;
margin: 10px;
transform-style: preserve-3d;
/* smoother animated flip */
transition: transform 0.5s; 
}

.front{
position: absolute;
width: 100%;
height: 100%;
border-radius: 25px;
backface-visibility: hidden;
}

.back{
width: 100%;
height: 100%;
position: absolute;
border-radius: 25px;
backface-visibility: hidden;
transform: rotateY(180deg);
}

.matching-card.flipped {
transform: rotateY(180deg);
pointer-events: none
}

.doit {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 50%;
}

h4{
  color: white;
  font-size: 50px;
}

.noclick {
  text-align: center ;
}


.win {
  text-align: center ;
  margin-top: 100px;
  font-family: 'Dancing Script', cursive;
  font-size: 40px;
}

.scoreBar {
  display: flex;
  justify-content: center;
	font-family: 'Dancing Script', cursive;
  color: black;
  font-size: 80px;
  text-align: center;
}
.winner {
  text-align: center;
  margin-left: 200;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 80px;
  letter-spacing: 4px;
  word-spacing: -8px;
  color: #f9858b;
  text-shadow: 
  -1px -1px 0 #ED335F,
  -2px -2px 0 #ED335F,
  -3px -3px 0 #ED335F,
  -4px -4px 0 #ED335F,
  -5px -5px 0 #ED335F,
  -6px -6px 0 #ED335F,
  -7px -7px 0 #ED335F,
  -8px -8px 0 #ED335F,
  -30px 20px 40px dimgrey;
  position: relative;
}