body {
    display: flex;
    height: 100vh;
    flex-direction: column;

}

.fondo {
    width: 900px;
    height: 400px;
    display: flex;
    background-color: #000000;
    margin: 40px 0;
    padding: 60px 0;

}

.blanco {
    background-color: #041f04;
    margin: 40px 0;
    padding: 60px 0;
    height: 600px;
    border: 1px #dfcfdf solid;



}

/* DADO */
.dado {
    width: 100px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0px 4px 0px rgb(241, 241, 241) inset, 0px -5px 0px rgb(187, 187, 187) inset, -5px 0px 0px rgb(196, 196, 196)inset, 5px 0px 1px rgb(202, 202, 202) inset;
    transition: 3s;
}

.dado:hover {
    rotate: 1 0 1 360deg;
}

.punto {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #854e85;
}

/* DADO *0

/* EMOJI */
.emoji {
    width: 150px;
    height: 150px;
    background-color: rgb(44, 255, 79);
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    padding: 35px 15px 20px 15px;


}

.ojo,
.boca,
.bocaa,
.boc {
    background-color: #af37a7;
}

.boca {
    width: 120px;
    height: 60px;
    border-radius: 0 0 60px 60px;
    overflow: hidden;
}

.triste {
    rotate: 180deg;
    position: relative;
    bottom: 20px;
    scale: .75;
}

.ojo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #af37a7;

}

.lengua {
    width: 60px;
    height: 60px;
    background-color: pink;
    border-radius: 50%;
    position: relative;
    left: 30px;
    bottom: -30px;
}

.wow {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    scale: .50;
    position: relative;
    bottom: 20px;

}

.ojos {
    width: 125px;
    display: flex;
    justify-content: space-between;
}

.lenguaaa {
    width: 60px;
    height: 60px;
    background-color: pink;
    border-radius: 50%;
    position: relative;
    left: 20px;
    bottom: -75px;
}

.dispal-flex {
    display: flex;
    flex-wrap: wrap;
}

.anchura-cien {
    width: 100%;

}

.smail {
    width: 100px;
    height: 54px;
    border:7px solid #af37a7;
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-bottom-style: solid;
    border-bottom-color: rgb(175, 55, 167);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border-bottom:none;
    transform: rotate(180deg);
    overflow:hidden;
    margin-bottom: -4px;
}
.rojo{
    background-color: red;
}

.non {
    width: 100px;
    height: 6px;
    background-color: #af37a7;


}

.fila {
    margin-bottom: 20px;
}

.corazon {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #af37a7;
    transform: rotate(-60deg);
    margin: 10px;
    display: flex;
    scale: 0.8;
}

.corazon::before,
.corazon::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #af37a7;
    border-radius: 50%;
}

.corazon::before {
    top: -12.5px;
    left: 0;
}

.corazon::after {
    left: 12.5px;
    top: 0;
}

.corazonn {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #af37a7;
    transform: rotate(-33deg);
    margin: 10px;
    display: flex;
    scale: 0.8;
}

.corazonn::before,
.corazonn::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #af37a7;
    border-radius: 50%;
}

.corazonn::before {
    top: -12.5px;
    left: 0;
}

.corazonn::after {
    left: 12.5px;
    top: 0;
}


.ojoss {
    display: flex;
    justify-content: space-between;
    width: 125px;
}

.smaill {
    width: 51px;
    height: 30px;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border-bottom: none;
    transform: rotate(180deg);
    overflow: hidden;

}

.lenguaab {
    width: 42px;
    height: 60px;
    background-color: pink;
    border-radius: 50%;
    position: relative;
    left: 3px;
    bottom: 46px;
}

.ojor  {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #af37a7;
    transform: rotate(-60deg);
    margin: 10px;
    display: flex;
    scale: 0.8;
    border-radius: 50%;
}
.ojol  {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #af37a7;
    transform: rotate(-60deg);
    margin: 10px;
    display: flex;
    scale: 0.8;
    border-radius: 50%;
}


.ojor::before, .ojol::before {
	content: "";
	position: absolute;
	width: 34px;
	height: 8px;
	background-color: #af37a7;
	/* border-radius: 50%; */
}

.ojor::before {
	top: 3.5px;
	left: 0;
	transform: rotate(-100deg);
}

.ojol::before {
	top: 0.5px;
	left: -3px;
	transform: rotate(34deg);
}
.menos{

    width: 25px;
}
.td {
    position: relative;
    top: 10px;
}