* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
}
body {
	background-image: url(https://wallpapercave.com/uwp/uwp863685.jpeg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	height: 100vh;
}
.menu-area li a {
	text-decoration: none;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: block;
	padding: 0 25px;
	font-size: 14px;
	line-height: 30px;
	position: relative;
	z-index: 1;
}
.menu-area li {
	list-style: none;
	display: inline-block;
}
.custom-padding {
	padding-top: 25px;
}
nav {
	position: relative;
	padding: 10px 20px 10px 10px;
	text-align: right;
	z-index: 1;
	background: #333;
	margin: 0 auto;
	width: calc(100% - 60px);
}
.logo {
	width: 15%;
	float: left;
	text-transform: uppercase;
	color: #fff;
	font-size: 25px;
	text-align: left;
	padding-left: 2%;
}
.menu-area li a:hover {
	background: tomato;
	color: #fff;
}
nav:before {
	position: absolute;
	content: '';
	left: 0;
	top: 100%;
	border-top: 10px solid #333;
	border-right: 10px solid #333;
	border-left: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
nav:after {
	position: absolute;
	content: '';
	border-top: 10px solid #333;
	border-left: 10px solid #333;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	top: 100%;
	right: 0;
}

.wavy
{
  position:relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2));
}

.wavy span
{
  position: relative;
  display: inline-block;
  color: white;
  font-size: 2em;
  text-transform: uppercase;
  animation: animate 1s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));
}

section
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  transform-style: preserve-3d;
  width: 1600px;
}
section .card
{
  position: relative;
  width: 320px;
  height: 100px;
  margin: 95px;
  transform-style: preserve-3d;
  perspective: 1000px;
}
section .card .box
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
  transform-style: preserve-3d;
  transition: 1s ease;
}
section .card:hover .box
{
  transform: rotateY(180deg);
}
section .card .box .imgBx
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
section .card .box .imgBx img
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
  object-fit: cover;
}
section .card .box .contentBx
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}
section .card .box .contentBx div 
{
  transform-style: preserve-3d;
  padding: 20px;
  background: linear-gradient(45deg, #fe0061, #ffeb3b);
  transform: translateZ(100px);
}
section .card .box .contentBx div h2
{
  color: #fff;
  font-size: 20px;
  letter-spacing: 1px;
}
section .card .box .contentBx div p
{
  color: #fff;
  font-size: 16px;
}




.photo
{
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: move 20s linear infinite;
}
@keyframes move
{
  0%
    {
       transform: perspective(1000px) rotateY(0deg);
    }
  100%
    {
       transform: perspective(1000px) rotateY(360deg);
    }
}
.photo span
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
  -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);
}
.photo span img
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
  height: 100%
  object-fit: cover;
}
img {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 5px;
  width: 310px;
  height: 200px;
}
  
















/* title */
h1{
  color: lightblue;
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}
/* tasks */
.tasks{
  width: 700px;
  height: 900px;
  position: absolute;
  top: 20%;
  left: 0px; 
  right: 0px;
  margin: 0px auto;
}
input[type=checkbox] {
  display: none;
}
label{
  background: #87CEEB;
  height: 69px;
  width: 100%;
  display: block;
  border-bottom: 1px solid white;
  color: white;
  text-transform: capitalize;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 1px;
  text-indent: 20px;
  cursor: pointer;
  transition: all 0.7s ease;
  position: relative;
  padding: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
label h2 span{
  display: block;
  font-size: 12px;
  text-transform: capitalize;
  font-weight: normal;
  color: white;
}
label:before{
  content:"";
  width: 20px;
  height: 20px;
  background: white;
  display: block;
  position: absolute;
  border-radius: 100%;
  right: 20px;
  top: 30%;
  transition: border 0.7s ease
}
#label-1:checked ~ label[for=label-1],
#label-2:checked ~ label[for=label-2],
#label-3:checked ~ label[for=label-3],
#label-4:checked ~ label[for=label-4],
#label-5:checked ~ label[for=label-5]{
  background: #4682B4;
  border-bottom: 1px solid #FFFAFA;
  color: black;
}
#label-1:checked ~ label[for=label-1] h2 span,
#label-2:checked ~ label[for=label-2] h2 span,
#label-3:checked ~ label[for=label-3] h2 span,
#label-4:checked ~ label[for=label-4] h2 span,
#label-5:checked ~ label[for=label-5] h2 span{
  color: black;
}
#label-1:checked ~ label[for=label-1]:before,
#label-2:checked ~ label[for=label-2]:before,
#label-3:checked ~ label[for=label-3]:before,
#label-4:checked ~ label[for=label-4]:before,
#label-5:checked ~ label[for=label-5]:before{
  background: url("https://i.imgur.com/eoPQ05r.png") no-repeat center center;
}

mark {
  background-color: yellow;
  color: black;
}


@keyframes animate
{
  0%
  {
     transform: translateY(0px);
  } 
  20%
  {
     transform: translateY(-20px);
  40%,100%
  { 
     transform: translateY(0px);
  }
}