@use "sass:color";
/*
Style variables
____________________
*/
/*
____________________
*/
body {
  background-color: #131622;
  color: #C25EF1;
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  text-align: left;
  margin: 0%; }

header {
  padding: 20px;
  text-align: left; }
  header h1 {
    margin-bottom: 0%;
    padding-bottom: 0%; }
  header h3 {
    margin-top: 0%;
    padding-top: 0%; }

footer {
  padding: 20px; }

a {
  color: #fff;
  text-decoration: none; }
  a:focus, a:hover {
    border-bottom: 1px solid #fff; }

main {
  padding: 20px;
  background-color: #1E2333;
  color: #7A849D; }
  main h1 {
    font-size: large; }
  main a {
    color: #fff;
    text-decoration: none; }
    main a:focus, main a:hover {
      border-bottom: 1px solid #fff; }

li.homapage_menu a {
  font-size: larger;
  text-decoration: none; }

.button-continue {
  border: 2px solid #C25EF1;
  height: 80px;
  width: 200px;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  left: 50%;
  margin-left: -100px;
  color: #fff; }
  .button-continue::after {
    content: "CONTINUE";
    position: absolute;
    top: 41%;
    left: 50%;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
    color: #fff;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear; }
  .button-continue::before {
    content: "";
    position: relative;
    display: block;
    height: 10px;
    width: 10px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 3px #C25EF1;
            box-shadow: 0px 0px 10px 3px #C25EF1;
    margin-left: -5px;
    margin-top: -5px;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
    border-radius: 100%;
    -webkit-animation: star 2s ease-in-out infinite;
            animation: star 2s ease-in-out infinite; }

@-webkit-keyframes star {
  0% {
    margin-left: -5px;
    margin-top: -5px; }
  25% {
    margin-left: 195px;
    margin-top: -5px; }
  50% {
    margin-left: 195px;
    margin-top: 75px; }
  75% {
    margin-left: -5px;
    margin-top: 75px; }
  100% {
    margin-left: -5px;
    margin-top: -5px; } }

@keyframes star {
  0% {
    margin-left: -5px;
    margin-top: -5px; }
  25% {
    margin-left: 195px;
    margin-top: -5px; }
  50% {
    margin-left: 195px;
    margin-top: 75px; }
  75% {
    margin-left: -5px;
    margin-top: 75px; }
  100% {
    margin-left: -5px;
    margin-top: -5px; } }
  .button-continue:hover::before {
    opacity: 1;
    -webkit-animation: star 2s ease-in-out infinite;
            animation: star 2s ease-in-out infinite; }