html {
    background-color: rgb(14, 14, 14);
    color: white;
    font-family: 'Verdana';
}

#head {
    text-align: center;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.head {
    text-align: center;
    position: absolute;
    cursor: pointer;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    animation: animated1 2s;
}


.t { animation: animated 1s infinite alternate; }
.mood { animation: anim_mood 1s infinite alternate; }


#p {
    text-align: center;
    display: none;
    transition: 1s;
    animation: animated2 2s;
}

a { 
    filter: opacity(50%);
    text-decoration: none;
    color: white;
    transition: 1s;
}

a:hover {
    filter: opacity(100%);
    color: #69C89B;
    text-shadow: #488669 1px 0 5px;
    cursor: pointer;
}

img.pic {
    filter: opacity(50%); 
    height: 32px;
    transition: 1s;
    padding: 5px;
}

img.pic:hover { height: 48px; filter: opacity(100%) }

#ds {
    filter: opacity(50%);
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 1s;
}

@keyframes animated {
    from { height: 85px; }
    to { height: 100px; }
}

@keyframes anim_mood {
    from { height: 12px; }
    to { height: 15px; }
}
@keyframes animated1 { from { top: -40% } }
@keyframes animated2 { 
    from { filter: opacity(10%); }
    to { filter: opacity(100%); } 
}