footer {
    background-color: #222;
}
footer p {
    padding: 15px 0;
    color: white;
}

#page-top {
	position: fixed;
	right: 10px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);
    a{
        display: flex;
        justify-content:center;
        align-items:center;
        background:#27373F;
        border-radius: 5px;
        width: 60px;
        height: 50px;
        color: #fff;
        text-align: center;
        text-transform: uppercase; 
        text-decoration: none;
        font-size:12px;
        transition:all 0.3s;
        &:hover{
            background: #777;
        }
    }
}



#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}

@media (max-width: 768px){
    footer p {
        font-size: 10px;
    }
}



@keyframes UpAnime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes DownAnime{
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(100px);
    }
}