body { margin: 0; background-color: #6189d9; font-family: 'Redaction-Regular'; } #textContainer { display: flex; justify-content: center; align-items: center; height: 80vh; position: relative; margin-top: 20px; } .card { position: absolute; background-color: #f9b0c5; color: #1E33FAff; font-size: 20px; border: 1px solid #1E33FAff; border-radius: 5px; width: 300px; height: 560px; padding: 20px; transition: 0.25s; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 0; margin-top: 150px; } .card.top { z-index: 10; } .card.behind { z-index: 5; margin-left: 60px; } #text2 { transform: translate(-5px, -5px); } #text3 { transform: translate(-10px, -10px); } #text4 { transform: translate(-15px, -15px); } #text5 { transform: translate(-20px, -20px); } #home { position: absolute; bottom: 40px; left: 40px; width: 100px; height: auto; opacity: 1; } #home:hover { cursor: pointer; } .letterBox { font-size: 18px; padding: 20px; margin: auto; margin-top: 150px; overflow: hidden; background-color: #adc4f0; border: 1px solid #1E33FAff; color: #1E33FAff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: right; max-width: 70%; z-index: 1000; } .letterContents { width: 90%; position: relative; } #closeButton { cursor: pointer; } #about { position: absolute; bottom: 26px; left: 70px; width: 80px; height: auto; opacity: 1; } #about:hover { color: #e26d3f; cursor: pointer; } #mute-btn { color: #1E33FAff; font-family: 'Redaction-Regular', serif; font-weight: bold; font-size: 20px; position: fixed; padding: 25px; right: 5px; top: 5px; text-align: center; cursor: pointer; border: none; background: transparent; } #mute-btn:hover { color:#FCF6F1ff; background-color:#1E33FAff; border-radius: 30px; } #message-div { position: fixed; top: 50%; left: 50%; width: 50%; transform: translate(-50%, -50%); text-align: center; padding: 20px; border-radius: 10px; display: none; z-index: 1000; animation: details-show 2s; color: white; font-family: 'Redaction_35-Regular'; font-size: 25px; text-decoration: none; } #message-div a, #message-div button { text-decoration: none; color: #1E33FAff; background: transparent; border: none; font-family: 'Redaction_35-Regular'; font-size: 25px; cursor: pointer; transition: background-color 0.25s, color 0.25s; } @media only screen and (max-width: 767px) { body { font-size: 13px; } #about { position: relative; top: 10px; left: 40px; width: 70px; height: auto; z-index: 1000; opacity: 1; } #home { position: absolute; top: 20px; left: 20px; width: 70px; height: auto; opacity: 1; } .card { position: absolute; background-color: #f9b0c5; color: #1E33FAff; font-size: 20px; border: 1px solid #1E33FAff; border-radius: 5px; width: 300px; height: 560px; padding: 20px; transition: 0.25s; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 0; margin-top: 10px; margin-left: 30px; margin-right: 30px; } .letterBox { font-size: 18px; padding: 20px; margin-left: 30px; margin-right: 30px; border-radius: 5px; overflow: hidden; background-color: #adc4f0; border: 1px solid #1E33FAff; color: #1E33FAff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: right; max-width: 100%; margin-top: 150px; z-index: 1000; } #message-div { font-size: 20px; } #message-div a, #message-div button { font-size: 20px; } }