diff --git a/src/style.css b/src/style.css index 82da0e6..34fa999 100644 --- a/src/style.css +++ b/src/style.css @@ -2,25 +2,22 @@ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; - color: var(--text-color); - - font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - --link-color: oklch(68% 0.1707 0); - --text-color: black; + --link-color: oklch(68% .1707 0); + --text-color: black } body, html { - block-size: 100svb; - inline-size: 100svi; + inline-size: 100%; + block-size: 100%; margin: 0; padding: 0; - overflow: hidden; + overflow: hidden } #app { @@ -28,34 +25,36 @@ html { block-size: 100%; display: flex; margin: 0; + padding: 0; + position: relative; align-items: center; justify-content: center; flex-direction: column; - overflow: hidden; + overflow: hidden } h1 { font-size: 1.5rem; - margin-block: 0.5rem; + margin-block: .5rem } p { font-size: 1.5rem; margin: 0; text-align: justify; - inline-size: 100%; + inline-size: 100% } a { color: var(--link-color); text-decoration: none; - transition: 0.2s text-shadow, 0.2s transform; - display: inline-block; + transition: .2s text-shadow, .2s transform; + display: inline-block +} - &:hover { - text-shadow: 0rem 0rem 1rem var(--link-color); - transform: rotateZ(-3deg); - } +a:hover { + text-shadow: 0rem 0rem 1rem var(--link-color); + transform: rotate(-3deg) } img { @@ -63,18 +62,16 @@ img { position: absolute; inline-size: 10%; z-index: -1; - min-inline-size: 10rem; + min-inline-size: 10rem } .text { display: flex; flex-direction: column; align-items: center; - background: white; + background: #fff; border: 1px solid black; - box-shadow: 0rem 0rem 1.5rem white; - /* box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2); */ - /* border-radius: 0.5rem; */ - padding: 0.8rem 1.6rem; - inline-size: clamp(20rem, 30%, 40rem); + box-shadow: 0 0 1.5rem #fff; + padding: .8rem 1.6rem; + inline-size: clamp(20rem, 30%, 40rem) }