@font-face { font-family: 'CustomFont'; src: url('../fonts/font.ttf') format('truetype'); font-weight: normal; font-style: normal; }
body, html { height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; text-align: center; background-size: cover; background-position: center; }
.content { padding: 10px; border-radius: 10px; width: 80%; margin-bottom: 40%; }
.verse { order: 0; font-size: 2.5rem; margin-top: 5vh; font-family: 'CustomFont', sans-serif; word-spacing: 0.2rem; color: white; text-shadow: 1px 1px 0 #000,  -1px -1px 0 #000,  1px -1px 0 #000,  -1px 1px 0 #000,  1px 1px 0 #000; }
.audio-button { order: 1; position: absolute; bottom: 350px; left: 50%; transform: translateX(-50%); background-image: url("../images/play-button.png"); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; cursor: pointer; margin-top: 1rem; align-self: flex-end;  background-color: transparent; border: none; outline: none; }
.audio-button.play { background-image: url("../images/pause-button.png"); }
.audio-button:focus { outline: none; }
.audio-button:hover { opacity: 0.8; }
.reference { font-size: 3rem; height: auto; font-weight: bold; font-family: 'CustomFont', sans-serif; margin: 2rem auto; text-align: center; color: white; text-shadow:
 1px 1px 0 #000,  -1px -1px 0 #000,  1px -1px 0 #000,  -1px 1px 0 #000,  1px 1px 0 #000; }
.verse-container { display: flex; flex-direction: column; align-items: center; }
.social-media-links { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.0); padding: 5px; width: 100%; text-align: center; border: none; outline: none; }
.social-link { display: inline-block; margin: 0 5px; color: #333; font-size: 1px;}
.social-link img { width: 24px; height: 24px; }
.logo { display: block; margin: 0 auto; width: 100px; height: auto; margin-bottom: 10px; }
#languageSelect { position: absolute; top: 20px; right: 20px; z-index: 10; padding: 5px; border: 1px solid #FFF; border-radius: 4px; font-size: 14px; }
#languageSelect a { color:#FFF; }

@media (max-width: 768px) {
.audio-button { bottom: 200px; width: 100px; height: 100px; margin-top: 0.5rem; }
.verse { font-size: 1.8rem; margin-top: 2vh; word-spacing: 0.1rem; }
.reference { font-size: 2.5rem; margin: 1.5rem auto; }
.social-link img { width: 20px; height: 20px; }
.social-media-links { padding: 4px; }
.social-link { font-size: 18px; margin: 0 4px; }
.logo { width: 100px; margin-bottom: 8px; }
#languageSelect {top: 20px;right: 20px;}
}
@media (max-width: 480px) {
.audio-button { bottom: 90px;  width: 75px; height: 75px; margin-top: 0.25rem; }
#languageSelect {top: 25px;right: 15px;}
.verse { font-size: 1.5rem; margin-top: 1vh; word-spacing: 0.05em; }
.reference { font-size: 2rem; margin: 1rem auto; }
.social-link img { width: 18px; height: 18px; }
.social-media-links { padding: 0px; }
.social-link { font-size: 16px;  margin: 0 3px; }
.logo { width: 60px;  margin-bottom: 6px; }
}