:root {
  --glitched-duration: 0.9s;
  --glitched-long-duration: 3s;
  --yellow-color: #f9f002;
  --yellow-color-opacity: #f9f00242;
  --orange-color: #ff9800;
  --border-color: #8ae66e;
  --red-color: #ff003c;
  --blue-color: #136377;
  --green-color: #446d44;
  --purple-color: purple;
  }

body
{
  padding: 0;
  margin: 10; 
  border: 10;
  background: url("../img/background_body.webp");
  background-size: contain;
  background-color: #0f0e41;
}

h1
{
	font-size: 4rem;
	font-family: 'Advent Pro', sans-serif;
  font-weight: 500;
	text-align: center;
}

h2 {
	font-size: 2rem;
	font-family: 'Advent Pro', sans-serif;
  font-weight: 400;
	text-align: center;
}

h3 {
	font-size: 1.5rem;
	font-weight: 300;
	font-family: 'Advent Pro', sans-serif;
	text-align: justify;
}

h4 {
	font-size: 1.5rem;
	font-weight: 400;
	font-family: 'Advent Pro', sans-serif;
	text-align: center;
}

h5 {
	font-size: 1.5rem;
	font-weight: 300;
  font-style: italic;
	font-family: 'Advent Pro', sans-serif;
	text-align: center;
}

h6 {
	font-size: 2rem;
	font-family: 'Advent Pro', sans-serif;
  font-weight: 400;
	text-align: left;
}


/*glitch bar*/

h1.cyberpunk,
h2.cyberpunk,
h3.cyberpunk,
h4.cyberpunk,
h6.cyberpunk {
  font-size: 2rem;
  line-height: 2.2rem;
  font-weight: 400;
  position: relative;
  padding-bottom: 15px;
}

h2.cyberpunk {
  font-size: 1.7rem;
  line-height: 1.9rem;
  font-weight: 300;
}

h3.cyberpunk {
  font-size: 1.4rem;
  line-height: 1.6rem;
  font-weight: 500;
}

h4.cyberpunk {
  font-size: 1rem;
  line-height: 1.2rem;
  font-weight: 700;
}

h1.cyberpunk:before,
h2.cyberpunk:before,
h3.cyberpunk:before,
h4.cyberpunk:before,
h1.cyberpunk:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 2px;
    width: 100%;
    height: 10px;
    background-color: #000000;
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
}

h1.cyberpunk.glitched {
  animation-name: h1glitched;
  animation-duration: calc(var(--glitched-duration) * 1.4);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

h2.cyberpunk.glitched {
  animation-name: h1glitched;
  animation-duration: calc(var(--glitched-duration) * 1.7);
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: linear;
}

h3.cyberpunk.glitched {
  animation-name: h1glitched;
  animation-duration: calc(var(--glitched-duration) * 1.1);
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: ease-out;
}

h4.cyberpunk.glitched {
  animation-name: h1glitched;
  animation-duration: calc(var(--glitched-duration) * 2.1);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

h6.cyberpunk.glitched {
  animation-name: h1glitched;
  animation-duration: calc(var(--glitched-duration) * 1.4);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes h1glitched {
  0% {
    transform: skew(-20deg);
    left: -4px;
  }
  10% {
    transform: skew(-20deg);
    left: -4px;
  }
  11% {
    transform: skew(0deg);
    left: 2px;
  }
  50% {
    transform: skew(0deg);
  }
  51% {
    transform: skew(10deg);
  }
  59% {
    transform: skew(10deg);
  }
  60% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}

h1.cyberpunk.glitched:before {
  animation-name: h1beforeglitched;
  animation-duration: calc(var(--glitched-duration) * 2);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

h6.cyberpunk.glitched:before {
  animation-name: h1beforeglitched;
  animation-duration: calc(var(--glitched-duration) * 2);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes h1beforeglitched {
  0% {
    transform: skew(-20deg);
    left: -4px;
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  10% {
    transform: skew(-20deg);
    left: -4px;
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  11% {
    transform: skew(0deg);
    left: 2px;
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  50% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  51% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 40% 5px, calc(40% - 30px) 0px, calc(40% + 30px) 0px, calc(45% - 15px) 5px, 100% 5px, 100% 6px, calc(45% - 14px) 6px, calc(40% + 29px) 1px, calc(40% - 29px) 1px, calc(40% + 1px) 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  59% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 40% 5px, calc(40% - 30px) 0px, calc(40% + 30px) 0px, calc(45% - 15px) 5px, 100% 5px, 100% 6px, calc(45% - 14px) 6px, calc(40% + 29px) 1px, calc(40% - 29px) 1px, calc(40% + 1px) 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  60% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  100% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
}

h2.cyberpunk:before {
  clip-path: polygon(0px 5px, 35px 5px, 40px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 20px 10px, 15px 6px, 0px 6px);
}

h2.cyberpunk.glitched:before {
  animation-name: h2beforeglitched;
  animation-duration: calc(var(--glitched-duration) * 2);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes h2beforeglitched {
  0% {
    transform: scaleY(1);
  }
  10% {
    transform: scaleY(1);
  }
  11% {
    transform: scaleY(-1);
  }
  50% {
    transform: scaleY(-1);
  }
  51% {
    transform: scaleY(1);
  }
  59% {
    transform: scaleY(1);
  }
  60% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}

h3.cyberpunk:before {
        clip-path: polygon(0px 5px, 10px 5px, 15px 0px, 40px 0px, 45px 5px, 100% 5px, 100% 6px, 31px 6px, 27px 2px, 15px 2px, 8px 10px, 0px 10px);
}

h4.cyberpunk:before {
        clip-path: polygon(0px 3px, 15px 3px, 20px 0px, 80px 0px, 85px 3px, 100% 3px, 100% 4px, 85px 4px, 80px 7px, 20px 7px, 15px 4px, 0px 4px);
}

h1.cyberpunk:after,
h2.cyberpunk:after,
h3.cyberpunk:after,
h4.cyberpunk:after,
h6.cyberpunk:after,
p.cyberpunk:after {
  content: "_";
  animation-name: hxafter;
  animation-duration: var(--glitched-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

h3.cyberpunk:after,
h4.cyberpunk:after {
  animation-direction: reverse;
  animation-duration: calc(var(--glitched-duration) / 2);
}

@keyframes hxafter {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}



#content
{
  background-color: #F7F7F7;
  color: black;
  width: 770px;
  margin: 15px;
  padding: 15px;
  font-size: 15px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
}

a.classe1:link, a.classe1:visited, a.classe1:active 
{
	text-decoration: underline;
	color: #be171d;
}

a.classe1:hover 
{
	text-decoration: underline overline;
	color: #ed1d24;
}

.button, a.button {
  --background-color: #ff003c;
  display: block;
  border: none;
  border-radius: 0%;
  font-size: 1.5rem;
  line-height: 100%;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: "Advent Pro", arial;
  padding: 35px 75px;
  margin: 10px;
  position: relative;
  color: #fff;
  border-right: 3px solid #88ff8e;
  clip-path: polygon(
    -15px 0%,
    calc(100% + 15px) 0%,
    calc(100% + 15px) 100%,
    20px 100%,
    -15px calc(100% - 35px)
  );
  cursor: pointer;
  background-color: var(--background-color);
  outline: none;
}

.button:hover,
a.button:hover,
.button:focus,
a.button:focus {
  animation-name: hover;
  animation-duration: var(--glitched-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

.button0,
a.button3 {
  --background-color: #0044ff;
}

.button1,
a.button3 {
  --background-color: #2258ee;
}

.button2,
a.button3 {
  --background-color: #3c64d3;
}

.button3,
a.button3 {
  --background-color: #455da0;
}

.button:after,
a.button:after {
  content: "R-25";
  display: block;
  position: absolute;
  bottom: 0px;
  right: 25px;
  padding: 2px 2px 0px 2px;
  font-size: 0.6rem;
  line-height: 9px;
  color: #000;
  background-color: #f9f002;
  border-left: 2px solid #8ae66e;
}

.button:hover:after,
a.button:hover:after,
.button:focus:after,
a.button:focus:after {
  animation-name: hoverafter;
  animation-duration: var(--glitched-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.button:before,
a.button:before {
  --outside: 4px;
  content: "";
  position: absolute;
  display: none;
  background-color: var(--background-color);
  width: calc(100% + (var(--outside) * 2));
  height: 12px;
  top: 0px;
  left: calc(0px - 1px - var(--outside));
  border-left: 2px solid #8ae66e;
  border-right: 2px solid #8ae66e;
}

.button:hover:before,
a.button:hover:before,
.button:focus:before,
a.button:focus:before {
  display: block;
  animation-name: hoverbefore;
  animation-duration: var(--glitched-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes hover {
  0% {
    transform: skew(0deg);
  }
  60% {
    transform: skew(0deg);
  }
  61% {
    transform: skew(10deg);
  }
  70% {
    transform: skew(10deg);
  }
  71% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}

@keyframes hoverbefore {
  0% {
    display: none;
    top: 0px;
  }
  10% {
    display: none;
    top: 0px;
  }
  11% {
    display: block;
    top: 10px;
    left: calc(0px - 0px - var(--outside));
  }
  29% {
    top: 10px;
  }
  30% {
    display: none;
    top: 0px;
  }
  50% {
    display: none;
    top: 0px;
  }
  51% {
    display: block;
    top: 55px;
    filter: blur(1px);
    height: 22px;
  }
  90% {
    display: block;
    top: 55px;
    height: 22px;
  }
  91% {
    filter: blur(0px);
    display: none;
    top: 0px;
    height: 12px;
  }
  100% {
    display: none;
    top: 0px;
  }
}

@keyframes hoverafter {
  0% {
    right: 45px;
  }

  10% {
    right: 45px;
  }
  11% {
    right: 35px;
  }
  20% {
    transform: skew(0deg);
  }
  21% {
    transform: skew(-10deg);
  }
  40% {
    transform: skew(-10deg);
  }
  41% {
    transform: skew(0deg);
  }
  49% {
    right: 35px;
  }
  50% {
    right: 55px;
  }

  60% {
    right: 55px;
  }
  61% {
    right: 35px;
  }
  70% {
    transform: skew(0deg);
  }
  71% {
    transform: skew(10deg);
  }
  80% {
    transform: skew(10deg);
  }
  81% {
    transform: skew(0deg);
  }
  100% {
    right: 35px;
  }
}


.fab
{
	position: fixed;
	bottom: 20px;
	right: 20px;
}

	.fab button {
		cursor: pointer;
		width: 55px;
		height: 55px;
		border-radius: 30px;
		background-color: #f00;
		border: none;
		font-family: 'Comfortaa', sans-serif;
		font-size: 1.3rem;
		color: white;
	}

.fab button.main
{
	position: absolute;
	width: 65px;
	height: 65px;
	border-radius: 30px;
	background-color: #000;
	right: 0;
	bottom: 0;
	z-index: 20;
}

.fab button.main:before
{
	content: 'ficha';
}

.fab button.main:active,
.fab button.main:focus {
	outline: none;
	background-color: #eac291;
}

.fab button.main:active:before,
.fab button.main:focus:before {
	content: '';
}

.modalVisual {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.8);
}

.modalConteudo {
	margin: auto;
	display: block;
	width: 100%;
	max-width: 800px;
}

#txtImg {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

.fechar {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
}


/*BARRA DE SCROLL */

::-webkit-scrollbar {
  background-color: #6f2bee;
}
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-track {
  display: none;
}
::-webkit-scrollbar-track-piece {
  display: none;
}
::-webkit-scrollbar-thumb {
  background-color: #17969b;
  border-bottom: 2px solid #9678db;
  border-right: 2px solid #9678db;
  transition: background var(--glitched-duration);
}
::-webkit-scrollbar-thumb:hover {
  background-color: #0f6063;
}
::-webkit-scrollbar-corner {
  display: none;
}
::-webkit-resizer {
  display: none;
}