#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.solid:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
nav {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1rem;
border-bottom: 1px solid #333;
}
nav a {
text-decoration: none;
color: #646cff;
font-weight: 500;
transition: color 0.2s;
}
nav a:hover {
color: #535bf2;
}
nav a.active {
color: #61dafb;
text-decoration: underline;
border-bottom: 2px solid #61dafb;
}
.locale-switcher {
padding: 0.5rem 1rem;
border-radius: 8px;
border: 2px solid #646cff;
background-color: #242424;
color: white;
cursor: pointer;
font-size: 1rem;
outline: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 1rem;
padding-right: 2.5rem;
}
.locale-switcher:hover {
border-color: #61dafb;
box-shadow: 0 0 10px rgba(97, 218, 251, 0.3);
}
.locale-switcher:focus {
border-color: #61dafb;
ring: 2px solid #61dafb;
}
.test-item div {
text-align: left;
line-height: 1.6;
}
.test-item code {
background: #2d2d2d;
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
.markdown-body {
text-align: left;
background: #242424;
padding: 1.5rem;
border-radius: 8px;
border: 1px solid #444;
}
.markdown-body h3 {
margin-top: 0;
border-bottom: 1px solid #444;
padding-bottom: 0.5rem;
}
.markdown-body p {
margin: 1rem 0;
}
.markdown-body strong {
color: #61dafb;
}
.markdown-body em {
color: #646cff;
}
.tests {
text-align: left;
max-width: 800px;
margin: 0 auto;
padding: 1rem;
background: #1a1a1a;
border-radius: 8px;
border: 1px solid #333;
}
.test-item {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #222;
}
.test-item:last-child {
border-bottom: none;
}
.test-item h3 {
color: #61dafb;
margin-bottom: 0.5rem;
}
