label {
display: block;
margin-bottom: 10px;
font-weight: bold;
margin-top: 10px;
}
button.play-button[data-audio="myAudio2"] {
background-color: white;
}
#finishButton {
padding: 10px 20px;
background-color: #3498db; color: #fff; border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
} #finishButton:hover {
background-color: #2980b9; } #finishButton + br {
display: block; margin-top: 10px; }
.progress {
height: 20px;
background-color: #f1f1f1;
border-radius: 5px;
margin-bottom: 5px;
}
.progress-bar {
height: 20px;
background-color: #4CAF50;
border-radius: 5px;
text-align: center;
line-height: 20px;
color: white;
}
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.active-tab {
color: green;
}
.trueorfalsecontainer {
display: flex;
justify-content: center;
align-items: center;
}
.truebutton {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.falsebutton {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.popup-content {
background-color: white;
border-radius: 5px;
margin: 15% auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border: 1px solid #888;
width: 300px;
height: 150px;
text-align: center;
position: relative;
max-height: 400px; overflow-y: auto; }
.popup-content h2 {
margin-top: 0px;
}
.popup-content button {
color: rgb(10, 9, 9);
font-style: normal;
font-size: large;
margin: 0 auto;
display: block;
width: auto;
height: auto;
}
.button {
margin-top: 10px;
display: inline-block;
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: gray;
background-color: transparent;
border-radius: 4px;
border: none;
cursor: pointer;
}
body {
font-family: Arial, sans-serif;
}
@viewport {
zoom: 1.75;
}
#audioWrapper {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
}
#audioWrapper audio {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.buttonplay {
width: 40px;
height: 40px;
border: none;
background-color: transparent;
font-size: 20px;
}
.dialog-container {
width: auto;
margin-top: 10px;
margin:auto;
}
.dialog-bubble {
background-color: rgb(255, 255, 255);
border-radius: 10px;
border: 1px solid lightgray;
cursor: pointer;
position: relative;
height: 60px;
width: auto;
display: flex;
text-align: left;
align-items: center;
justify-content: center;
padding: 20px;
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
}
@media only screen and (max-width: 468px) {
.dialog-bubble {
height: 80px;
}
}
.dialog-bubble strong {
color: #333;
}
.dialog-bubble:hover .tooltip {
visibility: visible;
opacity: 1;
}
.correct {
margin-top: 20px;
color: green;
font-weight: bold;
}
.wrong {
font-size: 12px;
margin-top: 20px;
color: red;
font-weight: bold;
}
.empty {
margin-top: 30px;
color: violet;
}
.circle {
width: 25px;
height: 25px;
background: violet;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
font-size: 14px;
font-weight: bold;
margin-top: 22px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-weight: bold;
}
.text-container {
white-space: nowrap;
}
h3, p {
display: inline-block;
margin-bottom: 5px;
margin-top: 10px;
}
.puzzle {
position: relative;
display: inline-block;
cursor: pointer;
font-size: 14px;
margin-top: 8px;
}
.tooltip {
visibility: hidden;
width: 420px;
height: 50px;
color: blueviolet;
background-color: white;
font-size: 14px;
text-align: center;
border-radius: 9px;
border: 1px solid rgb(206, 206, 206);
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
@media (max-width: 768px) {
.tooltip {
width: 380px;
}
}
@media (max-width: 468px) {
.tooltip {
width: 380px;
}
}
.puzzle:hover .tooltip {
visibility: visible;
}
.btn{
background-color: #fff;
border-color: #fff;
padding: 4px 10px;
margin-bottom: 2px;
box-shadow: none;
}
.boxapp {
background: linear-gradient(to bottom, #fffcfe, #f1f0f0);
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
padding: 10px;
text-align: center;
width: 720px;
height: 490px;
margin: auto;
}
@media (max-width: 768px) {
.boxapp {
padding: 15px;
max-width: 100%;
height: 505px;
margin: auto;
}
}
@media (max-width: 468px) {
.boxapp {
padding: 15px;
max-width: 100%; 
width: 340px;
height: 490px;
margin: auto;
}
}
@media (max-width: 375px) {
.boxapp {
padding: 3px;
max-width: 100%;
height: 505px;
margin: auto;
}
}
.tablinks {
padding: 10px;
background-color: gray;
cursor: pointer;
}
.active {
background-color: green;
}
.button {
margin-top: 5px;
}
.tab {
margin-left: auto;
margin-right: auto;
border-radius: 7px;
overflow: hidden;
height: 25;
margin-top: 10px;
margin-bottom: 15px;
}
.tab a {
background-color: #f7f4f4;
display: inline-block;
color: red;
text-align: center;
padding: 6px 14px;
text-decoration: none;
font-size: 12px;
border: none;
border-radius: 4px;
}
.tab a.active {
background-color: black;
color: rgb(134, 17, 160) 
}
.tabcontent {
color: gray;
display: none;
padding: 6px 12px;
border-top: none;
font-size: 16px;
margin-right: 60px;
margin-left: 60px;
width: auto;
}
@media (max-width: 768px) {
.tabcontent {
max-width: 100%;
margin-right: 3px;
margin-left: 3px;
}
}
@media (max-width: 468px) {
.tabcontent {
max-width: 100%;
margin-right: 3px;
margin-left: 3px;
}
}
button:active img {
filter: invert(100%);
}
#myButton {
background:transparent 
}
.custom-input {
background-color: rgb(255, 255, 255);
border-radius: 10px;
border: 1px solid lightgray;
cursor: pointer;
position: relative;
height: 40px;
width: 400px;
display: flex;
font-size: 12px;
align-items: center;
justify-content: center;
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 468px) {
.custom-input {
width: 100%;
}
}
.custom-input::placeholder {
color: gray;
}
.custom-input:hover::placeholder {
color: white;
}
.custom-input:focus::placeholder {
color: white;
}
.button2 {
background-color:blueviolet;
color: white;
margin-left: 0px;
padding: 10px 16px;
cursor: pointer;
border-radius: 9px;
border-color: transparent;
}