mirror of
https://github.com/FranP-code/Hangman-game-with-React.git
synced 2025-10-13 00:42:32 +00:00
128 lines
2.0 KiB
CSS
128 lines
2.0 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
header {
|
|
border-bottom: 1px solid #c8c8c8;
|
|
height: 10vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
header h1 {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: bold;
|
|
user-select: none;
|
|
margin: 0;
|
|
}
|
|
header h2 {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: bold;
|
|
user-select: none;
|
|
margin: 0;
|
|
color: #48a6fd;
|
|
margin-top: 0.5vh;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 2vh;
|
|
}
|
|
.app .column-2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hangman {
|
|
user-select: none;
|
|
}
|
|
.hangman img {
|
|
width: 20vw;
|
|
}
|
|
|
|
.puzzleWord {
|
|
font-family: "Rambla", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 50pt;
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 70vw;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.puzzleWord .letter {
|
|
width: 3vw;
|
|
height: 70pt;
|
|
margin-left: 2vw;
|
|
border-bottom: 5px solid #000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
.puzzleWord .counter {
|
|
font-size: 40pt;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
margin-left: 3vw;
|
|
}
|
|
|
|
.current-score {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: bold;
|
|
font-size: 18pt;
|
|
color: #58ff6b;
|
|
}
|
|
.current-score .text {
|
|
user-select: none;
|
|
}
|
|
|
|
.defeat, .victory {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 80pt;
|
|
background-color: rgba(0, 0, 0, 0.775);
|
|
user-select: none;
|
|
}
|
|
.defeat h1, .victory h1 {
|
|
padding: 5%;
|
|
background-color: rgba(0, 0, 0, 0.775);
|
|
}
|
|
|
|
.defeat {
|
|
color: #ff6363;
|
|
}
|
|
|
|
.victory {
|
|
color: #58ff6b;
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.loading img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
/*# sourceMappingURL=index.css.map */
|