/*dados*/
body{
    display: flex;
    height: 100vh;
    flex-direction: column;
}
.fondo{
    width: 900px;
    display: flex;
    background-color: rgb(12, 1, 1);
    margin: 40px 0px;
    padding: 60px 0;
}
.dado{
    width: 100px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(228, 225, 225);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0px 5px white
    inset,0px -5px  white inset, -5px 0px white inset
    ,5px 0px white inset;
    transition: all 1s;
}
.dado:hover{
    rotate: 360deg;
}
.punto,.ojo{
    width: 25px;
    height: 25px;
   /* display: flex;*/
    border-radius: 50%;
    background-color: black;
    padding: 5px;
}
/*emojis*/

.emoji{
width: 150px;
height: 150px;
background-color: yellow;
border-radius: 50%;
display: flex;
flex-wrap: wrap;

}
.emoji-enfadado{
    background-color:rgba(255, 0, 0, 0.8);
}
.ojo,.boca{
 background-color: brown;   
}
.boca{
    width: 120px;
    height: 60px;
    border-radius: 0 0 60px 60px;
    overflow: hidden;
}
.redonda{
    width: 60px;
    border-radius: 50%;
}
.boca-corazon{
    width: 50px;
    height: 25px;
    border-radius: 0 0 60px 60px;
    overflow: hidden;  
}
.ojos{
    width: 120px;
    display: flex;
    justify-content: space-around;
}
.triste{
    transform: rotate(180deg);
    position: relative;
    bottom: 10px;
    scale: 0.95;
}
.lengua {
	width: 60px;
	height: 60px;
	background-color: pink;
	border-radius: 50%;
	position: relative;
	left: 30px;
	bottom: -30px;
}
.ceja::before {
	content: '';
	width: 35px;
	height: 10px;
	display: inline-block;
	background-color: #4b4f4e;
	position: relative;
	top: -10px;
	left: -1px;
	transform: rotate(25deg);
}
.ceja:nth-child(2)::before{
    transform: rotate(-25deg);
    left: -7px;
}
      
.anchura-cien{
width: 100%;
}
.display-flex {
	display: flex;
	flex-wrap: wrap;
}
.corazon {
    position: relative;
    width: 25px;
    height: 25px;
    background-color: chocolate;
    transform: rotate(-25deg);
    /*margin: 50px;*/
    display: flex;
  }
.corazon-left{
    transform: rotate(-70deg);
}

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

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

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