76 lines
1.5 KiB
CSS
76 lines
1.5 KiB
CSS
body {
|
|
background: #eaf4f4;
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
color: #22223b;
|
|
}
|
|
h1 {
|
|
margin-top: 32px;
|
|
color: #23698f;
|
|
}
|
|
#score {
|
|
font-size: 1.18em;
|
|
margin-bottom: 10px;
|
|
color: #23698f;
|
|
}
|
|
#game {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 45px;
|
|
margin: 30px auto 30px auto;
|
|
}
|
|
.flags, .countries {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
.flag, .country {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 1px 6px #bbb;
|
|
padding: 8px 12px;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
transition: background .21s, box-shadow .18s;
|
|
border: 2px solid #f4f9fa;
|
|
outline: none;
|
|
}
|
|
.flag.selected, .country.selected {
|
|
background: #82cfff;
|
|
border-color: #23698f;
|
|
box-shadow: 0 0 0 2px #23698f;
|
|
}
|
|
.flag.matched, .country.matched {
|
|
background: #b4f7ab;
|
|
color: #333;
|
|
border-color: #3fb950;
|
|
cursor: default;
|
|
box-shadow: 0 0 0 2px #3fb950;
|
|
}
|
|
#restart-btn {
|
|
background: #23698f;
|
|
color: #fff;
|
|
font-size: 1em;
|
|
border: none;
|
|
border-radius: 7px;
|
|
padding: 8px 30px;
|
|
cursor: pointer;
|
|
margin-bottom: 12px;
|
|
transition: background .18s;
|
|
}
|
|
#restart-btn:hover {
|
|
background: #031c34;
|
|
}
|
|
#status {
|
|
font-size: 1.12em;
|
|
min-height: 2em;
|
|
color: #23698f;
|
|
margin-bottom: 10px;
|
|
}
|
|
@media (max-width: 850px) {
|
|
#game { flex-direction: column; gap: 32px;}
|
|
.flags, .countries { grid-template-columns: repeat(2,1fr);}
|
|
}
|
|
@media (max-width: 520px) {
|
|
.flags, .countries { grid-template-columns: 1fr;}
|
|
} |