* {margin: 0; padding: 0; text-decoration: none; color: #3a495fa6; font-family: 'Roboto', sans-serif; list-style: none; outline: none;}

body {
    
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='2'%3E%3Cpath transform='translate(0 0)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='4' transform='rotate(0 800 450)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(0 0)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='4'%3E%3Cpath transform='translate(0 0)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='8' transform='rotate(0 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='rotate(0 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    
    background-size: cover;
    background-repeat: no-repeat;

    animation: bgUp 5s infinite;

    overflow-x: hidden;


}

#hidden { display: none; }

.display-flex {  display: flex; }

.display-grid { display: grid; }

/* HEADER */

.page-header {
	padding: 20px 14px;
    margin-bottom: 10vh;
}

.page-navegator {
	width: -webkit-fill-available;
	width: -moz-available;

	display: flex;
	padding: 0px 20px;
	align-items: center;

    flex-wrap: wrap;
}

.navegator-logo {
    width: 80px;
    height: 80px;
    background: url(../images/logo.png) center no-repeat;
    background-size: contain;
}

.navegator-title {
    display: flex;
    align-items: center;
    margin-left: 25px;
    
}

.navegator-title h1 {
    font-family: 'Nunito';
    margin-right: 12px;
    font-size: 2.5em;
    color: #3c3b3b;
}

.navegator-title span {
    padding: 5px;
    background: #03A9F4;
    border-radius: 3px;
    color: white;
    font-size: 10px;
    position: relative;
    top: -10px;
    cursor: pointer;
}


nav {
	width: -webkit-fit-content;
    width: -moz-fit-content;
    margin: 0 30px 0 auto;
    display: flex;
    align-items: center;
    padding: 25px 20px;
    border-radius: 10px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='2'%3E%3Cpath transform='translate(0 0)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='4' transform='rotate(0 800 450)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(0 0)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='4'%3E%3Cpath transform='translate(0 0)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='8' transform='rotate(0 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='rotate(0 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    
    background-size: cover;
    box-shadow: 0 2px 4px 0px whitesmoke;   
}

nav ul { display: flex; align-items: center; }

nav ul li { margin: 0px 10px; }

nav ul li a { font-family: 'Roboto Slab'; color: #3a495fa6; padding: 10px; cursor: pointer;}

nav ul li a:hover {color: black;}

nav ul li#active {
	padding: 10px 20px;
    background: #27b069;
    color: white;
    border-radius: 4px;

    animation: pop .2s 1;
}

nav ul li#active a {color: white;}


/* UTILS BUTTONS */

.vote-button {
    color: white;
    width: fit-content;
    position: fixed;
    padding: 10px 30px;
    background: #03a9f4;
    border-radius: 15px;
    top: 93vh;
    right: 21px;
    cursor: pointer;
    box-shadow: 0 2px 3px #03a9f442;
    transition: .4s;
}

.vote-button i { color: white; margin-right: 4px; transition: .2s;}

.vote-button:hover { 
    background: #ffeb3b;
    box-shadow: 0 2px 3px #ffeb3b3b;
    color: black;
}

.vote-button:hover i { color: black; }

.theme-toggler {
    position: fixed;
    top: 50%;
    transform: translate(-65%, -50%);
    padding: 10px 35px;
    background: black;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    color: white;
    transition: .5s;
    box-shadow: 0 0 12px 0 whitesmoke;
}

.theme-toggler i {
    color: white;
    transform: scale(1.4);
}

.theme-toggler:hover {
    transform: translate(-20%, -50%);
    cursor: pointer;
}

/* NOTIFICATIONS */

.notifications {
    position: fixed;
    right: 40px;
    top: 5vh;
    padding: 23px;
    overflow: hidden;   
    z-index: 100000;
}



.notifications .notification {
    min-width: 250px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    padding: 15px 30px;
    margin: 20px 0px;
    background: white;
    border-radius: 3px;
    display: flex;
    box-shadow: 0 0 7px 0px #b9b9b945;
    cursor: pointer;
    animation: pop .5s 1;
    transition: .2s;
    


}

.notification:hover {
    transform: translateY(-10px);
    
}

.notification .notification-logo {
    width: 47px;
    height: 47px;
    background: url(../images/logo.png) center no-repeat;
    background-size: contain;
    margin-right: 25px;
}

.notification .notification-content p {
    color: black;
    margin-bottom: 8px;
}


.footer {
    padding: 5vh 4vh;
    
    justify-content: center;
}


.footer-content {
    text-align: center;
}

.footer-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 12px;
}

/* DARK MODE */ 


body.dark-mode {
    background-color: #090a12;
    background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0' gradientTransform='rotate(0,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(147,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='10.23'%3E%3Cpath transform='translate(-41.65 2.8) rotate(-0.04999999999999982 1409 581) scale(0.9823159999999999)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='3.4100000000000006' transform='translate(-49 31) rotate(3.3000000000000003 800 450) scale(1.00394)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(8.700000000000001 -39) rotate(27 401 736) scale(1.00394)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='3.1'%3E%3Cpath transform='translate(186 -0.39999999999999947) rotate(0.09999999999999987 150 345) scale(0.992772)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='6.820000000000001' transform='translate(-58 -83.5) rotate(25.200000000000003 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='translate(-118.8 33.2) rotate(4.2 1400 132) scale(0.94)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E);
    background-attachment: fixed;
    background-size: cover;
}

.dark-mode .theme-toggler { background: white; box-shadow: 0 0 12px 0 #ffffff47;}

.dark-mode .theme-toggler i { color: black;}

.dark-mode .notifications .notification {
    background: #090a12;
    box-shadow: 0 0 7px 0px #000000;
}

.dark-mode .notification .notification-content p {
    color: white;
}

.dark-mode .notification .notification-content span {
    color: white;
}

.dark-mode nav {
    background-color: #090a12;
    box-shadow: 0 3px 4px black;
}

.dark-mode nav ul li a {
    color: #ffffff6b;
    transition: .2s;
}

.dark-mode nav ul li a:hover { color: white; }


.dark-mode .navegator-title h1 {color: white;}

.dark-mode .footer-content a { color: white; opacity: .5; }
.dark-mode .footer-content span { color: white; opacity: .5; }


/* ANIMATIONS */

@keyframes pop {from{opacity: 0; transform: scale(0.8);}to{opacity: .5;transform: scale(1);}}

@keyframes out {from{opacity: .5; transform: scale(1);}to{opacity: 0;transform: scale(0.8);}}

@keyframes bgUp {
    100% {background-position-y: 0px;}
    50% {background-position-y: -3vh}
    100% {background-position-y: 0px;}
}

.clipboard {
    position: relative;
    cursor: pointer
}

.clipboard:after {
    content: "Copy";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 2px solid #27b069;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #27b069;
    font-size: 17px;
    font-weight: 500;
    border-radius: 4px;
    opacity: 0
}

.clipboard:before {
    content: "Copied";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 2px solid #27b069;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #27b069;
    font-size: 17px;
    font-weight: 500;
    border-radius: 4px;
    opacity: 0
}

.clipboard:hover:after {
    opacity: 1
}

.clipboard.ok:after {
    opacity: 0
}

.clipboard.ok:before {
    opacity: 1
}

.server_ip {
    padding: 10px 25px;
    background: #27b069;
    border-radius: 20px;
    font-size: 14px;
    color: #fff
}