:root {
  --color-p1: #182eca;
  --color-p2: #ca1887;
  --color-p3: #cab418;
  --color-p4: #18ca5b;
}
body {
  background-color: #0e0b32;
  color: #a8a8a8;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  font-weight: 400;
  font-family: Arial, sans-serif;
  animation: auroras 100s infinite linear; /* total cycle time */
  background-size: 99vw;
  background-position: left top;
  background-repeat: no-repeat;
  margin:0;
}
.mainlogo{
    max-width:100%;
    height:100px;
    background-color:rgba(0,7,64,0.6);
}

.mainlogo img{
    margin-top: -50px;
    margin-bottom: 50px;
    float:right;
}
.main{
    width: 80vw;
    margin:auto;
    background-color: rgba(0,0,0,0.3);
    padding: 20px;
    border-radius: 10px;
    background-image: url('https://volunteer.mgaiaproject.com/images/SIMBG.png');
    background-size:100vw;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

h1 {
  font-weight: inherit;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 7px;
  font-family: Trebuchet MS, sans-serif;
  border:1px solid #000;
  background-color:#000740;
  width: auto;
  max-width: 300px;
  border-radius: 20px;
  padding:10px;
  padding-left:30px;
  margin-left:-50px;
  box-shadow:#000;'
  clear:both;'
}

h2 {
  font-weight: inherit;
  color: #ff9500;
  background-color: rgba(0,0,0,0.8);
  text-transform: uppercase;
  letter-spacing: 6px;
  margin-left:-20px;
  padding-left:30px;
  border:1px solid #000;
  border-left:0px;
  border-radius:20px;
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
  width:auto;
  max-width:400px;
}

h3 {
  font-weight: inherit;
  color: #008516;
  text-transform: uppercase;
  letter-spacing: 10px;
  background-color: #000;
  border-radius:10px;
  padding:5px;
  padding-left:50px;
  margin-left:-20px;
  margin-right:0px;
  width:auto;
  max-width:600px;
  text-align:right;
}

h4 {
    font-size: 45px;
    color: #d1d1d1;
    font-family: "Arial Black", Gadget, sans-serif;
    text-shadow: 0px 0px 0 rgb(196,196,196),
        0px 1px 0 rgb(182,182,182),
        0px 2px 0 rgb(169,169,169),
        0px 3px  0 rgb(156,156,156),
        0px 4px 3px rgba(0,0,0,0.44),
        0px 4px 1px rgba(0,0,0,0.5),
        0px 0px 3px rgba(0,0,0,.2);
  max-width:400px;
  margin:auto;
  text-align:center;
}

h5 {
    font-size: 50px;
    color: #d1d1d1;
    font-family: "Arial Black", Gadget, sans-serif;
    text-shadow: 0px 0px 0 rgb(202,202,202),
                 -1px 0px 0 rgb(196,196,196),
                 -2px 0px 0 rgb(189,189,189),
                 -3px 0px 0 rgb(182,182,182),
                 -4px 0px 0 rgb(176,176,176),
                 -5px 0px 0 rgb(169,169,169),
                 -6px 0px  0 rgb(162,162,162),
                 -7px 0px 6px rgba(0,0,0,0.44),
                 -7px 0px 1px rgba(0,0,0,0.5),
                 0px 0px 6px rgba(0,0,0,.2);
}

h6 {
  font-weight: inherit;
  font-size: 49px;
    color: #e6e6e6;
    font-family: "Arial Black", Gadget, sans-serif;
    text-shadow: 0px 0px 0 rgb(218,218,218),
                 1px 0px 0 rgb(205,205,205),
                 2px 0px 0 rgb(193,193,193),
                 3px 0px 0 rgb(180,180,180),
                 4px 0px  0 rgb(168,168,168),
                 5px 0px 4px rgba(0,0,0,1),
                 5px 0px 1px rgba(0,0,0,0.5),
                 0px 0px 4px rgba(0,0,0,.2);
    text-align: right;
}

.nav{
    font-size: 12px;
    text-align:center;

  margin-top:-15px;
}
.nav li{
    float: left;
    text-decoration: none;
    list-style: none;
    margin-left: 20px;
    width:auto;
    rotate:-6deg;
    padding:5px;
}
.welcome{
    width:auto;
}
p {
  color:#333;
  background: rgba(255,255,255,0.8);
  border-radius: 20px;
  padding:40px;
  font-weight: 100;
  font-style: initial;
  font-family: Verdana, sans-serif;
}

ul {
  font-weight: 300;
  font-style: oblique;
  letter-spacing: 4px;
  font-family: Verdana, sans-serif;
  float: left;
  border-radius:10px;
  border:0px solid #FFF;
  padding: 20px;
}

ol {
  font-weight: 300;
  letter-spacing: 4px;
  font-family: Verdana, sans-serif;
}

dl {
  color: #008a17;
  line-height: 20px;
  letter-spacing: 3px;
  font-family: Verdana, sans-serif;
}

code {
  color: #3d3d3d;
  background-color: #000000;
  text-transform: lowercase;
  font-style: italic;
  font-family: Courier, monospace;
}

samp {
  color: #545454;
  text-transform: lowercase;
}

pre {
  color: #292929;
  background-color: #000;
  font-style: normal;
  font-family: Times, serif;
  border-radius:10px;
  padding:10px;
}

a {
  color: #ffa200;
  font-weight: 600;
  font-style: unset;
  letter-spacing: 4px;
  font-family: Verdana, sans-serif;
}

button {
  color: #ffffff;
  background-color: #00802d;
  border: 1px solid #000;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-family: Verdana, sans-serif;
  padding:10px;
}

input[type='button'] {
  color: #ffffff;
  background-color: #00802d;
  border: 1px solid #CCC;
  border-radius: 10px;
  text-transform: capitalize;
  letter-spacing: 4px;
  font-family: Verdana, sans-serif;
}

input[type='submit'] {
  color: #0e0b32;
  background-color: #ff9500;
  border: 5px solid #FFF;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 5px;
  font-family: Verdana, sans-serif;
  padding:10px;
}

time {
  font-family: Courier New, monospace;
}

table {
  border: 1px solid #aaa;
  border-collapse: collapse;
  border-radius: 5px;
  border-spacing: 10px;
}

caption {
  caption-side: bottom;
}

thead {
  border: 1px solid #aaa;
}

th {
  border: 1px solid #aaa;
}

tr {
  font-family: Verdana, sans-serif;
}

td {
  border: 1px;
}

legend {
  color: #257a00;
  border: 4px solid;
  text-transform: uppercase;
  font-family: Verdana, sans-serif;
}

label {
  color: #e08800;
  text-transform: capitalize;
  font-family: Verdana, sans-serif;
}

input {
  background-color: #5e5b8b;
  border: 1px solid #000;
  border-radius: 5px;
  text-transform: none;
  font-family: Verdana, sans-serif;
  padding:10px;
}

select {
  background-color: #c8c6e1;
  border: 1px solid #000;
  text-transform: uppercase;
}

output {
  color: #ff7700;
  background-color: #272456;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 5px;
  font-family: Verdana, sans-serif;
}

textarea {
  background-color: #c8c6e1;
  border: 1px solid #000;
  border-radius: 5px;
  padding:10px;
}


.animated-text {
  background: linear-gradient(to right, #ffffff, #00ff33);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animated-text-gradient 5s linear infinite;
}
@keyframes auroras {
    0%   { background-image: url('/images/auroras1.png'); }
    12.5% { background-image: url('/images/auroras2.png'); }
    25%  { background-image: url('/images/auroras3.png'); }
    37.5% { background-image: url('/images/auroras4.png'); }
    50%  { background-image: url('/images/auroras5.png'); }
    62.5% { background-image: url('/images/auroras6.png'); }
    75%  { background-image: url('/images/auroras7.png'); }
    87.5% { background-image: url('/images/auroras8.png'); }
    100% { background-image: url('/images/auroras1.png'); }
}
@keyframes animated-text-gradient {
  to { background-position: 200% center; }
}
.pulsing-element {
  animation: pulse-glow 2s infinite ease-in-out;
  /* Add other styles like background-color, width, height, border-radius */
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px 0px rgba(59, 130, 246, 0.75);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0);
  }
}
.spinner { display: flex; justify-content: space-around; width: 60px; }
.spinner > div {
  width: 12px;
  height: 12px;
  background-color: #4f46e5;
  border-radius: 100%;
  display: inline-block;
  animation: spinner-dots 3.5s infinite ease-in-out both;
}
.spinner .dot1 { animation-delay: -0.32s; }
.spinner .dot2 { animation-delay: -0.16s; }

@keyframes spinner-dots {
  
  0%, 100% { transform: scale(0.2); opacity: 0.5; }
  50% { transform: scale(1); opacity: 1; }
}