body, html { background-color: #fff;  height: 100%; margin: 0; padding: 0; font-family: "Comfortaa", sans-serif; font-optical-sizing: auto; font-style: normal; }
.bgimg { min-height: 100%; position: relative; color: #000; font-size: 25px; }
.middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

.face-wrap { display: inline-block; margin-bottom: 20px; position: relative; }
.face-wrap span { display: none; position: absolute; bottom: 54px; text-align: center; left: 0; right: 0; font-size: 20px; z-index: 9; }
.face-wrap img { z-index: 10; }
.face-wrap:hover { cursor: pointer; }
.face-wrap:hover span { display: block; }
.text-wrap { margin-bottom: 20px; }
img.face { max-width: 100%; width: 300px; }
img.text { max-width: 100%; width: 500px; }
.text-wrap { position: relative; }
.text-wrap span { animation: zoom-in-zoom-out 10s ease-in-out infinite; position: absolute; top: 0%; left: 26%; font-size: 24px; display: block; cursor: pointer; color: #666; outline: none; text-decoration: none; }
.tooltip { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); background-color: #000; color: #fff; padding: 12px 20px; border-radius: 5px; opacity: 0; visibility: hidden; font-size: 12px; line-height: 18px; transition: all 0.3s ease; }
.tooltip-wrap:hover .tooltip { opacity: 1; visibility: visible; top: -160px; }

.about { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; background: #fff; }
.about > div { padding: 20px 40px; max-width: 600px; margin: 0 auto; }
.about > div h1, .about > div h2 { text-align: center; }
.about > div p, .about > div h2 { text-align: justify; }
.about::-webkit-scrollbar { width: 10px; }
.about::-webkit-scrollbar-track { background: #f1f1f1; }
.about::-webkit-scrollbar-thumb { background: #888; }
.about::-webkit-scrollbar-thumb:hover { background: #555; }

.email { color: #000; text-decoration: none; }

@media screen and (max-width: 400px) {
    .text-wrap span { font-size: 14px;  }
    .tooltip { left: 20%; transform: translateX(-30%); right: -20%; }
    .tooltip-wrap:hover .tooltip { top: -160px; }
}
@media screen and ((min-width: 401px) and (max-width: 800px)) {
    .text-wrap span { font-size: 16px; }
    .tooltip { left: 20%; transform: translateX(-30%); right: -20%; }
    .tooltip-wrap:hover .tooltip { top: -160px; }
}
@media screen and ((min-width: 801px) and (max-width: 1200px)) {
    .text-wrap span { font-size: 19px; }
    .tooltip { left: 30%; transform: translateX(-30%); }
    .tooltip-wrap:hover .tooltip { top: -160px; }
}

@keyframes zoom-in-zoom-out {
    0% { transform: scale(1, 1); color: #666; }
    4% { transform: scale(1, 1); color: #666; }
    5% { transform: scale(1.2, 1.2); color: #000; }
    6% { transform: scale(1, 1); color: #666; }
}

.close { position: fixed; top: 0; right: -10px; }
.gg-close { cursor: pointer; background-color: rgba(255,255,255,0.9); padding: 5px; box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 42px; height: 42px; border: 2px solid transparent; border-radius: 40px; }
.gg-close::after, .gg-close::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 36px; height: 2px; background: currentColor; transform: rotate(45deg); border-radius: 5px; top: 18px; left: 1px; }
.gg-close::after { transform: rotate(-45deg) }
.gg-close:hover::after { transform: rotate(0deg) }
.gg-close:hover::before { transform: rotate(90deg) }