diff options
Diffstat (limited to 'styles.css')
| -rw-r--r-- | styles.css | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..11a7543 --- /dev/null +++ b/styles.css @@ -0,0 +1,132 @@ +/* Main */ +:root { + /*--clr-neon: hsl(317 100% 54%);*/ + --clr-neon: hsl(189 100% 51%); + --clr-bg: hsl(323 21% 16%); + } + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + min-height: 100vh !important; + background: var(--clr-bg); + font-family: 'Cormorant SC', serif !important; +} + +/* Media Queries*/ +@media only screen and (max-width: 1080px) { + #intro{ + margin-bottom: 25vh; + } +} + +@media only screen and (min-width: 1080px) { + #intro{ + height: 100vh !important; + max-height: 100vh !important; + } +} + + +#juhend{ + font-family: 'Kanit', sans-serif; + font-size: larger !important; +} + +@media only screen and (max-width: 560px) { + #juhend{ + margin-bottom: 10%; + } +} + +@media only screen and (min-width: 1080px) { + #juhend{ + height: 100vh !important; + } +} + + + +/* Starting button */ +.rannakuNupp{ + height: 80vh; +} + +.neon-button-wrapper { + display: grid; + place-items: center; + font-family: "Balsamiq Sans", cursive; + color: var(--clr-neon); +} +.neon-button { + font-size: 3rem; + + display: inline-block; + cursor: pointer; + text-decoration: none; + color: var(--clr-neon); + border: var(--clr-neon) 0.125em solid; + padding: 0.25em 1em; + border-radius: 0.25em; + + text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor; + + box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon); + + position: relative; +} + +.neon-button::before { + pointer-events: none; + content: ""; + position: absolute; + background: var(--clr-neon); + top: 120%; + left: 0; + width: 100%; + height: 100%; + + transform: perspective(1em) rotateX(40deg) scale(1, 0.35); + filter: blur(1em); + opacity: 0.7; +} + +.neon-button::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + box-shadow: 0 0 2em 0.5em var(--clr-neon); + opacity: 0; + background-color: var(--clr-neon); + z-index: -1; + transition: opacity 100ms linear; +} + +.neon-button:hover, +.neon-button:focus { + color: var(--clr-bg); + text-shadow: none; +} + +.neon-button:hover::before, +.neon-button:focus::before { + opacity: 1; +} +.neon-button:hover::after, +.neon-button:focus::after { + opacity: 1; +} + +/* Accordion */ +.accordion-item, .accordion-header, .accordion-button{ + background-color: transparent !important; + border: none !important; + text-decoration: none !important; +}
\ No newline at end of file |