:root {
  --shadow-color: 221deg 100% 23%;
  --shadow-content-top-low: 0.7px 0.7px 1px hsl(var(--shadow-color) / 0.46),
    1.1px 1.1px 1.6px -1.5px hsl(var(--shadow-color) / 0.41),
    2.9px 2.8px 4.2px -3px hsl(var(--shadow-color) / 0.35);
  --shadow-content-top-medium: 0.7px 0.7px 1px hsl(var(--shadow-color) / 0.49),
    2.1px 2px 3px -1px hsl(var(--shadow-color) / 0.44),
    5.6px 5.4px 8.1px -2px hsl(var(--shadow-color) / 0.4),
    14.4px 13.8px 20.8px -3px hsl(var(--shadow-color) / 0.35);
  --shadow-content-top-high: 0.7px 0.7px 1px hsl(var(--shadow-color) / 0.45),
    3.6px 3.4px 5.2px -0.4px hsl(var(--shadow-color) / 0.43),
    6.9px 6.6px 10px -0.9px hsl(var(--shadow-color) / 0.41),
    11.9px 11.4px 17.2px -1.3px hsl(var(--shadow-color) / 0.39),
    20px 19.2px 28.9px -1.7px hsl(var(--shadow-color) / 0.37),
    32.4px 31.1px 46.8px -2.2px hsl(var(--shadow-color) / 0.35),
    50.4px 48.4px 72.8px -2.6px hsl(var(--shadow-color) / 0.33),
    75.4px 72.4px 109px -3px hsl(var(--shadow-color) / 0.31);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

body,
body ::-webkit-input-placeholder {
  font-family: Source Sans Pro, sans-serif;
  color: #fff;
  font-weight: 300;
}



body :-moz-placeholder,
body ::-moz-placeholder {
  font-family: Source Sans Pro, sans-serif;
  color: #fff;
  opacity: 1;
  font-weight: 300;
}

body :-ms-input-placeholder {
  font-family: Source Sans Pro, sans-serif;
  color: #fff;
  font-weight: 300;
}

a {
  text-decoration: none;
}

.wrapper {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(27deg, #0575e6, #021b79, #000000);
  background-size: 600% 600%;
  animation: GradientBackground 5s ease infinite;
}

@keyframes GradientBackground {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 500px) {
  .container h1 {
    font-size: 60px;
  }

  form button,
  form input {
    width: 500px;
  }
}

.main {
  z-index: 999;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main h1 {
  font-size: 40px;
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.content {
  margin: 0 auto;
  width: 28%;
  background: #fff;
  border-radius: 5px;
}

p.footer {
  font-size: 16px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  margin-top: 30px;
}

.content-top h2 {
  font-size: 22px;
  color: #fff;
  text-align: center;
  background-color: #011561;
  padding: 12px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: box-shadow .3s;

}



.content-top h2:hover {
  box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 36px 0px, rgba(0, 0, 0, 0.568) 0px 0px 0px 1px;
}

.content-top p {
  text-align: center;
  font-size: 16px;
  color: #000;
  margin-top: 15px;
}

.content-top ul li {
  display: block;
  font-size: 15px;
  color: #000;
  line-height: 1.8em;
  padding: 1em 0 1em 1em;
  border-bottom: 1px solid #e2e0de;
}

.content-top ul li a {
  color: #000;
  font-weight: 400;
}

.content-top ul li a i {
  color: #f7102e;
  font-style: normal;
  display: block;
  margin: 2px 0;
  transition: text-shadow 0.3s;
}

.content-top ul li a i:hover {
  text-shadow: 0 0 0.65px #f7102e;
}

.content-top ul li span {
  display: block;
  color: #999;
}

.content-top {
  padding: 1.5em;
  box-shadow: var(--shadow-content-top-high);
}

.content-top p a {
  color: #55acee;
  margin-left: 5px;
}

@media (max-width: 1366px) {
  .content {
    width: 31%;
  }
}

@media (max-width: 1280px) {
  .content {
    width: 32%;
  }
}

@media (max-width: 1080px) {
  .content {
    width: 38%;
  }

  .main h1 {
    font-size: 36px;
  }

  .content-top h2 {
    font-size: 20px;
    padding: 10px 0;
    cursor: pointer;
  }

  .content-top p,
  .content-top ul li,
  p.footer {
    font-size: 14px;
  }
}

@media (max-width: 800px) {
  .main h1 {
    font-size: 34px;
  }

  .content {
    width: 46%;
  }
}

@media (max-width: 768px) {
  .main {
    padding: 90px 0;
  }

  .main h1 {
    margin-bottom: 55px;
  }

  p.footer {
    margin-top: 75px;
  }
}

@media (max-width: 736px) {
  .main {
    padding: 70px 0;
  }

  .main h1 {
    margin-bottom: 45px;
  }

  .content {
    width: 53%;
  }

  p.footer {
    margin-top: 50px;
  }
}

@media (max-width: 667px) {
  .main h1 {
    font-size: 32px;
    margin-bottom: 35px;
  }

  .main {
    padding: 60px 0;
  }

  .content {
    width: 57%;
  }

  .content-top h2 {
    font-size: 18px;
    cursor: pointer;
  }
}

@media (max-width: 600px) {
  .main h1 {
    font-size: 30px;
  }

  .content-top {
    padding: 1em;
  }

  .content {
    width: 62%;
  }
}

@media (max-width: 568px) {
  .content {
    width: 68%;
  }
}

@media (max-width: 480px) {
  .content {
    width: 78%;
  }

  .main h1 {
    font-size: 28px;
  }

  p.footer {
    margin-top: 42px;
  }
}

@media (max-width: 414px) {
  .content-top h2 {
    font-size: 16px;
    cursor: pointer;
  }

  .content {
    width: 85%;
  }

  .main {
    padding: 50px 0;
  }

  p.footer {
    line-height: 1.8em;
    margin: 42px auto 0;
    width: 85%;
  }
}

@media (max-width: 384px) {
  .main h1 {
    font-size: 27px;
  }

  .content,
  p.footer {
    width: 90%;
  }

  p.footer {
    margin: 32px auto 0;
  }
}

@media (max-width: 375px) {
  .main h1 {
    font-size: 26px;
    margin-bottom: 25px;
  }

  .main {
    padding: 45px 0;
  }

  .content,
  p.footer {
    width: 92%;
  }

  .content-top h2 {
    padding: 8px 0;
    cursor: pointer;
  }
}

@media (max-width: 320px) {
  .main h1 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .content-top ul li {
    padding: 1em 0 1em 1em;
    background-size: 13% !important;
  }

  .content-top {
    padding: 1.2em;
  }

  .content-top p,
  .content-top ul li,
  p.footer {
    font-size: 13px;
  }

  .content,
  p.footer {
    width: 90%;
  }
}

@media (max-width: 500px) {

  .bg-bubbles,
  .wrapper {
    height: 100%;
    background: linear-gradient(27deg, #0575e6, #021b79, #000000);
    background-size: 600% 600%;
    animation: GradientBackground 5s ease infinite;
  }
}