@import url("https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css");
@import url("https://solrainha.github.io/saturnicons/saturnicons.css");
@import url("https://solrainha.github.io/honeybee/honeybee.css");
@import url("https://siientmoon.github.io/Mooncakefonts.css");
@import url("https://dl.dropbox.com/s/qm6x16r9jjlbgd4/game-icons.css");

/*   Dreams by K ©2021   */

.dreams {width: 500px;min-height: 200px;margin: 50px auto 0px;position: relative;}

.dreams .faith {width: 100%;height: 200px;background: url(https://i.pinimg.com/originals/05/59/94/05599424bb5a1b7819956d0288559697.gif);}

.dreams .love {font: 130px Amoret;text-transform: lowercase;display: inline-block;position: absolute;top: 15px;left: 50%;transform: translate(-50%, 0%)}

.dreams .luv {font: 10px Calibri; position: absolute;letter-spacing: 5px;top: 50px;left: 50%;transform: translatex(-50%)}

/*Botones*/
.dreams-botones {position: absolute;bottom: -50px;left: 50%;transform: translatex(-50%)}

.dreams-botones .pestas {position: absolute;top: -207px;left: -167px;width: 500px;height: 200px;}

.dreams-botones input { display: none; }
.dreams-botones input + label { display: inline-block; cursor: pointer;transition: .8s ease;border-radius: 100%;padding: 0px!important}

.dreams-botones input ~ .pestas {transition: .8s ease; visibility: hidden; opacity: 0}

#dboton-1:checked ~ .pestas.dcontenidito1,
#dboton-2:checked ~ .pestas.dcontenidito2,
#dboton-3:checked ~ .pestas.dcontenidito3, #dboton-4:checked ~ .pestas.dcontenidito4 { visibility: visible; opacity: 1}

.dreams-botones input:checked + label {transform: rotate(360deg)}

.diconss {width: 30px;height: 30px;text-align: center;border-radius: 100%!important;position: relative} 

.diconss .th, .diconss .sf {font-size: 15px;position: absolute; top: 50%;transform: translate(-50%, -50%);left: 50%}

.wing {width: 500px; height: 200px;position: relative;} 

.wing .sing {width: 150px;height: 150px; object-fit: cover;object-position: 0px 0px; outline: 1px solid #f76b84; outline-offset: 5px;top: 50%;transform: translatey(-50%);position: absolute;left: 20px} 

.wing .scream {width: 300px;height: calc(200px - 45px);overflow-x: auto; right: 15px;position: absolute;top: 50%;transform: translatey(-50%);column-count: 2;text-align: justify;color: #787878;font: 12px Calibri;}

.scream .songs {float: left;width: 30px;height: 30px;position: relative;} 

.scream .songs .th, .scream .songs .sf {font-size: 15px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: movingu 1s infinite} 

@keyframes movingu {0%{transform: translate(-50%, -50%)}
  25%{transform: translate(-50%, -60%)}
  50%{transform: translate(-50%, -50%)}
  75%{transform: translate(-50%, -40%)}
  100%{transform: translate(-50%, -50%)}}

.wing .memories {font: 15px Montserrat; font-weight: 900;text-transform: lowercase;position: absolute; right: 15px; top: 2px;}

.datis {text-align: center;padding: 5px 0px;margin-bottom: px;float: left;width: 145px; margin: 0px 2.5px 5px}
.datiss {width: calc(145px * 2 + 5px)}

.wing .scream1 {column-count: 1!important}

.wing .scream font {font-weight: bold}