@font-face {
font-family: Oswald;
src: url('oswald-v47-latin-400.woff2');
}
@font-face {
font-family: Roboto;
src: url('roboto-v30-latin-regular.woff2');
}
@font-face {
font-family: Roboto;
font-weight: bold;
src: url('roboto-v30-latin-700.woff2');
}
/* big picture */
* {
padding: 0;
border: 0;
margin: 0;
outline: none;
font-family: Roboto;
font-size: 20px;
color: #832525;
border-style: solid;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column-reverse;
width: 564px;
margin: 0 auto;
background: #BB9;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
aside {
margin: 50px 12px 20px;
text-align: center;
}
aside * {
color: #222;
line-height: 28px;
}
main {
height: 731px;
border-width: 2px;
background: #FFF5D7;
user-select: none;
}
table {
border-collapse: collapse;
}
select {
width: 260px;
height: 56px;
background: #FFF;
padding-left: 10px;
border-width: 1px;
border-radius: 3px;
cursor: pointer;
}
option {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell;
}
/* elements inside 'aside' */
#volatile {
margin: 200px 0 120px;
}
#volatile p {
text-align: justify;
}
#volatile div {
margin: 8px 0;
padding: 6px 10px;
background: #FFF5D7;
border: 2px solid #832525;
border-radius: 8px;
}
/* hangman skeleton */
#tph {
background: #F4C47B no-repeat 8px 8px / 120px url('hangman-lettering.svg');
height: 81px;
}
#tph div {
position: relative;
left: 208px;
top: 18px;
width: fit-content;
display: flex;
}
#tph p {
width: 110px;
font-family: Oswald;
font-size: 23px;
line-height: 64px;
text-align: center;
cursor: pointer;
border-radius: 15px 15px 0 0;
}
.tph-r {
filter: brightness(1.4) saturate(1.4);
transition: all 160ms ease-in-out;
}
.tph-a {
background: #FFF5D7;
}
#game, #highscore {
padding: 15px 10px;
}
/* commonly used classes */
.btn-n, .btn-r, .btn-p {
text-align: center;
color: #FFF;
border-width: 1px;
cursor: pointer;
text-shadow: 0 0 3px #333;
}
.btn-n { background: #689EC5; border-color: #FFF #000 #000 #FFF; }
.btn-r { background: #7FBEEF; border-color: #FFF #000 #000 #FFF; transition: all 120ms ease-in-out; }
.btn-p { background: #466984; border-color: #000 #FFF #FFF #000; }
/* particular elements */
#rules {
text-align: justify;
line-height: 32px;
padding: 35px 50px;
}
#rules img {
float: right;
width: 200px;
margin-top: 30px;
filter: drop-shadow(3px 3px 2px rgba(0,0,0,.4));
}
#ngb {
float: right;
width: 260px;
font-size: 22px;
line-height: 54px;
}
#details {
display: flex;
flex-wrap: wrap;
gap: 25px 40px;
width: 310px;
margin: 40px 0 0 20px;
text-align: center;
}
#details > * {
flex: 1;
}
#details p {
margin: 4px 0 15px;
font-size: 25px;
font-weight: bold;
line-height: 40px;
background: #FFFAC3;
box-shadow: #832525 0 0 4px;
border-radius: 8px;
}
#catname, #wordstatus {
flex: 100%;
}
.word-solved { color: #282; }
.word-not-solved { color: #D22; }
#progress {
float: right;
width: 120px;
height: 200px;
margin: 34px 20px 30px;
background: url('0_gallows.webp') no-repeat;
}
#sol-pane {
clear: right;
width: fit-content;
margin: 0 auto 23px;
}
#sol-pane p {
display: inline-block;
margin: 0 1px;
width: 24px;
line-height: 30px;
font-weight: bold;
text-align: center;
border-width: 0 0 1px;
border-radius: 8px;
background: #FFFAC3;
box-shadow: #832525 0 0 4px;
}
.spc { visibility: hidden; }
#chr-pane {
margin: 0 5px;
display: flex;
flex-flow: wrap;
gap: 6px;
}
#chr-pane p {
width: 61px;
line-height: 54px;
font-size: 26px;
}
p#ntb { width: 396px; }
#hs-pane {
width: 100%;
line-height: 44px;
margin: 25px 0 0;
}
.hs-col1 { text-align: right; width: 0; padding-left: 10px; }
.hs-col2 { padding-left: 12px; }
.hs-col3 { text-align: right; width: 0; }
.hs-col4 { text-align: right; width: 180px; padding-right: 10px; }
.highlight {
animation: highlight-anim .6s linear infinite;
}
@keyframes highlight-anim {
50% { filter: brightness(1.8) saturate(1.5); }
}
/* dialogues */
#game-ask-ng, #highscore-submit {
text-align: center;
font-size: 22px;
margin: 60px 20px 0;
}
#game-ask-ng p, #highscore-submit p {
width: 280px;
font-size: 25px;
line-height: 60px;
margin: 25px auto 0;
}
input {
display: block;
width: 320px;
height: 44px;
margin: 20px auto 40px;
text-align: center;
font-size: 25px;
color: #000;
border: 2px solid #C44;
border-radius: 8px;
}
input::selection {
color: #FFF;
background: #C44;
}
/* media */
@media (min-width: 640px) {
aside * { font-size: 18px; }
#volatile { margin-top: 40px; }
main { box-shadow: 0 0 15px #333; }
}