Skip to content
Snippets Groups Projects
Commit db99345a authored by ea654's avatar ea654
Browse files

Replace style.css

parent 85a39bff
No related branches found
No related tags found
No related merge requests found
...@@ -26,7 +26,7 @@ body { ...@@ -26,7 +26,7 @@ body {
font-size: 32px; font-size: 32px;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: bold;
filter: drop-shadow(0 0 5px #09001d); filter: drop-shadow(0 0 5px #09001d);
} }
...@@ -34,7 +34,7 @@ body { ...@@ -34,7 +34,7 @@ body {
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: bold;
margin-left: 35px; margin-left: 35px;
} }
...@@ -67,15 +67,17 @@ body { ...@@ -67,15 +67,17 @@ body {
.home-content h1 { .home-content h1 {
font-size: 85px; font-size: 85px;
font-weight: 700; font-weight: bold;
text-shadow: 0 0 10px rgba(0, 0, 0, .3); text-shadow: 0 0 10px rgba(0, 0, 0, .3);
margin-bottom: 20px;
} }
.home-content p { .home-content p {
font-weight: bold;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
text-shadow: 0 0 10px rgba(0, 0, 0, .3); text-shadow: 0 0 10px rgba(0, 0, 0, .3);
margin-bottom: 30px; margin-bottom: 20px;
} }
.home-content .start-button { .home-content .start-button {
...@@ -92,6 +94,7 @@ body { ...@@ -92,6 +94,7 @@ body {
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: .5s; transition: .5s;
margin-top: 40px;
} }
.home-content .start-button:hover { .home-content .start-button:hover {
...@@ -104,27 +107,38 @@ body { ...@@ -104,27 +107,38 @@ body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100vw;
height: 100vh; height: 100vh;
text-align: center; text-align: center;
margin: 0;
padding-top: 200px; padding-top: 200px;
padding-left: 200px;
} }
#question { #question {
font-size: 36px;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
font-size: 28px; font-size: 28px;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 80%;
line-height: 1.5; line-height: 1.5;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); text-align: center;
width: auto;
} }
#options { #options {
font-size: 18px;
font-weight: bold;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
gap: 15px; gap: 15px;
width: 80%; width: auto;
text-align: center;
} }
#options button { #options button {
padding: 10px 20px; padding: 10px 20px;
font-size: 18px; font-size: 18px;
...@@ -134,6 +148,8 @@ body { ...@@ -134,6 +148,8 @@ body {
background-color: blue; background-color: blue;
color: white; color: white;
transition: background-color 0.3s; transition: background-color 0.3s;
min-width: 600px;
text-align: center;
} }
#options button:hover { #options button:hover {
...@@ -143,8 +159,9 @@ body { ...@@ -143,8 +159,9 @@ body {
#score { #score {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; left: 20px;
font-size: 18px; font-size: 36px;
font-weight: bold;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
color: #fff; color: #fff;
padding: 10px 15px; padding: 10px 15px;
...@@ -155,8 +172,9 @@ body { ...@@ -155,8 +172,9 @@ body {
#timer { #timer {
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 20px; right: 20px;
font-size: 18px; font-size: 36px;
font-weight: bold;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
color: #fff; color: #fff;
padding: 10px 15px; padding: 10px 15px;
...@@ -165,3 +183,91 @@ body { ...@@ -165,3 +183,91 @@ body {
z-index: 100; z-index: 100;
} }
#gameSettings label {
font-size: 18px;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: #fff;
padding: 40px;
border-radius: 10px;
text-align: center;
color: #000;
width: 400px;
max-width: 90%;
}
.modal-content input {
width: 100%;
margin: 10px 0;
padding: 8px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
.modal-content button {
padding: 10px 20px;
background: blue;
color: #fff;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
flex: 1;
margin: 0 10px;
}
.modal-content button:hover {
background: darkblue;
}
.modal-content h2 {
margin-bottom: 20px;
}
#roomCreatedModal .modal-content {
background: #fff;
padding: 40px;
border-radius: 10px;
text-align: center;
color: #000;
width: 400px;
max-width: 90%;
}
#roomCreatedModal .modal-content h2 {
margin-bottom: 30px;
}
#roomCodeDisplay {
font-size: 18px;
margin-bottom: 30px;
}
#roomCreatedContinueButton {
padding: 10px 20px;
background: blue;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#roomCreatedContinueButton:hover {
background: darkblue;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment