Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--
Just another FCC project chanllenge to help boost my coding skills, Most infomation regarding python on this page was gotten from docs.python.org
-->
<!-- This div element contains the page heading info + description-->
<header id="top"></header>
<div class="logo-div">
	<img class="logo" src="https://docs.python.org/3/_static/py.png"><h2 class="logo-text">Python</h2>
</div>
<!--Page heading ends here -->

<div class="rotate">
	<img src="https://res.cloudinary.com/liquidtime/image/upload/v1666168764/code-logo_pe2d8k.png" class="code" alt="code icon">
	</div>
<!--Side nav starts here -->

<div id="description">
	<p class="description">Welcome to Python 3.9 documentation!</p>
	</div>
<div class="sidenav">
	<a href="#">What's new</a>
	<a href="#howTos">Python's HowTos</a>
	<a href="#setup-usage">Setup and Usage</a>
	<a href="#python-library">Library Reference</a>
	<a href="#faq">FAQ?</a>
	<a href="#contact">Contact</a>
</div>
<!--Side nav ends here -->

<!--Main section starts here -->
<main id="main-doc">
	<section class='main-section' id="what-is-new">
		<div class="switch" id="switch">
                    <div id="toggle">
                
                        <i class="indicator"></i>
                
                    </div>
                </div>
		<header><h2>What's new, Python 3.9 Overview</h2>
			</header>
			<p>This article explains the new features in Python 3.9, compared to 3.8. Python 3.9 was released on October 5th, 2020</p>
			<p>Summary – Release highlights¶</p>
			<ul>New Syntax Features:
				<li><b>PEP 584</b>, union operators added to <code>dict;</code></li>
				<li><b>PEP 585</b>, type hinting generics in standard collections;</li>
				<li><b>PEP 614</b>, relaxed grammar restrictions on decorators</li>
			</ul>
			<ul>New Built-in Features:
				<li><b>PEP 616</b>, string methods to remove prefixes and suffixes.</li>
			</ul>
			</ul>
			<ul>New Features in the Standard library:
				<li><b>PEP 593</b>, flexible function and variable annotations;</li>
				<li><code>os.pidfd_open()</code> added that allows process management without races and signals.</li>
			</ul>
		<ul>Interpreter Improvement:
				<li><b>PEP 573</b>, fast access to module state from methods of C extension types;</li>
				<li><b>PEP 617</b>, CPython now uses a new parser based on PEG;</li>
				<li>a number of Python builtins <code>(range, tuple, set, frozenset, list, dict)</code> are now sped up using <b>PEP 590</b> vectorcall;</li>
			<li>garbage collection does not block on resurrected objects;</li>
			<li>a number of standard library modules <code>(audioop, ast, grp, _hashlib, pwd, _posixsubprocess, random, select, struct, termios, zlib)</code> are now using the stable ABI defined by <b>PEP 384</b>.</li>
			</ul>
		<ul>New Libary modules:
			<li><b>PEP 615</b>, the IANA Time Zone Database is now present in the standard library in the zoneinfo module;</li>
			<li>an implementation of a topological sort of a graph is now provided in the new graphlib module.</li>
		</ul>
		<ul>Release Process Change:
			<li><b>PEP 602</b>, CPython adopts an annual release cycle.</li>
			<a class="more-details" href="https://docs.python.org/3.9/whatsnew/3.9.html" target="_blank">More Details</a>
		
	</section>
	<section id="howTos" class='main-section'>
		<header><h2>Python's HowTos in-depth</h2></header>
		<p>Python HOWTOs are documents that cover a single, specific topic, and attempt to cover it fairly completely. Modelled on the Linux Documentation Project’s HOWTO collection, this collection is an effort to foster documentation that’s more detailed than the Python Library Reference.</p>
		<ul>Currently the HOWTOs are:
			<br>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Porting Python 2 Code to Python 3</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Porting Extension Modules to Python 3</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Curses Programming with Python</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Descriptor HowTo Guide</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Functional Programming HOWTO</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Logging HOWTO</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Logging Cookbook</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Regular Expression HOWTO</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Socket Programming HOWTO</li></a>
			<a href="https://docs.python.org/3.9/howto/index.html" target="_blank"><li>Sorting HOW TO</li></a>
			</ul>
	</section>
	
	<section id="setup-usage" class='main-section'>
		<header><h2>Setup and Usage</h2></header>
		<p class="setup-p">This part of the documentation is devoted to general information on the setup of the Python environment on different platforms, the invocation of the interpreter and things that make working with Python easier.</p>
		<ul>
			<a href="https://docs.python.org/3.9/using/index.html"><li>Command line and environment
</li></a>
			<a href="https://docs.python.org/3.9/using/index.html"><li>Using Python on Unix platforms</li></a>
			<a href="https://docs.python.org/3.9/using/index.html"><li>Using Python on Windows
</li></a>
			<a href="https://docs.python.org/3.9/using/index.html"><li> Using Python on a Macintosh
</li></a>
			<a href="https://docs.python.org/3.9/using/index.html"><li>Editors and IDEs
</li></a>
		</ul>
	</section>
	
	<section id="python-library" class='main-section'>
		<header><h2>Python Library Reference</h2></header>
		<p>While The Python Language Reference describes the exact syntax and semantics of the Python language, this library reference manual describes the standard library that is distributed with Python. It also describes some of the optional components that are commonly included in Python distributions.

Python’s standard library is very extensive, offering a wide range of facilities as indicated by the long table of contents listed below. The library contains built-in modules (written in C) that provide access to system functionality such as file I/O that would otherwise be inaccessible to Python programmers, as well as modules written in Python that provide standardized solutions for many problems that occur in everyday programming. Some of these modules are explicitly designed to encourage and enhance the portability of Python programs by abstracting away platform-specifics into platform-neutral APIs.

The Python installers for the Windows platform usually include the entire standard library and often also include many additional components. For Unix-like operating systems Python is normally provided as a collection of packages, so it may be necessary to use the packaging tools provided with the operating system to obtain some or all of the optional components.

In addition to the standard library, there is a growing collection of several thousand components (from individual programs and modules to packages and entire application development frameworks), available from the Python Package Index.</p>
		<p>For more details/info about Python library preferences </p>
		<a href="https://docs.python.org/3.9/library/index.html" target="_blank">Click here</a>
	</section>
<section id="faq" class='main-section'>
	<header><h2>Frequently Asked Questions</h2></header>
	<ul>
		<a href="https://docs.python.org/3.9/faq/index.html" target="_blank"><li>General Python FAQ</li></a>
		<a href="https://docs.python.org/3.9/faq/index.html" target="_blank"><li>Programming FAQ</li></a>
		<a href="https://docs.python.org/3.9/faq/index.html" target="_blank"><li>Design and History FAQ</li></a>
		<a href="https://docs.python.org/3.9/faq/index.html" target="_blank"><li>Library and Extension FAQ</li></a>
		<a href="https://docs.python.org/3.9/faq/index.html" target="_blank"><li>Extending/Embedding FAQ</li></a>
		<a href="https://docs.python.org/3.9/faq/index.html" target="_blank"><li>Python on Windows FAQ</li></a>
		<a href="https://docs.python.org/3.9/faq/index.html" target="_blank"><li>Graphic User Interface FAQ
</li></a>
	</ul>
</section>
	
	<div style="clear:both; text-align:center;" id="contact">
		<h2>CONTACT FORM</h2>
	</div>
	<div id="from-div" style="clear:both; text-align:center;">
		<form>
			<label id="label-for-name" for="name">Name: <input type="text" id="name" name="name" placeholder="cool name here"></label>
			<label for="email" id="label-for-email">Email: <input type="email" id="email" name="email" title="fake email here" placeholder="optional"></label>
			
			<textarea placeholder="What's on your mind" title="Ridiculous words here"></textarea>
			
			
			</form>
		<button id="submit" onclick="alert('Thanks for contacting us :)')">submit</button>
		<div class="top-wrapper" style="clear:both;"><a href="#top" class="back-to-top" title="back to top">↑</a></div>
		</div>
	<div class="wrapper" style="clear:both;">
		<div class="social-icons">
			<a href="https://fb.com" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>
</a>
			<a href="https://twitter.com" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
			<a href="https://instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
			<a href="https://youtube.com" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
			</div>
<footer>Made with ❤ Liquid | ©2021 few Rights Reserved</footer>
</div>
</main>
<!--Main section ends here-->

              
            
!

CSS

              
                
*{
	padding:0;
	margin:0;
	box-sizing: border-box;
	transition:.2s;
	scroll-behavior: smooth;
	outline:0;
}
html{
	overflow-x:hidden;
    font-family:'Rajdhani', sans-serif;
	
}

.switch
{
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;	
	top:60px;
    right:0;
    left:0;
    width:100%;
	max-height:80px;
    font-family: 'Cinzel Decorative', cursive;
}
#toggle
{
	position: relative;
	display:block;
	width:160px;
	height:60px;
	border-radius:30px;
	box-shadow:inset 0 1px 6px rgba(0,0,0,.06),
		inset 0 -2px 10px rgba(0,0,0,.06),
		inset 0 2px 10px rgba(0,0,0,.06);
        
}

#toggle .indicator
{
	position:absolute;
	left:0;
	top:0;
	width:80px;
	height:100%;
	border-radius:50%;
	transform:scale(.9);
	box-shadow:0 0 4px rgba(0,0,0,.3);
	cursor:pointer;
	background:rgba(255, 255, 255, 0.322);
}
#toggle.active .indicator
{
	left: calc(160px / 2);
}
#toggle .indicator:active
{
	transform:scale(.7);
}

#toggle:after
{
	content: 'Light';
	position:absolute;
	left:84px;
	top:17px;
	font-size:22px;
	background:linear-gradient(-140deg,#fff,#0ff,#ff004c,#ffcc00,#0ff);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	background-size:200% 200%;
	animation:anime 6s linear infinite;
}
body.light #toggle:after
{
	content: 'dark';
	position:absolute;
	left:15px;
	top:17px;
	font-size:22px;
	background:linear-gradient(140deg,#fff,#0ff,#ff004c,#ffcc00,#0ff);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	background-size:200% 200%;
	animation:anime 6s linear infinite;
}
@keyframes anime{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body.light #toggle
{
	background:#000a2d;
	box-shadow: inset 2px 11px 5px rgb(0 0 0), inset 0 4px 13px rgb(0 224 220), inset 0 4px 0px rgb(0 224 220);
}
body.light
{
	background: #00071e;
}
body.light #toggle .indicator
{
	background: #000a2d;
	box-shadow: 0 3px 12px rgb(0 0 0), inset 0 4px 1px #0ff, inset 0 -2px 4px #0ff;
	transition:400ms;
}
body.light #toggle:hover .indicator
{
	box-shadow: 0 3px 12px rgb(0 0 0), inset 0 0px 1px #0ff, inset 0 -7px 0px #0ff;
	transition:400ms;
}

b{
	color: teal;
}
code{
	background-color:silver;
}

#description{
	animation:fade 3s ease-out forwards;
	opacity:0;
}
@keyframes fade{
	from{
		opacity:0;
		transform:translatey(20px) ;
	}	
	to{
		opacity:1;
	}
}
.logo-div{
	box-shadow:0 6px 10px rgba(0,0,0,0.4);
}

.rotate{
		transition:400ms;
	
	}

.code{
	width:100%;
	height:auto;
  animation: spining 5s linear infinite;
}
.light .code
{
    filter:invert();
}

.code:hover{
	animation-play-state: paused;
}

.light  a,
.light #description
{
    color:#0ff;
}
.light .sidenav
{
    border-right: 3px solid #0ff;
}

.light .sidenav  a:hover{
	background-color: #0ff;
    color:#000a2d;
}
.light #what-is-new,
.light #howTos,
.light #setup-usage,
.light #python-library,
.light #faq
{
background: #000a2d;
	box-shadow:0 0 30px rgba(0,0,0,0.6);
    color:rgb(209, 209, 209);
}
.light #what-is-new:hover,
.light #howTos:hover,
.light #setup-usage:hover,
.light #python-library:hover,
.light #faq:hover
{
border:1px solid #0ff;
}

.light code
{
    color:#000a2d;
}

.light main h2
{
    background: linear-gradient(-45deg,#fff200,#d400ff);
	background-clip:text;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
    text-shadow: none;
    font-family: 'Cinzel Decorative', cursive;
    text-transform:lowercase;
}

.light label
{
    color:#0ff;
}
.light #name,
.light #email,
.light textarea
{
    border:1px solid #0ff;
    color:#0ff;
}
.light #submit
{
    border: 1px solid #0ff;
    color: #0ff;
}

.light .back-to-top
{
    border:1px solid #0ff;
    text-align: center;
    width: 40px;
    
}
.light .back-to-top:hover
{
    box-shadow:0 0 20px #0ff;
}
.light .top-wrapper
{
    position:absolute;
    display: flex;
    right:20px;
    justify-content: center;
    align-items: center;
}

.light .top-wrapper:hover
{
    animation:bob 1s linear infinite;
    
}
@keyframes bob
{
    0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}

.light::-webkit-scrollbar-thumb{
	background: linear-gradient(45deg, #016e72, #0ff, #016e72);
	border-radius: 10px;
}
.light::-webkit-scrollbar-track{
	box-shadow: none; 
	background-color:#000a2d;
}
.light ::selection{
	background-color:rgba(8, 255, 222, 0.747);
	color:#000a2d;
}

@media (min-width:700px){
body{	background:url("https://heptagonindustries.com.ng/wp-content/uploads/2020/09/history.jpg");
	background-attachment: fixed;
	background-position: bottom left;
	display:grid;
	place-items:center;
	height: 100vh;
	min-width:600px;
}
img
	{
	width:30px;
	margin-bottom:-10px;
	margin-top:10px;
}
	.rotate{
	position: absolute;
  right: 0px;
  padding: 10px;
	padding-right:0;
	max-width:200px;
	margin:0;
	margin-top:2em;
		animation:opacity 10s ease alternate infinite;
}
	
	@keyframes opacity{
		0%{opacity:.2;}
		20%{opacity:.4;}
		50%{opacity:.6;}
		70%{opacity:.8;}
		99%{opacity:.8}
		100%{opacity:0.2;}
	}
h2.logo-text{
	background-color: #565656;
  color: transparent;
  text-shadow: 1px 2px 3px rgba(112, 112, 112, 0.5);
	font: bold 40px arial, sans-serif;
  -webkit-background-clip: text;
	background-clip: text;
	margin-top:-32px;
	margin-left:5.3em;
}

.logo-div{
	position: sticky;
	top:0;
	z-index: 1;
	text-align: center;
	width: 100%;
		height:50px;
	background-color:#000;
 	-webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
	border-bottom:cyan 3px solid;
	opacity: .8;
}


#description
	{
	margin: 80px 0px 20px 7em;
	text-transform:uppercase;
	width: 70%;
	font-size:25px;
	text-align: center;
	color:#000a2d;
	
}

.sidenav 
	{
  width: 210px;
	height:100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background: transparent;
  overflow-x: hidden;
	 -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  padding: 50px 0;
	border-right:3px solid #0ff;
/* 		z-index:999999; */
}

.sidenav a
	{
	display:block;
	text-transform: uppercase;
	text-decoration: none;
	font-size:20px;
	padding: 6px 8px 26px 6px;
	animation: slide  1s ease forwards;
	opacity:0;
}
	.sidenav a:nth-child(1){animation-delay:2s; margin-top:3rem}
	.sidenav a:nth-child(2){animation-delay:3.2s;}
	.sidenav a:nth-child(3){animation-delay:4.2s;}
	.sidenav a:nth-child(4){animation-delay:5.2s;}
	.sidenav a:nth-child(5){animation-delay:6.2s;}
	.sidenav a:nth-child(6){animation-delay:7.2s;}
	
	@keyframes slide{
		from{transform: translatex(-20px);}
		to{opacity:1;}
	}
	
.sidenav  a:hover{
	background-color: #000a2d;
	color: #0ff;
	transition: .4s linear;
}

#main-doc{
	margin-left:230px;
	margin-right:20px;
	display:grid;
	grid-template-columns:repeat(auto-fit), minmax(400px, 1fr);
}
#what-is-new, #howTos, #setup-usage, #python-library, #faq{
	padding: 20px 0 20px 20px;
	border-radius:10px;
	font-size: 20px;
	line-height: 38px;
	margin-bottom:20px;
	margin-top:2em;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	transition:500ms;
}

#what-is-new:hover, #howTos:hover, #setup-usage:hover, #python-library:hover, #faq:hover{
	border: #000a2d 1px solid;
	transition:500ms;
}

li{
	list-style-type: none;
}



h2, .back-to-top{
		background-color: #565656;
  color: transparent;
	text-align:center;
	text-transform:uppercase;
  text-shadow: 1px 1px 1px rgba(231, 231, 231, 0.6);
	font: bold 40px sans-serif;
  -webkit-background-clip: text;
	background-clip: text;
	margin-bottom:20px;
}
	h2{
		font-size:30px;
	}
#faq{
	margin: 20px 0;
}
a{
	color: #000a2d;
	padding:7px;
	text-decoration:none;
	font-size: 25px;
	line-height:30px;
}

ul > a:hover{
	color: #0ff;
	text-decoration:#000a2d underline;
	transition:all .4s linear;
}

.setup-p{
	margin-bottom: 20px;
}
#form-div{
	clear:both;
	text-align:center;
	display: grid;
	place-items:center;
}

label{
	color: #000a2d;
	font: 25px 'Rajdhani', sans-serif;
	transform:scaleY(1.2);
}

#label-for-email, #label-for-name{
	display:inline-block;
}
#label-for-name{
	margin-right: 10px;
}
#name, #email{
	color:#000a2d;
	font: 20px 'Rajdhani', sans-serif;
	height:35px;
	width:240px;
	border-radius:15px;
	border: 1px solid #000a2d99;
	background: transparent;
	margin:10px 0;
	padding-left:4px;
}
#name:focus, #email:focus, textarea:focus{
	background-color: #000a2d;
	color: #0ff;
	transform: translatey(-4px);
}

textarea{
	padding:10px;
	color:#000a2d;
	font: 20px 'Rajdhani', sans-serif;
	margin: 2em 0;
	width:80%;
	height: 200px;
	border: 1px solid #000a2d99;
	border-radius:15px;
	background: transparent;
}

#submit{
	background-color: transparent;
	border: 1px solid #000a2d;
	border-radius:10px;
	width:100px;
	height:50px;
	color: grey;
	font: 20px 'Rajdhani', sans-serif;
	padding:10px;
	margin-bottom: 4em;
}
#submit:hover{
	color:#0ff;
	background:#000a2d;
	border-bottom:4px solid #0ff;
	transform:translatey(-6px);
}

.top-wrapper{
	display:block;
	margin-top:2em;
}

.back-to-top{
	padding:10px;
	width:10px;
	border:1px solid #aaa;
	border-radius: 15px 15px 0 0;
}
	footer{
		font-size:20px;
	}
}
@media screen and (max-width:950px){
	.rotate{
		opacity:.2;
		transition:400ms;
		animation:opacity 10s ease alternate infinite;
	
	}
		@keyframes opacity{
		0%{opacity:.1;}
		100%{opacity:.1;}
	}
	
}
/* add media query for responsiveness */
@media (max-width:700px)
{
	*
	{
		transition: 400ms;
	}
	
	body{	background:url("https://heptagonindustries.com.ng/wp-content/uploads/2020/09/history.jpg");
	background-attachment: fixed;
	background-position: bottom left;
}
	
	img{
	width:30px;
	margin-bottom:-10px;
	margin-top:10px;
}
	.rotate{
  padding: 10px;
	padding-right:0;
	max-width:200px;
	margin:0;
	margin-top:8em;
		display: block;
  margin-left: auto;
  margin-right: auto;
		z-index:-1;
		animation: opacity 5s ease alternate infinite;
}

	
	h2.logo-text{
	background-color: #565656;
  color: transparent;
  text-shadow: 1px 2px 3px rgba(112, 112, 112, 0.5);
	font: bold 30px arial, sans-serif;
  -webkit-background-clip: text;
	background-clip: text;
	margin-top:-26px;
	margin-left:5em;
}

.logo-div{
	position: sticky;
	z-index:1;
	top:0;
	text-align: center;
	width: 100%;
		height:45px;
	background-color:rgb(0,0,0);
    backdrop-filter: blur(34px);
	border-bottom:cyan 1px solid;
	opacity: .8;
}
	
	#description{
	margin: 50px 0;
		margin-bottom: 2em;
		font-size: 20px;
		color: #000a2d;
		text-align: center;
	text-transform:uppercase;
	width: 100%;
}
	
	.sidenav {
		display:inline;
  padding: 0;
		text-align: center;
}
.light .sidenav
{
	border:none;
}

.sidenav a{
	display:block;
	text-transform: uppercase;
	text-decoration: none;
	font-size:18px;
	padding: 6px 8px 6px 6px;
	animation:fade 3s ease-out forwards;
	opacity:0;
}
	.sidenav a:nth-child(1){animation-delay:2s;}
	.sidenav a:nth-child(2){animation-delay:3.2s;}
	.sidenav a:nth-child(3){animation-delay:4.2s;}
	.sidenav a:nth-child(4){animation-delay:5.2s;}
	.sidenav a:nth-child(5){animation-delay:6.2s;}
	.sidenav a:nth-child(6){animation-delay:7.2s; margin-bottom:2em;}
	
	.sidenav > a:hover{
	background-color: #000a2d;
	color: #0ff;
	transition:all 300ms;
}


#what-is-new, #howTos, #setup-usage, #python-library, #faq{
	padding: 20px 0 20px 20px;
	border-radius:10px;
	font-size: 18px;
	line-height: 28px;
	margin-bottom:20px;
	box-shadow: 0px 0px 10px  rgba(0,0,0,0.3);
}

#what-is-new:hover, #howTos:hover, #setup-usage:hover, #python-library:hover, #faq:hover{
	border: #0ff 1px solid;
}

li{
	list-style-type: none;
}



h2, .back-to-top{
		background-color: #565656;
  color: transparent;
	text-align:center;
	text-transform:uppercase;
  text-shadow: 1px 1px 1px rgba(231, 231, 231, 0.6);
	font: bold 30px sans-serif;
  -webkit-background-clip: text;
	background-clip: text;
	margin-bottom:20px;
}
	h2{
		background-color: #565656;
	text-transform:uppercase;
	font-size:20px;
}
#faq{
	margin: 20px 0;
}
a{
	color: #000a2d;
	padding:7px;
	text-decoration:none;
	font-size: 20px;
	line-height:25px;
}

ul > a:hover{
	color: #0ff;
	text-decoration:#000a2d underline;
	transition:all .4s linear;
}

.setup-p{
	margin-bottom: 20px;
}
#form-div{
	clear:both;
	text-align:center;
	display: grid;
	place-items:center;
}

label{
	color: #000a2d;
	font: 20px 'Rajdhani', sans-serif;
	transform:scaleY(1.2);
}

#label-for-email, #label-for-name{
	display:inline-block;
}
#label-for-name{
	margin-right: 10px;
}
#name, #email{
	color:#000a2d;
	font: 20px 'Rajdhani', sans-serif;
	height:35px;
	width:240px;
	border-radius:15px;
	border: 1px solid #000a2d99;
	background: transparent;
	margin:10px 0;
	padding-left:4px;
}
#name:focus, #email:focus, textarea:focus{
	background-color: #000a2d;
	color: #0ff;
	transform: translatey(-4px);
}

textarea{
	padding:10px;
	color:#000a2d;
	font: 20px 'Rajdhani', sans-serif;
	margin: 2em 0;
	width:90%;
	height: 200px;
	border: 1px solid #000a2d99;
	border-radius:15px;
	background: transparent;
}

#submit{
	background-color: transparent;
	border: 1px solid #000a2d;
	border-radius:10px;
	width:100px;
	height:50px;
	color: grey;
	font: 15px 'Rajdhani', sans-serif;
	padding:10px;
	margin-bottom: 4em;
	outline:none;
	cursor: pointer;
}
#submit:hover{
	color:#0ff;
	background:#000a2d;
	border-bottom:4px solid #0ff;
	transform:translatey(-6px);
}

.top-wrapper{
	display:block;
	margin-top:2em;
}

.back-to-top{
	padding:10px;
	width:10px;
	border:1px solid #aaa;
	border-radius: 15px 15px 0 0;
}
	footer{
		font-size:13px;
	}
	
}

@media (max-width:568px)
{
	h2
	{
		font-size:17px;
	}
}
div .social-icons > a{
	letter-spacing:10px;
}
div .social-icons > a > i:hover{
	transform:scale(1.6);
	filter:saturate(150%);
}
div .social-icons .fa-facebook-official:hover{
	color:#3b5998 ;
}
div .social-icons .fa-twitter:hover{
	transform:scale(2);
	color:#00acee;
}
div .social-icons .fa-instagram:hover{
	color:#e21855;
}
div .social-icons .fa-youtube-play:hover{
	color:#c4302b;
}
.wrapper{
	width:100%;
	text-align:center;
	margin-top:2em;
}
footer{
/* 	margin-top:1em; */
	animation:color 20s ease alternate infinite;
}
@keyframes color{
	0%{color:#72011f;}
	20%{color:#24564f;}
	40%{color:#606060;}
	50%{color:#000a2d;}
	60%{color:#022289;}
	80%{color:#007d91;}
	90%{color:#0ff;}
	100%{color:coral;}
}


::placeholder{
text-align: center;	
	font: 15px 'Rajdhani', sans-serif;
}
::selection{
	background-color:grey;
	color:#eee;
}

::-webkit-scrollbar{
	width:8px;
}
::-webkit-scrollbar-thumb{
	background: linear-gradient(45deg, #7f7f7f, #e1dfdf, #7f7f7f);
	border-radius: 10px;
}
::-webkit-scrollbar-track{
	box-shadow: inset 1px 2px 4px grey; 
	background-color:#F5F5F5;
}
@keyframes spining {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

              
            
!

JS

              
                $(document).ready(function () {
	const body = document.querySelector("body");
	const toggled = document.getElementById("toggle");
	toggled.onclick = function () {
		body.classList.toggle("light");
		toggled.classList.toggle("active");
	};
});

              
            
!
999px

Console