main.css

html {
    height: 100%;
    background-color: blanchedalmond;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    text-align: center;
}

.yuhi {
    animation:2s linear infinite rotationZ;
}

.profile {
    position: absolute;
    height: 100%;
    width: 100%;
}

.contents {
    position: absolute;
    width: 80%;
    height: 80%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background: rgb(255,255,255,0.5);
}
.contents .text{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.menu {
    position: absolute;
    bottom: 0px;
}

.menu > ul {
    list-style: none;
    padding: 0;
    font-size: large;
}

.menu > ul > li {
    display: inline-block;
}

.menu > ul > li:hover {
    animation: colorHover .2s ease-out forwards;
}

li + li {
    margin-left: 8px;
}

li > a {
    color: black;
    text-decoration: none;
}

@keyframes rotationY {
    0%{ transform:rotateY(0); }
    100%{ transform:rotateY(360deg); }
}

@keyframes rotationX {
    0%{ transform:rotateX(0); }
    100%{ transform:rotateX(360deg); }
}

@keyframes rotationZ {
    0%{ transform:rotateZ(0); }
    100%{ transform:rotateZ(360deg); }
}

@keyframes colorHover {
    0%{ transform: translateY(0px); }
    100%{ transform: translateY(-5px); }
}