:root{
    --bg0: #282a36;
    --bg1: #44475a;

    --fg: #f8f8f2;

    --blue:   #6272a4;
    --cyan:	  #8be9fd;
    --green:  #50fa7b;
    --orange: #ffb86c;
    --pink:   #ff79c6;
    --purple: #bd93f9;
    --red:    #ff5555;
    --yellow: #f1fa8c;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body:not(footer){
    color: var(--fg);
    background-color: var(--bg0);
    font-family: monospace;
}

/* Scroll bar style start*/

body::-webkit-scrollbar{
    width: .25rem;
}

body::-webkit-scrollbar-track{
    background: var(--bg0)
}

body::-webkit-scrollbar-thumb{
    background: var(--purple)
}

/* Scroll bar style end */

/* Nav Bar Style Start */
nav{
    position: fixed;
}

nav ul{
    background: var(--bg1);
    min-height: 100vh;
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

nav ul li{
    background: var(--bg0);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

nav ul li.active{
    border-radius: 36%;
}

nav ul li:hover{
    border-radius: 36%;
}

nav ul li.divider{
    background: var(--fg);
    height: 2px;
    border-radius: 1px;
    opacity: 0.6;
}

nav ul li p{
    background: var(--bg1);
    padding: .1rem .2rem;
    margin-top: .7rem;
    position: absolute;
    left: 110%;
    width: max-content;
    border-radius: 4px;
    opacity: 0;
}

nav ul li:hover p{
    opacity: 1;
}

nav ul li img{
    width: 1.5rem;
}

nav ul li.bottom{
  margin-top: auto;
}
/* Nav Bar Style End */

/* Footer style Start */
footer{
    margin: 0 20% 20% 20%;
}

footer div{
    margin-bottom: .3rem;
}

footer div.qr-codes{
    text-align: center;
    display: flex;
    justify-content: space-evenly;
}

footer div.qr-codes div{
    padding: 1rem 2rem;
}

footer div.qr-codes div p{
    font-size: .7rem;
    color: var(--green);
    margin: .5rem;
    max-width: inherit;
}

footer div.qr-codes div h4 img{
    width: 1.1rem;
}

footer div.qr-codes img{
    width: 11rem;
}
/* Footer Style End */

/* Elements Style Start */

main{
    margin: 0 20%;
}

header{
    text-align: center;
	color: var(--green);
    font-size: 1.5rem;
    margin: .8rem 0;
}

h2 {
	text-align: center;
    color: var(--purple);
    font-size: 1.3rem;
    margin: .8rem 0;
}

h3 {
	text-align: center;
    color: var(--yellow) ;
}

p{
    color: var(--fg);
    font-size: .9rem;
}

a{
    text-decoration: none;
    color: var(--cyan);
}

a:hover{
    color: var(--fg);
    text-decoration: underline;
    transform: .5s;
}

pre{
    background: var(--bg1);
    border-radius: .3rem;
    margin: 1rem;
}

p code{
    background: var(--bg1);
    border-radius: .3rem;
    padding: .2rem;
}

/* Element Style End */