body, html { height: 100%; margin: 0; overflow: hidden; } #main{ display: flex; justify-content: center; align-items: center; flex-direction: column; } body { display: flex; justify-content: center; align-items: center; } .logo img { transition: transform 0.5s ease-in-out; } #text { opacity: 0; transition: opacity 0.5s ease-in-out; display: flex; justify-content: center; align-items: center; width: 50vw; } #main:hover .logo img { transform: scale(1.5) rotate(360deg); /* Adjust the scale factor as needed */ } #main:hover #text { opacity: 1; } body, html{ font-family: CustomFont, sans-serif; /* Use the custom font as the fallback */ } @font-face { font-family: CustomFont; src: url('static/fonts/c1-kenangan.regular.otf') format('truetype'); /* Change 'your-font.ttf' to the actual font file name */ }