File size: 3,555 Bytes
1029d6c dbdfa02 1029d6c dbdfa02 1029d6c dbdfa02 1029d6c dbdfa02 1029d6c dbdfa02 1029d6c dbdfa02 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
body {
font-family: 'Lilita One', cursive;
display: flex;
justify-content: center;
align-items: flex-start;
background-color: #c8e6c9; /* Light green background */
color: #388e3c; /* Darker green */
padding: 20px;
margin: 0;
min-height: 100vh;
}
#game-wrapper {
background-color: #fffde7; /* Light yellow */
padding: 20px 30px;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
border: 5px solid #795548; /* Brown border */
max-width: 700px;
width: 95%;
text-align: center;
}
h1 {
color: #fb8c00; /* Orange */
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
}
#score-area {
font-size: 1.2em;
font-weight: bold;
color: #1e88e5; /* Blue */
background-color: #e3f2fd; /* Light blue */
padding: 5px 15px;
border-radius: 10px;
display: inline-block;
margin-bottom: 20px;
border: 2px solid #90caf9; /* Lighter blue border */
}
#problem-area {
background-color: #ffecb3; /* Light amber */
border: 3px dashed #ff8f00; /* Amber dashed border */
padding: 15px;
border-radius: 15px;
margin-bottom: 20px;
}
#problem-area h2 {
margin-top: 0;
margin-bottom: 5px;
color: #795548; /* Brown */
}
#problem-area p {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.1em;
}
#multiplication-problem {
font-size: 2.8em; /* Large problem display */
font-weight: bold;
color: #e53935; /* Red */
}
#feedback-area {
margin-bottom: 25px;
font-size: 1.1em;
font-weight: bold;
color: #5d4037; /* Brown */
min-height: 30px;
padding: 10px;
border-radius: 8px;
background-color: #efebe9; /* Light brown/grey */
}
#feedback-area.correct-feedback {
color: #2e7d32; /* Dark Green */
background-color: #c8e6c9; /* Light Green */
}
#feedback-area.incorrect-feedback {
color: #c62828; /* Dark Red */
background-color: #ffcdd2; /* Light Red */
}
#farm-options-area h2 {
color: #795548; /* Brown */
margin-bottom: 15px;
}
#field-choices {
display: flex;
justify-content: space-around;
align-items: flex-start; /* Align tops of potentially diff height grids */
flex-wrap: wrap;
gap: 25px; /* Space between plot options */
}
.field-option {
cursor: pointer;
border: 4px solid #a1887f; /* Brownish border */
background-color: #d7ccc8; /* Light background for field */
padding: 10px;
border-radius: 8px;
transition: border-color 0.2s ease, transform 0.2s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
/* CSS Grid for items inside */
display: grid;
gap: 4px; /* Space between items */
/* grid-template-columns/rows set by JS */
}
.field-option:hover {
border-color: #fb8c00; /* Orange hover border */
transform: translateY(-3px);
}
.field-option .item {
font-size: 1.8em; /* Size of the emoji/item */
line-height: 1; /* Prevent extra vertical space */
display: flex;
justify-content: center;
align-items: center;
}
/* Feedback Animations */
.field-option.correct-choice {
border-color: #4caf50 !important; /* Green border */
animation: pulse 0.6s;
}
.field-option.incorrect-choice {
border-color: #f44336 !important; /* Red border */
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
} |