html,body{
	font-family:Arial;
	font-size:0.9rem;
	padding:0px;
	margin:0px;
}

.top{
	background:#53677E;
	height:30px;
}

#section{
	width:100%;
	max-width:1200px;
	font-size:.9rem;
	display:flex;
	flex-wrap:wrap;
	height:auto;
	justify-content:center;
	margin:0 auto;
}

.cols{
	max-width: 250px;
	height: auto;
	font-size:.9rem;
 	padding:20px;
	flex:1;
 	margin:20px;
 	border:1px solid #ccc;
 	border-radius:5px;
 	height:auto;
}

buttontop{
	width:50px;
	height:25px;
}

button1{
	width:50px;
	height:25px;
}


footer{
	margin:0 auto;
	
}

.v-enter-from {
    opacity: 0;
    translate: -100px 0;
}

.v-enter-to {
    opacity: 1;
    translate: 0 0;
}

.v-leave-from {
    opacity: 1;
    translate: 0 0;
}

.v-leave-to {
    opacity: 0;
    translate: 100px 0;
}
  
.container {
 height:200px;
 display: flex;
 padding:1rem;
 flex-direction: column;
}

.header {
 margin: 0.25rem 0;
 font-size: 2.5rem;
}

p {
 margin: 0.5rem 0;
font-size:1rem;
}


/* animation class and keyframes */
.overflow-hidden {
 overflow: hidden;
}

.drop-in {
 animation: drop-in 1s ease 200ms backwards;
}

.drop-in-2 {
 animation: drop-in 1200ms ease 500ms backwards;
}

@keyframes drop-in {
 from {
  opacity: 0;
  transform: translateY(-100px);
 }
 to {
  opacity: 1;
  transform: translate(0px);
 }
}

.style1 {
	margin-left: 0px;
}



@keyframes shadow-pulse
{
  0% {
    box-shadow: 0 0 0 0px rgba(0, 112, 244, 0.4);
  }
  100% {
    box-shadow: 0 0 7px 25px rgba(0, 112, 244, 0);
  }
}

.pulse {
  width: 180px;
  animation: shadow-pulse 1.5s infinite;
}

svg {
  width: 100%;
  height: 100%;
}
svg text {
  font-size: 40px;
  letter-spacing: 10px;
  animation: spell 6s forwards;
}

@keyframes spell {
  0% {
    fill: rgba(50, 172, 148, 0);
    stroke: rgb(255 255 255 / 80%);
    stroke-width: 0.4;
    stroke-dasharray: 0 50%;
    stroke-dashoffset: 20%;
  }

  40% {
    fill: rgba(50, 172, 148, 0);
    stroke:rgb(255 255 255 / 80%);
    stroke-width: 0.8;
  }

  60% {
    fill: rgba(50, 172, 148, 0);
    stroke:rgb(255 255 255 / 80%);
    stroke-width: 1.2;
  }
  95%,
  100% {
    fill:rgb(255 255 255 / 80%);
    stroke: rgba(8, 102, 239, 0);
    stroke-width: 0;
    stroke-dashoffset: -20%;
    stroke-dasharray: 50% 0;
  }
}


a {
	outline: none;
}

.navbar-container1 {
	text-align: center;
	background-color: ;
	box-shadow: 0px -20px 5px 20px #333333;
	padding: 10px;
	font-size: 0;
}

.navbar-container1 ul {
	margin: 0;
	padding: 0;
	text-align: right;
	display: inline-block;
	vertical-align: middle;
}

.navbar-container1 ul li {
	display: inline-block;
	font-size: 20px;
  font-weight:600;
}

.navbar-container1 ul li a {
	color: #060b1d;
	text-decoration: none;
	display: inline-block;	
	padding: 10px;
	transition: color 0.5s;
}

.navbar-container1 ul li .underline {
	height: 3px;
	background-color: transparent;
	width: 0%;
	transition: width 0.2s, background-color 0.5s;
	margin: 0 auto;
}

.navbar-container1 ul li.active-link .underline {
	width: 100%;
	background-color: rgb(252, 200, 32);
}

.navbar-container1 ul li:hover .underline {
	background-color: rgb(252, 200, 32);
	width: 100%;
}

.navbar-container1 ul li:hover a {
}

.navbar-container1 ul li:active a {
	transition: none;
	color: rgba(255,255,255,0.76);
}

.navbar-container1 ul li:active .underline {
	transition: none;
	background-color: rgba(255,255,255,0.76);
}