/*
 * @@@  @@@   @@@@@@   @@@@@@        @@@@@@@@  @@@  @@@  
 * @@@  @@@  @@@@@@@@  @@@@@@@       @@@@@@@@  @@@  @@@  
 * @@!  !@@       @@@      @@@       @@!       @@!  @@@  
 * !@!  @!!      @!@       @!@       !@!       !@!  @!@  
 *  !@@!@!      !!@    @!@!!@        @!!!:!    @!@  !@!  
 *   @!!!      !!:     !!@!@!        !!!!!:    !@!  !!!  
 *  !: :!!    !:!          !!:       !!:       !!:  !!!  
 * :!:  !:!  :!:           :!:  :!:  :!:       :!:  !:!  
 *  ::  :::  :: :::::  :: ::::  :::   :: ::::  ::::: ::  
 *  :   ::   :: : :::   : : :   :::  : :: ::    : :  :
 * 
 * CSS HANDWRITTEN BY MAIK VIERKÖTTER
*/

a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}
a:hover {
	color: rgba(65, 180, 255, 0.78);
}

p {
	margin: 0 auto;
	padding: 0 auto;
}

bluetext {
	color: #3972a6;
}

body {
	font-family: "THX2GGL";
	background-color: rgba(230, 230, 230, 0.8);
	color: #444444;
}

input {
	font-family: "THX2GGL";
}

.form-control {
	border: 1px solid #d4d4d4;
	border-radius: 10px;
	box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
	font-weight: 600;
}

.form-control::-webkit-input-placeholder {
  color: #dadada;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #dadada;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #dadada;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #dadada;
  opacity: 1;
}

.form-control::placeholder {
  color: #dadada;
  opacity: 1;
}

@keyframes navigation {
	0%{
		right: 100%;
		width: 0%;
		max-height: 0%;
		visibility: hidden;
		}
	50%{
		right: 100%;
		width: 100%;
		max-height: 30%;
	}
	100%  {
		right: 100%;
		width: 100%;
		max-height: 100%;
		}
}

.container {
	margin-right: auto;
	margin-left: auto;
	position: relative;
	padding: 3em 0em 0em 0em;
	width: 90%
}

@font-face {
	font-family: "THX2GGL";
	src: url("../fonts/THX2GGL.ttf") format("truetype");
	font-style: normal;
} 

.pg-canvas {
	position:fixed !important;
	filter: blur(6px);
    -webkit-filter: blur(6px);
}

.footer {
	font-size: 14px;
	padding: 1em 0em 7em 0em;
	color: rgba(255, 255, 255, 0.8);
	font-weight: regular;
}

.card {
	background-color: rgba (255,255,255,0.2);
	border-radius: 10px;
}

.card-body {
	background-color: rgba (255,255,255,0.2)
}

.card-text {
	color: #434343;
}

.logo {
	font-weight: 600;
}

.lead {
	font-size: 1.25rem;
	font-weight: 600;
	color: #434343;
}

.bg-primary {
	background-color: #3972a6;
	background-image: linear-gradient(to right, #3972a6, #a064a2) !important;
	border-radius: 10px;
	box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}

.coding {
	font-weight: 500;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.5);
}
.matrixcode {
	color: rgba(255, 255, 255, 0.3);
}

.input-group-text {
	color: #ffffff;
	background-color: #505050;
	font-weight: 600;
	padding: 0.375rem 1.75rem;
	border: 1px solid #505050;
	border-radius: 10px;
	box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}

.input-group-text:hover {
	background-color: #6b6b6b;
}

.ipv4 {
	font-size: 2.8rem;
	font-weight: 600;
}

.logo {
	font-size: 1.50rem;
	font-weight: 600;
}

.anitext {
  background: linear-gradient(to right, #3972a6 20%, #a064a2 40%, #a064a2 60%, #3972a6 80%);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animatedtext 5s linear infinite;
  -webkit-animation: animatedtext 5s linear infinite;
  -moz-animation: animatedtext 5s linear infinite;
  -o-animation: animatedtext 5s linear infinite;
}
@keyframes animatedtext {
    to {
      background-position: 200% center;
    }
  }
  
#animated_BG {
	width:100%;
	height:100vh;
}

.toplogo {
	display: block;
	width: auto;
	height: 2.1em;
}

.navbar-collapse {
	margin-left: 7px;
}

.uppercase {
	text-transform: uppercase;
}

.list-group-item {
	padding: 0.2rem 1.25rem;
	box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}

.list-group-item:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.list-group-item:last-child {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

@keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.lds-double-ring div {
  box-sizing: border-box;
}
.lds-double-ring > div {
  position: absolute;
  width: 168px;
  height: 168px;
  top: 16px;
  left: 16px;
  border-radius: 50%;
  border: 8px solid #000;
  border-color: #3972a6 transparent #3972a6 transparent;
  -webkit-animation: lds-double-ring 2.7s linear infinite;
  animation: lds-double-ring 2.7s linear infinite;
}
.lds-double-ring > div:nth-child(2),
.lds-double-ring > div:nth-child(4) {
  width: 148px;
  height: 148px;
  top: 26px;
  left: 26px;
  -webkit-animation: lds-double-ring_reverse 2.7s linear infinite;
  animation: lds-double-ring_reverse 2.7s linear infinite;
}
.lds-double-ring > div:nth-child(2) {
  border-color: transparent #a064a2 transparent #a064a2;
}
.lds-double-ring > div:nth-child(3) {
  border-color: transparent;
}
.lds-double-ring > div:nth-child(3) div {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.lds-double-ring > div:nth-child(3) div:before,
.lds-double-ring > div:nth-child(3) div:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  top: -8px;
  left: 72px;
  background: #3972a6;
  border-radius: 50%;
  box-shadow: 0 160px 0 0 #3972a6;
}
.lds-double-ring > div:nth-child(3) div:after {
  left: -8px;
  top: 72px;
  box-shadow: 160px 0 0 0 #3972a6;
}
.lds-double-ring > div:nth-child(4) {
  border-color: transparent;
}
.lds-double-ring > div:nth-child(4) div {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.lds-double-ring > div:nth-child(4) div:before,
.lds-double-ring > div:nth-child(4) div:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  top: -8px;
  left: 62px;
  background: #a064a2;
  border-radius: 50%;
  box-shadow: 0 140px 0 0 #a064a2;
}
.lds-double-ring > div:nth-child(4) div:after {
  left: -8px;
  top: 62px;
  box-shadow: 140px 0 0 0 #a064a2;
}
.lds-double-ring {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}