@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');            /*NORMAL*/
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@500&display=swap');   /*BOLD*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');    /*LIGHT*/

html,body {
  padding: 0;
  margin: 0;
  color: white;
  font-family: 'Open Sans', sans-serif;
  cursor: crosshair;
}


/* BACKGROUND */

#sec1 {
  background: linear-gradient(-45deg, #150040, #2d003e, #3f003b, #4d0037, #590633, #631230, #6a1f2d, #702b2b);
  /*background-color: #124f2f;*/
}

#sec2 {
  background: linear-gradient(-45deg, #004c59, #004866, #0d426e, #38386d, #572861, #6c1049, #750029, #700000);
  /*background-color: #1b6c6e;*/
}

#sec3 {
  background: linear-gradient(-45deg, #3b0259, #55004c, #66003f, #700032, #751227, #76261d, #743617, #704415);
  /*background-color: #301f73;*/
}

#sec4 {
  background: linear-gradient(-45deg, #85457d, #7a3e76, #703870, #653169, #5b2b62, #50285e, #462659, #3c2354, #2f224f, #232049, #171e42, #0c1b3b);
  /*background-color: #340147;*/
}

#sec5 {
  background: linear-gradient(-45deg, #691233, #630e39, #5b0c3e, #510d43, #460f48, #39124b, #29154e, #11174f);
  /*background-color: #52052e;*/
}

#sec6 {
  background: linear-gradient(-45deg, #1e0569, #2f0062, #39005b, #410055, #46004e, #4a0048, #4d0043, #4f003e);
  /*background-color: #4d1520;*/
}

#sec7 {
  background: linear-gradient(-45deg, #1e1367, #261b69, #2d226a, #34296c, #3a306d, #453673, #503c79, #5a437f, #6d4a8a, #815194, #95579e, #aa5ea6);
}

#sec8 {
  background: linear-gradient(-45deg, #150040, #2d003e, #3f003b, #4d0037, #590633, #631230, #6a1f2d, #702b2b);
  /*background-color: #124f2f;*/
}


/* MENU */

ul{
  top: calc(100% / 2 - 60px);
  position: fixed;
  height: auto;
  right: 10px;
}

li{
  list-style-type: none;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 4px;
  margin: 15px 15px;
  transition: 0.3s ease;
}

.active{
  background-color: rgb(146, 82, 235);
}

.section{
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

h1 {
  font-family: 'Readex Pro', sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
  padding-bottom: 50px;
  margin: 0;
}

h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  padding-bottom: 30px;
}

p {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  padding-bottom: 20px; 
  margin: 0;
}

p a {
  text-decoration: none;
  color: #d6ace3;
  padding: 3px;
}

h2 a{
  text-decoration: none;
  color: rgb(146, 82, 235);
  padding: 3px;
}

p a:hover, h2 a:hover {
    background-color: rgb(146, 82, 235);
    transition: background-color .5s;
    color: white;
}