:root {
    --bg: #f8f7fa;
    --menutxtcl: 111, 115, 145;
    --menutxtweight: 600;
    --intlinear: 166, 166, 166;
    --txtall: 99, 99, 99;
    --cl1: 128, 68, 247;
    --pckdf: var(--cl1);
    --whydf: var(--cl1);
    --lbds: 255, 255, 255;
    --lsdb: 56, 58, 70;
    --text: 85, 85, 85;
    --fixedtel: #d581b4;
}
body.dark {
    --bg: #26272d;
    --menutxtcl: 226, 226, 228;
    --intlinear: 45, 45, 58;
    --txtall: 226, 226, 228;
    --cl1: 128, 68, 247;
    --lbds: 56, 58, 70;
    --lsdb: 255, 255, 255;
    --pckdf: var(--cl1);
    --text: 226, 226, 228;
}

body{
  font-family: 'Roboto', sans-serif;
  background: black;
}

h1{
  color: white;
  font-size: 4.2em;
  text-align: center;
}

.whats-float {
    position: fixed;
    transform:translate(108px,0px);
    top:90%;
    right:0;
    width:150px;
    overflow: hidden;
    background-color: #25d366;
    color: #FFF;
    border-radius: 10px 0 0 10px;
    z-index: 10;
    transition: all 0.5s ease-in-out;
    vertical-align: middle
}
.whats-float a span {
    color: white;
    font-size: 15px;
    padding-top: 8px;
    padding-bottom: 10px;
    position: absolute;
    line-height: 16px;
    font-weight: bolder;
}

.whats-float i {
    font-size: 30px;
    color: white;
    line-height: 30px;
    padding: 10px;
    transform:rotate(0deg);
    transition: all 0.5s ease-in-out;
    text-align:center;

}

.whats-float:hover {
    color: #FFFFFF;
    transform:translate(0px,0px);
}

.whats-float:hover i  {
    transform:rotate(360deg);
}