Remade the WordPress site in static HTML and CSS.

2024-11-21 20:01:59 +00:00 · 2023-09-21 22:44:54 +05:30 · 2023-09-21 22:44:54 +05:30 · 6cfdb74239
commit 6cfdb74239
11 changed files with 338 additions and 0 deletions
--- a/about.html
+++ b/about.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+  <head>
+    <title>About - Aiquiral</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="content/favicon.svg" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="line-top"></div>
+    <div class="main">
+      <div class="about">
+        <h1>About Me</h1>
+        &nbsp;
+        <p>Greetings! My name is Anuj Kaushik, also known as Aiquiral in the digital world. Originally from Chandigarh, India, I hold degrees in Bachelor of Computer Applications and Master of Science in Information Technology from GGDSD College, Chandigarh. My passion for music led me to start creating my own tracks in 2016. Since then, my single “This Place” has garnered over 5,000 plays on Spotify. As a freelancer, I now offer my expertise to help independent musicians with their branding, visual art, music videos, press kits and more, allowing them to focus on making music.</p>
+        <p>During my journey of learning about self-hosting, I became increasingly aware of the privacy issues in our society. As a result, I’ve been removing proprietary software, services and hardware from my life. On my blog, I share tutorials, guides and configurations for others looking to do the same.</p>
+        <p>I was born lacto-vegetarian, but after learning about the treatment of animals in the dairy industry, I became a vegan. This lifestyle change sparked my love for cooking, and I’ll soon be starting a recipe blog as my form of activism.</p>
+        <p>Thank you for stopping by, and I look forward to connecting with you.</p>
+        &nbsp;
+        <p><a href="https://aiquiral.me"><u>Back to home</u></a></p>
+      </div>
+    </div>
+    <noscript>
+      <img src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/pixel.gif">
+    </noscript>
+    <script defer src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/script.js"></script>
+    <div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> – <a href="https://git.aiquiral.me">Other Projects</a> – <img src="content/inline-logo.svg" style="position:relative;bottom:-3px" width=28 height=32></img> – <a href="privacy-policy.html">Privacy Policy</a> – <a href="about.html">About</a></p></div>
+    <div class="line-bottom"></div>
+  </body>
+</html>
--- a/contact.html
+++ b/contact.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+  <head>
+    <title>Contact - Aiquiral</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="content/favicon.svg" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="line-top"></div>
+    <div class="main">
+      <div class="about">
+      <h1>Contact</h1>
+      &nbsp;
+      <h3>Preferred Channels</h3>
+      <p>Email – hello [at] aiquiral [dot] me | PGP Public Key – ⁣<a href="content/publickey.hello@aiquiral.me-193666f26d6dd6ca5981a834b2f53944c5483f4d.asc" download target="_blank"><u>Download</u></a></p>
+      <p>Matrix – <a href="https://matrix.to/#/@@aiquiral:tchncs.de"><u>⁣@aiquiral:tchncs.de</u></a> | Verified Sessions – Amethyst (PZVCRDNZHH), Sapphire (FOKGXHPIOP)</p>
+      <h3>Other Channels</h3>
+      <p>Discord – ⁣<a href="https://discord.com/users/984386563607756820"><u>aiquiral#9166</u></a></p>
+      <p>Telegram – <a href="https://t.me/aiquiral"><u>aiquiral</u></a></p>
+      <p>Fiverr – <a href="https://fiverr.com/aiquiral"><u>aiquiral</u></a></p>
+      <h3>Socials</h3>
+      <p>Mastodon – <a href="https://mas.to/@aiquiral"><u>@aiquiral@mas.to</u></a></p>
+      &nbsp;
+      <p><a href="https://aiquiral.me"><u>Back to home</u></a></p>
+    </div>
+    </div>
+    <noscript>
+      <img src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/pixel.gif">
+    </noscript>
+    <script defer src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/script.js"></script>
+    <div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> – <a href="https://git.aiquiral.me">Other Projects</a> – <img src="content/inline-logo.svg" style="position:relative;bottom:-3px" width=28 height=32></img> – <a href="privacy-policy.html">Privacy Policy</a> – <a href="about.html">About</a></p></div>
+    <div class="line-bottom"></div>
+  </body>
+</html>
--- a/content/aiquiral.avif
+++ b/content/aiquiral.avif
--- a/content/favicon.svg
+++ b/content/favicon.svg
@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1080"
+   height="1080"
+   viewBox="0 0 1080 1080"
+   version="1.1"
+   id="svg36"
+   sodipodi:docname="inline-logo-b.svg"
+   inkscape:export-filename="favicon.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <defs
+     id="defs33" />
+  <circle
+     style="fill:#b4b4bb;fill-opacity:1;stroke-width:1.13161"
+     id="path1"
+     cx="540"
+     cy="540"
+     r="540" />
+  <path
+     d="m 227.5568,147.51963 52.89552,179.80791 -81.46691,-100.41185 88.81771,139.74754 -119.76875,-4.2453 127.94546,37.164 128.87729,98.65017 146.06056,73.80615 1.8637,16.56333 h -11.28222 l -11.6981,-11.9041 -72.2544,-33.33263 22.04847,90.57548 50.72383,6.10898 c 0,0 -81.72979,157.08576 -86.85004,168.52295 -5.12025,11.4372 107.34675,-134.46641 107.34675,-134.46641 l -9.93839,-43.89096 -48.6522,-5.07316 -19.97878,-66.87126 64.48965,40.16552 13.97574,1.24181 61.69608,15.62952 1.65574,-11.69614 -22.56637,-3.51944 -2.69156,-8.59261 29.50127,-4.13936 41.92525,-1.86369 21.01264,27.63758 22.98031,11.38815 20.08276,18.52903 32.4008,21.94449 55.27712,22.77432 2.17366,15.42353 -2.17366,20.60068 -72.15042,6.10702 -41.50933,16.25141 -40.57947,-11.80013 -34.1605,20.59872 -35.5063,10.14437 57.76271,167.38512 17.18325,-162.00199 61.28214,2.89952 28.98337,-15.73546 64.07769,-12.42201 0.72389,-16.14742 9.42048,-7.45477 -6.9349,-39.33569 -93.88892,-44.71882 -15.11357,-18.21906 -26.91565,-15.83747 -21.32261,-26.18979 c 0,0 5.29093,-12.94776 9.10856,-20.39272 3.81763,-7.44497 37.472,-7.55679 37.472,-7.55679 l 70.28869,-19.66686 27.63758,-44.8228 -13.1459,-59.31447 -2.06969,42.54516 -22.56638,43.06308 -54.13929,9.73044 12.21405,-37.67995 25.15397,-53.4154 -7.03888,-80.12113 -7.65879,75.56783 -19.97879,38.60984 -9.73044,-26.60373 -6.00502,46.68649 -24.844,27.9495 -24.32608,7.34884 -14.38772,-14.38771 23.39425,-46.0646 28.25946,-85.40029 -24.63604,-74.11808 -33.74658,-53.10349 15.42352,35.92024 25.87983,79.81116 -29.0893,68.21705 -30.95103,26.49975 -15.73349,-75.98177 -11.38619,-18.1151 -1.86369,12.73197 7.6588,27.01766 -9.5225,29.39926 -19.25488,-40.47548 -7.55678,-80.22315 -7.97073,-32.71271 -28.46546,-60.55629 -15.63147,-10.35035 21.63453,48.85817 10.24835,47.30642 -0.30996,51.75964 -43.27103,-35.19632 -18.1151,-34.26449 -34.98837,-48.44424 16.76932,36.12621 17.1852,41.61332 -44.92676,-47.41039 -25.77586,-39.95757 -29.70923,-34.78043 10.35233,23.6022 23.49822,42.23324 -49.06613,-27.63758 -33.22866,-23.80818 13.24987,24.11814 34.57444,26.49976 60.76425,43.16704 -51.44773,-8.38466 -40.68147,-19.87481 -39.64762,-34.36846 28.36344,43.58099 43.06308,25.77585 77.84351,17.49321 73.49619,61.48813 57.14083,99.27205 3.51943,40.78545 -26.70573,11.07623 -54.76118,-28.25948 -31.67494,-56.52089 -37.99186,-60.76228 -16.97531,-60.04034 2.58759,66.97524 15.21754,59.52242 -28.67536,-2.27763 -88.50579,-75.35989 -50.41191,-207.13573 17.49321,157.03378 z m 275.8697,426.79625 19.97879,41.61332 31.57095,4.55525 -8.90257,-21.22059 z m 186.43206,46.89248 21.73851,17.08123 14.49168,15.94144 10.76625,-0.41394 -13.14786,-10.76625 z m -25.05196,16.2514 -21.63453,8.0747 22.46437,14.49167 13.66381,-6.313 8.48862,9.10854 -2.79553,-12.62798 z m -69.45885,5.28112 40.99339,25.35995 17.80318,2.17365 -22.4624,-18.63299 z m -27.84553,46.58054 c 0,0 17.41473,76.24662 21.11662,74.22206 3.70385,-2.02455 65.21552,-26.18978 65.21552,-26.18978 l -48.75617,-1.55374 z m 230.01304,2.79555 -8.07468,4.14132 9.8344,7.76277 6.83093,12.422 17.18521,-7.86674 -3.72739,-9.00654 z"
+     opacity="1"
+     fill="#000000"
+     id="path12"
+     style="clip-rule:evenodd;fill:#25252d;fill-opacity:1;fill-rule:evenodd;stroke-width:1.96178;stroke-linecap:round;stroke-linejoin:round" />
+</svg>
--- a/content/fonts/Montserrat-Black.woff2
+++ b/content/fonts/Montserrat-Black.woff2
--- a/content/fonts/Montserrat-Regular.woff2
+++ b/content/fonts/Montserrat-Regular.woff2
--- a/content/inline-logo.svg
+++ b/content/inline-logo.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="1080" height="1080" viewBox="0 0 1080 1080" version="1.1" id="svg36">
+  <defs id="defs33"></defs>
+  <g id="layer1">
+    <g id="g46" transform="matrix(2.1521033,0,0,2.1521033,-789.41341,45.763631)" style="fill:#b4b4bb;fill-opacity:1">
+      <path d="m 463.072,71.9726 26.963,91.6554 -41.527,-51.184 45.274,71.235 -61.051,-2.164 65.219,18.944 65.694,50.286 74.453,37.622 0.95,8.443 h -5.751 l -5.963,-6.068 -36.831,-16.991 11.239,46.17 25.856,3.114 c 0,0 -41.661,80.073 -44.271,85.903 -2.61,5.83 54.719,-68.543 54.719,-68.543 l -5.066,-22.373 -24.8,-2.586 -10.184,-34.087 32.873,20.474 7.124,0.633 31.449,7.967 0.844,-5.962 -11.503,-1.794 -1.372,-4.38 15.038,-2.11 21.371,-0.95 10.711,14.088 11.714,5.805 10.237,9.445 16.516,11.186 28.177,11.609 1.108,7.862 -1.108,10.501 -36.778,3.113 -21.159,8.284 -20.685,-6.015 -17.413,10.5 -18.099,5.171 29.444,85.323 8.759,-82.579 31.238,1.478 14.774,-8.021 32.663,-6.332 0.369,-8.231 4.802,-3.8 -3.535,-20.051 -47.859,-22.795 -7.704,-9.287 -13.72,-8.073 -10.869,-13.35 c 0,0 2.697,-6.6 4.643,-10.395 1.946,-3.795 19.101,-3.852 19.101,-3.852 l 35.829,-10.025 14.088,-22.848 -6.701,-30.235 -1.055,21.687 -11.503,21.951 -27.597,4.96 6.226,-19.207 12.822,-27.228 -3.588,-40.841 -3.904,38.52 -10.184,19.681 -4.96,-13.561 -3.061,23.798 -12.664,14.247 -12.4,3.746 -7.334,-7.334 11.925,-23.481 14.405,-43.532 -12.558,-37.781 -17.202,-27.069 7.862,18.31 13.192,40.683 -14.828,34.773 -15.777,13.508 -8.02,-38.731 -5.804,-9.234 -0.95,6.49 3.904,13.772 -4.854,14.986 -9.815,-20.632 -3.852,-40.893 -4.063,-16.675 -14.51,-30.868 -7.968,-5.276 11.028,24.905 5.224,24.114 -0.158,26.384 -22.057,-17.941 -9.234,-17.466 -17.835,-24.694 8.548,18.415 8.76,21.212 -22.901,-24.167 -13.139,-20.368 -15.144,-17.729 5.277,12.031 11.978,21.528 -25.011,-14.088 -16.938,-12.136 6.754,12.294 17.624,13.508 30.974,22.004 -26.225,-4.274 -20.737,-10.131 -20.21,-17.519 14.458,22.215 21.951,13.139 39.68,8.917 37.464,31.343 29.127,50.603 1.794,20.79 -13.613,5.646 -27.914,-14.405 -16.146,-28.811 -19.366,-30.973 -8.653,-30.605 1.319,34.14 7.757,30.341 -14.617,-1.161 -45.115,-38.414 -25.697,-105.5855 8.917,80.0465 z m 140.622,217.5554 10.184,21.212 16.093,2.322 -4.538,-10.817 z m 95.032,23.903 11.081,8.707 7.387,8.126 5.488,-0.211 -6.702,-5.488 z m -12.77,8.284 -11.028,4.116 11.451,7.387 6.965,-3.218 4.327,4.643 -1.425,-6.437 z m -35.406,2.692 20.896,12.927 9.075,1.108 -11.45,-9.498 z m -14.194,23.744 c 0,0 8.877,38.866 10.764,37.834 1.888,-1.032 33.243,-13.35 33.243,-13.35 l -24.853,-0.792 z m 117.247,1.425 -4.116,2.111 5.013,3.957 3.482,6.332 8.76,-4.01 -1.9,-4.591 z" opacity="1" fill="#000000" id="path12" style="clip-rule:evenodd;fill:#b4b4bb;fill-opacity:1;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round"></path>
+    </g>
+  </g>
+</svg>
--- a/content/publickey.hello@aiquiral.me-193666f26d6dd6ca5981a834b2f53944c5483f4d.asc
+++ b/content/publickey.hello@aiquiral.me-193666f26d6dd6ca5981a834b2f53944c5483f4d.asc
@ -0,0 +1,14 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+xjMEYiRImxYJKwYBBAHaRw8BAQdA+f1gaV7GzYnskRq2MHpDoXvpMuAmBo5/
+8q3rJkn20AfNJWhlbGxvQGFpcXVpcmFsLm1lIDxoZWxsb0BhaXF1aXJhbC5t
+ZT7CjwQQFgoAIAUCYiRImwYLCQcIAwIEFQgKAgQWAgEAAhkBAhsDAh4BACEJ
+ELL1OUTFSD9NFiEEGTZm8m1t1spZgag0svU5RMVIP03y+QEAw0U4xPeEFPS7
+W2aVUIa6jPUDMX4l3HqECxIu3O5Co1wBAPdItg4OysjRahRBB+c8ZijR56Ip
+BM2UZ69Wkdq1r68LzjgEYiRImxIKKwYBBAGXVQEFAQEHQDx3dm6didyscL2F
+A6VxPrSUQZqhcF5FZ4uDTvwVCqQFAwEIB8J4BBgWCAAJBQJiJEibAhsMACEJ
+ELL1OUTFSD9NFiEEGTZm8m1t1spZgag0svU5RMVIP01R7wEAs0UzerKrUbFh
+iqj8mUKNoryKAiw/2Dte60LaK7l2C4YBAKZp/hmeYFWLqPJXeW43AC6TQd90
+qZPMEIlpA+2PzB8O
+=oFGP
+-----END PGP PUBLIC KEY BLOCK-----
--- a/index.html
+++ b/index.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+  <head>
+    <title>Aiquiral - Home</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="content/favicon.svg" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="line-top"></div>
+    <div class="main">
+      <div class="hero">
+        <div class="left">
+          <h2>HI, I AM</h2>
+          <h1>AIQUIRAL</h1>
+          <p class="tagline">Musician • Designer • Programmer</p>
+        </div>
+        <div class="right">
+          <img src="content/aiquiral.avif" />
+        </div>
+      </div>
+      <div>
+        <noscript>
+          <img src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/pixel.gif">
+        </noscript>
+        <script defer src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/script.js"></script>
+      </div>
+      <div class="buttons">
+        <a class="button" href="https://blog.aiquiral.me">BLOG</a><a class="button" href="https://portfolio.aiquiral.me">PORTFOLIO</a><a class="button" href="https://aiquiral.me/contact">CONTACT</a>
+      </div>
+    </div>
+    <div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> – <a href="https://git.aiquiral.me">Other Projects</a> – <img src="content/inline-logo.svg" style="position:relative;bottom:-3px" width=28 height=32></img> – <a href="privacy-policy.html">Privacy Policy</a> – <a href="about.html">About</a></p></div>
+    <div class="line-bottom"></div>
+  </body>
+</html>
--- a/privacy-policy.html
+++ b/privacy-policy.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+  <head>
+    <title>Privacy Policy - Aiquiral</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="content/favicon.svg" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="line-top"></div>
+    <div class="main">
+      <div class="about">
+      <h1>Privacy Policy</h1>
+      &nbsp;<br>
+      &nbsp;<br>
+      <h3>Who am I</h3>
+      <p>My name is Anuj Kaushik, also known as Aiquiral. This privacy policy is concerned with the domain aiquiral.me and all its subdomains (*.aiquiral.me).</p>
+      <h3>What personal data I collect and why I collect it</h3>
+      <p>The data collected from the visitors include, referrer, IP address, browser, operating system and device type. No other sensitive data is collected. I collect this data to improve my services and fight off bots. <b>No cookies are stored on your device(s).</b></p>
+      <h3>Analytics</h3>
+      <p>For analytics, I use a self-hosted instance of Shynet (<a href="https://github.com/milesmcc/shynet"><u>https://github.com/milesmcc/shynet</u></a>).</p>
+      <p>To opt out of this analytics collection, simply block the a.aiquiral.me domain.</p>
+      <h3>Who I share your data with</h3>
+      <p>I do not share this data with anyone.</p>
+      <h3>How long I retain your data</h3>
+      <p>All the collected data is removed every month.</p>
+      <h3>Contact information</h3>
+      <p>My contact information is available here. <a href="https://aiquiral.me/contact.html"><u>https://aiquiral.me/contact</u></a></p>
+      <h3>Additional information</h3>
+      <p>All of my services are either hosted or routed through Hetzner’s servers. (<a href="https://www.hetzner.com/legal/privacy-policy/"><u>https://www.hetzner.com/legal/privacy-policy/)</u></a></p>
+      <h3>How I protect your data</h3>
+      <p>I always choose the best open source solution available to maintain privacy, along with other practices like keeping everything up to date, enforcing strong encryption, etc.</p>
+      &nbsp;
+      <p><a href="https://aiquiral.me"><u>Back to home</u></a></p>
+    </div>
+    </div>
+    <noscript>
+      <img src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/pixel.gif">
+    </noscript>
+    <script defer src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/script.js"></script>
+    <div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> – <a href="https://git.aiquiral.me">Other Projects</a> – <img src="content/inline-logo.svg" style="position:relative;bottom:-3px" width=28 height=32></img> – <a href="privacy-policy.html">Privacy Policy</a> – <a href="about.html">About</a></p></div>
+    <div class="line-bottom"></div>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,136 @@
+@font-face {
+    font-family: 'montserratregular';
+    src: url('content/fonts/Montserrat-Regular.woff2') format('woff2'),
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'montserratblack';
+    src: url('content/fonts/Montserrat-Black.woff2') format('woff2'),
+    font-weight: normal;
+    font-style: normal;
+}
+
+a {
+  text-decoration: none !important;
+  color: #b4b4bb;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #25252d;
+  font-family: 'montserratregular';
+  color: #b4b4bb;
+  display: flex;
+  min-height: 100vh;
+  flex-flow: column;
+}
+
+h1, h2 {
+  font-family: 'montserratblack';
+  font-size:clamp(2.813rem,2.813vw + 2.25rem,5.625rem);
+  margin: 0;
+  padding: 0;
+}
+
+@media (max-width: 1203px){
+  h1, h2, p.tagline{
+    text-align: center;
+  }
+}
+
+h3 {
+  font-family: 'montserratblack';
+  font-size:clamp(0.813rem,0.813vw + 0.25rem,3.625rem);
+}
+
+h2 {
+  -webkit-text-fill-color: transparent;
+  -webkit-text-stroke: 3px;
+}
+
+.tagline {
+  font-size: clamp (16px, 1vw, 50px);
+}
+
+.line-top {
+  height: 22px;
+  background-image: linear-gradient(145deg, #4c4dfb , #706efb);
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 30px;
+}
+
+.line-bottom {
+  height: 22px;
+  background-image: linear-gradient(145deg, #706efb, #4c4dfb);
+  bottom: 0px;
+  width: 100%;
+  box-shadow: rgba(0, 0, 0, 0.35) 5px 0px 30px;
+}
+
+.foot {
+  bottom: 22px;
+  width: 100%;
+  text-align: center;
+}
+
+.main{
+  flex-grow: 1;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  -webkit-align-items: center;
+}
+
+.hero, .buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  align-content: center;
+}
+
+.main{margin-top: 3vw;}
+.buttons{margin-top: 3vw;}
+
+.left, .right{
+  margin-left: 3vw;
+  margin-right: 3vw;
+}
+
+.button {
+  font-family: 'montserratblack';
+  padding: 1.5vw;
+  margin: 2vw;
+  background-image: linear-gradient(145deg, #4c4dfb , #706efb);
+  color: #fff;
+  font-size: 28px;
+  width: 250px;
+  text-align: center;
+  border-radius: 10px;
+  box-shadow: 0px 0px 30px 9px rgba(0,0,0,0.3);
+}
+
+.button:hover {
+  background-image: linear-gradient(#25252d, #25252d);
+  outline-style: solid;
+  outline-width: 3px;
+  outline-color: #4c4dfb;
+  transition: 0.02s;
+}
+
+.about {
+  padding: 1vw 10vw;
+}
+
+p {
+ font-size: clamp(0.7rem,0.7vw + 0.25rem,3.625rem);
+ line-height: 1.5;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}