testing
1,847 bytes View directory
1
@import '@fontsource/fira-mono';3
:root {4
--font-body:5
Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,6
'Open Sans', 'Helvetica Neue', sans-serif;7
--font-mono: 'Fira Mono', monospace;8
--color-bg-0: rgb(202, 216, 228);9
--color-bg-1: hsl(209, 36%, 86%);10
--color-bg-2: hsl(224, 44%, 95%);11
--color-theme-1: #ff3e00;12
--color-theme-2: #4075a6;13
--color-text: rgba(0, 0, 0, 0.7);14
--column-width: 42rem;15
--column-margin-top: 4rem;16
font-family: var(--font-body);17
color: var(--color-text);18
}20
body {21
min-height: 100vh;22
margin: 0;23
background-attachment: fixed;24
background-color: var(--color-bg-1);25
background-size: 100vw 100vh;26
background-image:27
radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%),28
linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);29
}31
h1,32
h2,33
p {34
font-weight: 400;35
}37
p {38
line-height: 1.5;39
}41
a {42
color: var(--color-theme-1);43
text-decoration: none;44
}46
a:hover {47
text-decoration: underline;48
}50
h1 {51
font-size: 2rem;52
text-align: center;53
}55
h2 {56
font-size: 1rem;57
}59
pre {60
font-size: 16px;61
font-family: var(--font-mono);62
background-color: rgba(255, 255, 255, 0.45);63
border-radius: 3px;64
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);65
padding: 0.5em;66
overflow-x: auto;67
color: var(--color-text);68
}70
.text-column {71
display: flex;72
max-width: 48rem;73
flex: 0.6;74
flex-direction: column;75
justify-content: center;76
margin: 0 auto;77
}79
input,80
button {81
font-size: inherit;82
font-family: inherit;83
}85
button:focus:not(:focus-visible) {86
outline: none;87
}89
@media (min-width: 720px) {90
h1 {91
font-size: 2.4rem;92
}93
}95
.visually-hidden {96
border: 0;97
clip: rect(0 0 0 0);98
height: auto;99
margin: 0;100
overflow: hidden;101
padding: 0;102
position: absolute;103
width: 1px;104
white-space: nowrap;105
}