init commit

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