@font-face {
    font-family:Fraunces ;
    src: url(fonts/Fraunces-ExtraLightItalic.ttf);
}
@font-face {
	font-family: TelmaLight;
	src: url(fonts/Telma-Light.otf);
}
@font-face {
	font-family: InterLight;
	src: url(fonts/Inter-Light.ttf);
}
.h1 {
    position: absolute;
    left:52%;
    top:18%;
    transform: translate(-50%, -50%);
    width: 580.5px;
    height: 212.5px;
}
#smileyinput {
    position: absolute;
    width: 117px;
    height: 62px;

    left: 42%;
    top: 45%;

    font-family: Fraunces;
    text-align: center;
    font-size: 30px;

    padding: 6px 5px;
    
    background: #92FFB7;
    border-radius: 12px;
    border: 0px solid ;
    box-shadow: 0px -5px 81px #92FFB7;
}
#send {
    position: absolute;
    width: 90px;
    height: 90px;

    left: 53%;
    top: 44%;

    border-radius: 50%;
    border: 0px solid ;
    box-shadow: 0px -5px 81px #92FFB7;
    background: #92FFB7;
    font-family: Fraunces;
    font-weight: 250;
    font-size: 20px;
    line-height: 100.3%;
    letter-spacing: -0.07em;
    text-align: center;

}
#send:hover {
    box-shadow: 0px -5px 81px #60ff95;
    background: #60ff95;
    width: 80px;
    height: 80px;
    text-align: center;
}

.output{
    position: absolute;
    left: 20%;
    top: 55%;
    font-family: TelmaLight;
    font-weight: 300;
    font-size: 100px;
    line-height: 100.3%;
    letter-spacing: 0.01em;

}
#blur {
    visibility: hidden;
    position: absolute;
    width:800 ;
    height: 400;
    left:50%;
    top:97%;
    transform: translate(-50%, -50%);
}
#info {
    font-family: InterLight;
    visibility: hidden;
    position: absolute;
    text-align: center;
    left:50%;
    top:95%;
    transform: translate(-50%, -50%);
    font-weight: 300;
    font-size: 27px;
    line-height: 106.3%;
    letter-spacing: -0.07em;
    color: #555555;

}
#rect {
    visibility: hidden;
    position: absolute;
    width: 500px;
    height: 500px;
    top: 70%;

}
.past {
    position: fixed;
    width: 109.62px;
    height: 57.78px;
    left: 2%;
    top: 70%;
    z-index: 5;
}
.past:hover {
    animation: spin 1s;
}
    @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
    }