-1
I want to remove my scrollbar that has on the side tab, already tried to use the Webkit in the CSS navbar and nothing. I appreciate any assistance, here the image below how it looks and the codes.
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="theme.js"></script>
<link rel="stylesheet" href="css/estiloprin.css" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Wolfy</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="video" class="svg-inline--fa fa-video fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z" class="fa-primary"></path></svg>
<span class="link-text">Assistir</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="firefox" class="svg-inline--fa fa-firefox fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M503.52,241.48c-.12-1.56-.24-3.12-.24-4.68v-.12l-.36-4.68v-.12a245.86,245.86,0,0,0-7.32-41.15c0-.12,0-.12-.12-.24l-1.08-4c-.12-.24-.12-.48-.24-.6-.36-1.2-.72-2.52-1.08-3.72-.12-.24-.12-.6-.24-.84-.36-1.2-.72-2.4-1.08-3.48-.12-.36-.24-.6-.36-1-.36-1.2-.72-2.28-1.2-3.48l-.36-1.08c-.36-1.08-.84-2.28-1.2-3.36a8.27,8.27,0,0,0-.36-1c-.48-1.08-.84-2.28-1.32-3.36-.12-.24-.24-.6-.36-.84-.48-1.2-1-2.28-1.44-3.48,0-.12-.12-.24-.12-.36-1.56-3.84-3.24-7.68-5-11.4l-.36-.72c-.48-1-.84-1.8-1.32-2.64-.24-.48-.48-1.08-.72-1.56-.36-.84-.84-1.56-1.2-2.4-.36-.6-.6-1.2-1-1.8s-.84-1.44-1.2-2.28c-.36-.6-.72-1.32-1.08-1.92s-.84-1.44-1.2-2.16a18.07,18.07,0,0,0-1.2-2c-.36-.72-.84-1.32-1.2-2s-.84-1.32-1.2-2-.84-1.32-1.2-1.92-.84-1.44-1.32-2.16a15.63,15.63,0,0,0-1.2-1.8L463.2,119a15.63,15.63,0,0,0-1.2-1.8c-.48-.72-1.08-1.56-1.56-2.28-.36-.48-.72-1.08-1.08-1.56l-1.8-2.52c-.36-.48-.6-.84-1-1.32-1-1.32-1.8-2.52-2.76-3.72a248.76,248.76,0,0,0-23.51-26.64A186.82,186.82,0,0,0,412,62.46c-4-3.48-8.16-6.72-12.48-9.84a162.49,162.49,0,0,0-24.6-15.12c-2.4-1.32-4.8-2.52-7.2-3.72a254,254,0,0,0-55.43-19.56c-1.92-.36-3.84-.84-5.64-1.2h-.12c-1-.12-1.8-.36-2.76-.48a236.35,236.35,0,0,0-38-4H255.14a234.62,234.62,0,0,0-45.48,5c-33.59,7.08-63.23,21.24-82.91,39-1.08,1-1.92,1.68-2.4,2.16l-.48.48H124l-.12.12.12-.12a.12.12,0,0,0,.12-.12l-.12.12a.42.42,0,0,1,.24-.12c14.64-8.76,34.92-16,49.44-19.56l5.88-1.44c.36-.12.84-.12,1.2-.24,1.68-.36,3.36-.72,5.16-1.08.24,0,.6-.12.84-.12C250.94,20.94,319.34,40.14,367,85.61a171.49,171.49,0,0,1,26.88,32.76c30.36,49.2,27.48,111.11,3.84,147.59-34.44,53-111.35,71.27-159,24.84a84.19,84.19,0,0,1-25.56-59,74.05,74.05,0,0,1,6.24-31c1.68-3.84,13.08-25.67,18.24-24.59-13.08-2.76-37.55,2.64-54.71,28.19-15.36,22.92-14.52,58.2-5,83.28a132.85,132.85,0,0,1-12.12-39.24c-12.24-82.55,43.31-153,94.31-170.51-27.48-24-96.47-22.31-147.71,15.36-29.88,22-51.23,53.16-62.51,90.36,1.68-20.88,9.6-52.08,25.8-83.88-17.16,8.88-39,37-49.8,62.88-15.6,37.43-21,82.19-16.08,124.79.36,3.24.72,6.36,1.08,9.6,19.92,117.11,122,206.38,244.78,206.38C392.77,503.42,504,392.19,504,255,503.88,250.48,503.76,245.92,503.52,241.48Z" class="fa-primary"></path></svg>
<span class="link-text">Wolfynhos</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Espaço</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a href="#" class="nav-link">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dove" class="svg-inline--fa fa-dove fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M288 167.2v-28.1c-28.2-36.3-47.1-79.3-54.1-125.2-2.1-13.5-19-18.8-27.8-8.3-21.1 24.9-37.7 54.1-48.9 86.5 34.2 38.3 80 64.6 130.8 75.1zM400 64c-44.2 0-80 35.9-80 80.1v59.4C215.6 197.3 127 133 87 41.8c-5.5-12.5-23.2-13.2-29-.9C41.4 76 32 115.2 32 156.6c0 70.8 34.1 136.9 85.1 185.9 13.2 12.7 26.1 23.2 38.9 32.8l-143.9 36C1.4 414-3.4 426.4 2.6 435.7 20 462.6 63 508.2 155.8 512c8 .3 16-2.6 22.1-7.9l65.2-56.1H320c88.4 0 160-71.5 160-159.9V128l32-64H400zm0 96.1c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z" class="fa-primary"></path>
</svg>
<span class="link-text">Twitter</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-card" class="svg-inline--fa fa-address-card fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z" class="fa-primary"></path></svg>
<span class="link-text">O que somos?</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a href="#" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="accusoft" class="svg-inline--fa fa-accusoft fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M322.1 252v-1l-51.2-65.8s-12 1.6-25 15.1c-9 9.3-242.1 239.1-243.4 240.9-7 10 1.6 6.8 15.7 1.7.8 0 114.5-36.6 114.5-36.6.5-.6-.1-.1.6-.6-.4-5.1-.8-26.2-1-27.7-.6-5.2 2.2-6.9 7-8.9l92.6-33.8c.6-.8 88.5-81.7 90.2-83.3zm160.1 120.1c13.3 16.1 20.7 13.3 30.8 9.3 3.2-1.2 115.4-47.6 117.8-48.9 8-4.3-1.7-16.7-7.2-23.4-2.1-2.5-205.1-245.6-207.2-248.3-9.7-12.2-14.3-12.9-38.4-12.8-10.2 0-106.8.5-116.5.6-19.2.1-32.9-.3-19.2 16.9C250 75 476.5 365.2 482.2 372.1zm152.7 1.6c-2.3-.3-24.6-4.7-38-7.2 0 0-115 50.4-117.5 51.6-16 7.3-26.9-3.2-36.7-14.6l-57.1-74c-5.4-.9-60.4-9.6-65.3-9.3-3.1.2-9.6.8-14.4 2.9-4.9 2.1-145.2 52.8-150.2 54.7-5.1 2-11.4 3.6-11.1 7.6.2 2.5 2 2.6 4.6 3.5 2.7.8 300.9 67.6 308 69.1 15.6 3.3 38.5 10.5 53.6 1.7 2.1-1.2 123.8-76.4 125.8-77.8 5.4-4 4.3-6.8-1.7-8.2z" class="fa-primary"></path></svg>
<span class="link-text">Temas</span>
</a>
</li>
</ul>
</nav>
<main>
<h1>CSS é legal pra cacete, mas também pesa!</h1>
<p>
I'm baby kale chips affogato ennui lumbersexual, williamsburg paleo quinoa
iceland normcore tumeric. Kitsch coloring book retro, seitan schlitz
tattooed biodiesel vexillologist neutra. Synth mumblecore deep v, umami
selfies normcore gluten-free snackwave. Seitan ramps drinking vinegar
venmo keytar, humblebrag VHS post-ironic tacos godard pour-over.
</p>
<p>
Sartorial kogi taxidermy, kickstarter synth yr irony ennui everyday carry
retro helvetica stumptown cloud bread squid echo park. Etsy cloud bread
sartorial quinoa tacos beard mumblecore shaman tumblr pop-up. Twee retro
fingerstache af helvetica pabst 8-bit leggings taiyaki portland ramps tbh
tumblr vinyl. Neutra humblebrag bushwick portland subway tile plaid, offal
scenester flexitarian cliche squid small batch palo santo. Palo santo meh
adaptogen +1 3 wolf moon, listicle brunch ethical fanny pack everyday
carry fam. Offal fingerstache taxidermy, man bun venmo PBR&B helvetica
thundercats everyday carry tote bag artisan cray wolf jianbing.
</p>
<p>
Taxidermy thundercats whatever austin. VHS helvetica ethical, dreamcatcher
enamel pin YOLO shabby chic locavore man bun crucifix pabst chillwave
pop-up vegan. Air plant mlkshk ethical echo park tumeric, whatever
crucifix godard scenester locavore pork belly yuccie vape. +1 gochujang
put a bird on it, pork belly whatever selfies vaporware occupy banh mi
normcore VHS. Cornhole normcore hashtag tilde. Hell of yr try-hard DIY raw
denim banjo, enamel pin irony polaroid copper mug tofu. Dreamcatcher lomo
literally 90's before they sold out, 3 wolf moon banh mi seitan chambray
cliche offal tote bag occupy pug.
</p>
<p>
Post-ironic hot chicken salvia yr yuccie ugh cold-pressed keffiyeh franzen
viral taxidermy mustache slow-carb crucifix vape. Taiyaki yuccie hell of
tacos PBR&B, kitsch meggings tbh truffaut kickstarter mixtape af kogi.
Fingerstache vegan tofu waistcoat gentrify cray. Drinking vinegar 3 wolf
moon health goth craft beer master cleanse. Letterpress health goth 8-bit
chillwave craft beer brooklyn. Chicharrones master cleanse 8-bit,
mumblecore copper mug messenger bag poutine lomo kale chips flannel. Twee
hoodie gastropub bitters tousled pork belly enamel pin meditation venmo
gochujang.
</p>
<p>
Next level selfies cronut ethical. Tofu tumblr you probably haven't heard
of them, man braid literally forage swag chillwave. Pug yr flannel
tumeric. Coloring book yr chillwave snackwave, shoreditch shaman gentrify
typewriter tumeric DIY copper mug small batch. Scenester waistcoat YOLO
hexagon kombucha poke 8-bit meditation. Selvage scenester forage
williamsburg. Hoodie fingerstache tacos mustache, hashtag quinoa next
level sartorial craft beer retro disrupt lo-fi.
</p>
<p>
YOLO twee keytar farm-to-table flexitarian cardigan polaroid lumbersexual
adaptogen drinking vinegar echo park dreamcatcher. Brunch shoreditch
dreamcatcher iPhone knausgaard plaid edison bulb letterpress ethical yr
fanny pack. Typewriter portland woke glossier cronut, post-ironic migas
gentrify letterpress cray brunch lyft 8-bit master cleanse. Pitchfork
thundercats organic pour-over unicorn lomo.
</p>
<p>
Ugh yr tacos aesthetic everyday carry, tumeric selvage cliche skateboard.
Wolf truffaut enamel pin vexillologist poutine. Hoodie roof party pabst,
cardigan letterpress af disrupt +1 subway tile chillwave live-edge
meggings next level readymade. Master cleanse gentrify hashtag, stumptown
fam single-origin coffee occupy dreamcatcher air plant viral vexillologist
enamel pin meggings. Tumblr chambray pickled microdosing austin scenester
green juice.
</p>
<p>
Austin four dollar toast church-key, vaporware hoodie edison bulb jean
shorts sustainable williamsburg plaid helvetica scenester lomo humblebrag.
Meditation tumblr kickstarter ennui williamsburg taiyaki pabst pour-over.
8-bit godard cred, chillwave enamel pin skateboard you probably haven't
heard of them. Meditation before they sold out single-origin coffee swag
try-hard jianbing slow-carb shaman leggings. Palo santo shabby chic
whatever man bun. Master cleanse wayfarers single-origin coffee pork belly
cronut, normcore cliche jianbing before they sold out tousled shabby chic
af pop-up gentrify. Direct trade la croix vexillologist jianbing,
flexitarian selvage try-hard stumptown polaroid shaman wayfarers poke
ramps food truck swag.
</p>
<p>
Pok pok lumbersexual wayfarers, direct trade leggings poutine truffaut
kitsch. Seitan aesthetic master cleanse squid coloring book banh mi YOLO
vegan locavore vexillologist readymade next level pop-up edison bulb.
Selvage knausgaard literally, quinoa photo booth 3 wolf moon microdosing
freegan yuccie. Truffaut gentrify lomo put a bird on it waistcoat. Ugh
austin distillery, tbh actually pork belly snackwave artisan mixtape
quinoa vexillologist pok pok polaroid listicle readymade.
</p>
<p>
Hammock letterpress prism dreamcatcher truffaut shabby chic vice
cold-pressed. Franzen pug fashion axe before they sold out, tumblr irony
kogi actually af bushwick banh mi. Snackwave bicycle rights tofu
dreamcatcher tote bag pour-over meditation raw denim fanny pack. Pop-up
retro taiyaki meditation twee gastropub VHS etsy. Semiotics gochujang
street art normcore, edison bulb farm-to-table pour-over taxidermy
brooklyn.
</p>
</main>
</body>
</html>
CSS:
:root {
font-size: 16px;
font-family: 'Press Start 2P', cursive;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
--transition-speed: 600ms;
}
body {
color: black;
background-color: white;
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #1e1e24;
}
body::-webkit-scrollbar-thumb {
background: #6649b8;
}
main {
margin-left: 5rem;
padding: 1rem;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
transition: width 600ms ease;
overflow: scroll;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-item:last-child {
margin-top: auto;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: var(--bg-secondary);
color: var(--text-secondary);
}
.link-text {
display: none;
margin-left: 1rem;
}
.nav-link svg {
width: 2rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.fa-primary {
color: #ff7eee;
}
.fa-secondary {
color: #df49a6;
}
.fa-primary,
.fa-secondary {
transition: var(--transition-speed);
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
color: var(--text-secondary);
background: var(--bg-secondary);
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
/* Small screens */
@media only screen and (max-width: 600px) {
.navbar {
bottom: 0;
width: 100vw;
height: 5rem;
}
.logo {
display: none;
}
.navbar-nav {
flex-direction: row;
}
.nav-link {
justify-content: center;
}
main {
margin: 0;
}
}
/* Large screens */
@media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
}
.navbar:hover {
width: 16rem;
}
.navbar:hover .link-text {
display: inline;
}
.navbar:hover .logo svg
{
margin-left: 11rem;
}
.navbar:hover .logo-text
{
left: 0px;
}
}
.dark {
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
.light {
--text-primary: #1f1f1f;
--text-secondary: #000000;
--bg-primary: #ffffff;
--bg-secondary: #e4e4e4;
}
.solar {
--text-primary: #576e75;
--text-secondary: #35535c;
--bg-primary: #fdf6e3;
--bg-secondary: #f5e5b8;
}
.theme-icon {
display: none;
}
.dark #darkIcon {
display: block;
}
.light #lightIcon {
display: block;
}
.solar #solarIcon {
display: block;
}