|
|
|
@ -45,6 +45,12 @@ |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.logo-container { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
gap: 12px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.logo { |
|
|
|
.logo { |
|
|
|
font-size: 1.5rem; |
|
|
|
font-size: 1.5rem; |
|
|
|
font-weight: 700; |
|
|
|
font-weight: 700; |
|
|
|
@ -52,6 +58,17 @@ |
|
|
|
text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); |
|
|
|
text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.beta-pill { |
|
|
|
|
|
|
|
background: linear-gradient(45deg, #ff6b35, #f7931e); |
|
|
|
|
|
|
|
color: white; |
|
|
|
|
|
|
|
padding: 4px 8px; |
|
|
|
|
|
|
|
border-radius: 12px; |
|
|
|
|
|
|
|
font-size: 0.7rem; |
|
|
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
|
|
text-transform: uppercase; |
|
|
|
|
|
|
|
letter-spacing: 0.5px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nav-links { |
|
|
|
.nav-links { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
gap: 30px; |
|
|
|
gap: 30px; |
|
|
|
@ -812,7 +829,10 @@ |
|
|
|
<body> |
|
|
|
<body> |
|
|
|
<header> |
|
|
|
<header> |
|
|
|
<nav class="container"> |
|
|
|
<nav class="container"> |
|
|
|
<div class="logo">System Design Game</div> |
|
|
|
<div class="logo-container"> |
|
|
|
|
|
|
|
<div class="logo">System Design Game</div> |
|
|
|
|
|
|
|
<div class="beta-pill">BETA</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<ul class="nav-links"> |
|
|
|
<ul class="nav-links"> |
|
|
|
<li><a href="#problem">Problem</a></li> |
|
|
|
<li><a href="#problem">Problem</a></li> |
|
|
|
<li><a href="#solution">Solution</a></li> |
|
|
|
<li><a href="#solution">Solution</a></li> |
|
|
|
|
