/* html, body { margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
#menu { position: fixed; top: 0; left: 0; width: 100%; background-color: #45596b; color: white; overflow: hidden; transition: height 0.3s ease; cursor: pointer; z-index: 1000; }
#menuTitle { background-color: #45596b; padding: 1rem; text-align: center; }
#menu ul { list-style: none; margin: 0; padding: 0 0 1rem 0; text-align: center; }
#menu li { margin: 0.3rem 0; }
#menu li a { color: white; text-decoration: none; padding: 0.5rem 1rem; display: inline-block; transition: background-color 0.2s ease; }
#menu li a:hover { background-color: #555; }
.menu-closed { height: 2.5rem; }
.menu-open { height: auto; }
#generalButtons { margin-top: 2.5rem; padding: 1rem 0; text-align: center; background-color: #f0f0f0; }
#generalButtons button { margin: 0 0.5rem; padding: 0.5rem 1rem; border: none; font-weight: bold; cursor: pointer; transition: opacity 0.2s ease; }
#saveBtn { background-color: #4CAF50; color: #fff; }
#resetBtn { background-color: #F48FB1; color: #fff; }
#playBtn { background-color: #2196F3; color: #fff; }
#generalButtons button:hover { opacity: 0.8; }
#content { width: 100%; padding: 1rem; box-sizing: border-box; }
.phrase-row { display: flex; align-items: center; justify-content: space-between; background-color: #f5f5f5; border: 1px solid #ccc; padding: 0.5rem; margin: 0.5rem 0; border-radius: 4px; transition: all 0.3s ease; }
.phrase-text { cursor: pointer; flex: 1; margin-right: 1rem; }
.known-btn { background-color: #4CAF50; color: #fff; border: none; padding: 0.5rem 1rem; font-weight: bold; cursor: pointer; transition: opacity 0.2s ease; }
.known-btn:hover { opacity: 0.8; }
.hidden-row { opacity: 0; max-height: 0; padding: 0; margin: 0; border: none; overflow: hidden; }
 */
html, body { margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
#menu { position: fixed; top: 0; left: 0; width: 100%; background-color: #45596b; color: white; overflow: hidden; transition: height 0.3s ease; cursor: pointer; z-index: 1000; }
#menuTitle { background-color: #45596b; padding: 1rem; text-align: center; }
#menu ul { list-style: none; margin: 0; padding: 0 0 1rem 0; text-align: center; }
#menu li { margin: 0.3rem 0; }
#menu li a { color: white; text-decoration: none; padding: 0.5rem 1rem; display: inline-block; transition: background-color 0.2s ease; }
#menu li a:hover { background-color: #555; }
.menu-closed { height: 2.5rem; }
.menu-open { height: auto; }
#generalButtons { margin-top: 2.5rem; padding: 1rem 0; text-align: center; background-color: #f0f0f0; }
#generalButtons button { margin: 0 0.5rem; padding: 0.5rem 1rem; border: none; font-weight: bold; cursor: pointer; transition: opacity 0.2s ease; }
#saveBtn { background-color: #4CAF50; color: #fff; }
#resetBtn { background-color: #F48FB1; color: #fff; }
#playBtn { background-color: #2196F3; color: #fff; }
#install-button { background-color: red; color: #fff; margin-left: 0.5rem; }
#generalButtons button:hover { opacity: 0.8; }
#content { width: 100%; padding: 1rem; box-sizing: border-box; }
.phrase-row { display: flex; align-items: center; justify-content: space-between; background-color: #f5f5f5; border: 1px solid #ccc; padding: 0.5rem; margin: 0.5rem 0; border-radius: 4px; transition: all 0.3s ease; }
.phrase-text { cursor: pointer; flex: 1; margin-right: 1rem; }
.known-btn { background-color: #4CAF50; color: #fff; border: none; padding: 0.5rem 1rem; font-weight: bold; cursor: pointer; transition: opacity 0.2s ease; }
.known-btn:hover { opacity: 0.8; }
.hidden-row { opacity: 0; max-height: 0; padding: 0; margin: 0; border: none; overflow: hidden; }