/********* ********* Block spiner ********* *********/
.container-spiner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: #000;
}
.spiner {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 0.8rem solid #222;
  border-left: 0.8em solid #6400cc;
}
.spin{
  /* Remove this class when discover how to set animation-name with JS */
  animation: Spin 0.15s linear infinite;
}
@keyframes Spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/********* ********* End Block spiner ********* *********/


.header{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--headerHeight);
  background-color: #000;
  border-bottom: 1px solid var(--purple);
}
.margin2header{
  height: var(--headerHeight);
}

/* Logo styles */
.header__logo{
  display: flex;
  align-items: center;
}
.header__logo:hover *{
 color: #fff;
  text-shadow: 0.1em 0.1em 0.1em var(--purple);
}
.header__logo-image{
  margin: 0 .2rem;
  border-radius: 20% 0;
}
.header__logo-text{
  font-family: aladin;
  font-size: 1.5rem;
}
/* End Logo styles */

.menuButton{
  margin-right: .2rem;
  font-family: aladin;
  font-size: 1.1rem;
  color: #666;
  background: #000;
}
.menuButton:hover{
  color: #fff;
  outline-color: #fff;
  cursor: pointer;
}
.nav{
  z-index: 999;
  max-height: 100vh;
  background-color: #000;
}
.nav__item{
  padding: .8rem;
  color: #666;
  background: #000;
  outline: none;
}
/* languages item selector */
.nav__item:nth-child(5){
  position: relative;
}
.nav__item:nth-child(5)::selection{
  background-color: none;
}
.nav__item:hover{
  color: #fff;
  cursor: pointer;
}
.languages{
  margin-top: .4rem;
  position: static;
  width: 100%;
  flex-direction: column;
}
.language__item{
  display: block;
  padding: .8rem;
  color: #666;
}
.language__item:hover{
  color: #fff;
}


.welcomeBanner{
 position: relative;
 margin: 0 auto;
 background-image: linear-gradient( var(--purple), 20%, #000);
}
.welcomeBanner__preContainer{
 position: absolute;
 top: 20%;
 left: 10%;
 width: 80%;
 display: flex;
 justify-content: center;
}
.container{
 display: flex;
 flex-direction: column;
 font-size: 2rem;
}
.container .text{
 z-index: 2;
 position: relative;
 text-align: center;
}
.container .text:nth-child(1){
 font-family: aladin;
 font-size: 1em;
}
.container .text:nth-child(2){
 font-size: .5em;
}
.container .text__shadow{
 font-size: inherit;
 font-family: inherit;
}
.container .text__shadow::before, .container .text__shadow::after{
 z-index: -1;
 position: absolute;
 top: 0;
 left: 0;
 filter: blur(.2em);
 background: linear-gradient(90deg, #0ff, #f0f);
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.container .text__shadow1::before, .container .text__shadow1::after{
 content: "Develop the best version of yourself";
}
.container .text__shadow2::before, .container .text__shadow2::after{
 content: "and become a technological specialist.";
}


/********* ********* Main styles ********* *********/
.main{
 padding-bottom: 1rem;
}
.mainSection, .mainSection__subSection{
  flex-direction: column;
}
.mainSection__header{
 max-width: 720px;
 margin: 1rem auto 0;
 font-family: aladin;
 font-size: 2rem;
 text-align: center;
 text-shadow: 0 0 .4em #6400cc, 0 0 .4em #6400cc;
}
.mainSection__header span{
 font-size: inherit;
}
.mainSection__header p{
 text-shadow: none;
}
.subSection__header{
 min-width: 100%;
 margin: 2rem auto 0;
 font-family: aladin;
 font-size: 2rem;
 text-align: center;
}
.subSection__header p{
 margin: 0 auto;
 max-width: 720px;
}
/********* ********* End Main styles ********* *********/


.container-sectionCards{
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  justify-items: center;
}
/* To activate the animation, set the animation-name property on ::before and ::after*/
.animatedBorder{
  position: relative;
  width: 100%;
  background: linear-gradient( 90deg, #000, #111);
}
.animatedBorder:before, .animatedBorder:after{
  content: '';
  position: absolute;
  z-index: -1;
  top: -.3rem;
  left: -.3rem;
  width: calc(100% + .6rem);
  height: calc(100% + .6rem);
  overflow: hidden;
  animation: linear 15s;
  /* backGradient must be before backSize */
  background: linear-gradient( 90deg,#6400cc, cyan, magenta, #6400cc, cyan, magenta , #6400cc );
  background-size: 300%;
}
.animatedBorder::before{
  /* animatedBorder::after acts like solid border */
  filter: blur(.4rem);
}
.sectionCard, .animatedBorder, .animatedBorder:before, .animatedBorder:after{
  border-radius: 2rem 0;
}
@keyframes BorderAnimation{
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 300%;
  }
}

.container-sectionCard{
  padding: .6rem;
  width: calc(100% -.6rem);
  min-width: 316px;
  max-width: 480px;
}
.sectionCard{
  margin-top: 1rem;
  text-align: center;
  overflow: hidden;
}
.sectionCard__icon, .sectionCard__title-text{
  font-size: 2rem;
}
.sectionCard__title-text{
  font-family: aladin;
  margin: 0 .4rem;
}
.sectionCard__button{
  width: 100%;
  padding: .8rem;
  margin-top: .8rem;
  font-family: aladin;
  font-size: 1.6rem;
  outline: none;
  border-top: .1rem solid #222;
  background: #000;
}
.sectionCard__button:hover{
  text-shadow: 0 0 1rem var(--purple), 0 0 1rem var(--purple);
}

.container-coursesCards{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
}
.courseCard{
 display: flex;
 margin-top: 1rem;
 width: 312px;
 max-width: 480px;
 flex-grow: 1;
 margin: 1rem 4px 0;
 outline: 2px solid #222;
 border-radius: 1rem 0;
 overflow: hidden;
}
.courseCard:hover{
 outline-color: #fff;
}
.courseCard__header{
 min-width: 100px;
 width: 100px;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;
 text-align: center;
 background-color: #000;
}
.courseCard__header em{
 font-size: .8rem;
 color: #666;
}
.courseCard__header-title{
 font-family: aladin;
 font-size: 2rem;
}
.courseCard__header span{
 font-size: 3rem;
}
.courseCard__body {
 padding: .4rem;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 background-image: linear-gradient(#444, #111);
}
.courseCard__body-lastUpdate {
 display: flex;
 justify-content: flex-end;
}
.courseCard__body-lastUpdate span {
 margin-left: .4rem;
 color: #888;
}
.courseCard__body-title {
 margin-top: 1rem;
 font-family: aladin;
 font-size: 1.6rem;
 text-shadow: .2rem .2rem #000;
}
.courseCard__body-button {
 align-self: flex-end;
 padding: .4rem;
 margin: 1rem .4rem .2rem 0;
 width: 150px;
 font-size: 1.2rem;
 font-family: aladin;
 border-radius: .4rem 0;
 overflow: hidden;
 background: #111;
 outline-color: #444;
}
.courseCard__body-button:hover {
 outline-color: #fff;
 background-color: #000;
}

/* course data */
.course__header-title{
 font-family: aladin;
 font-size: 2rem;
}
.courseModules__module{
 margin-top: .4rem;
 margin-left: 1rem;
 display: flex;
}
.courseModules__module:hover{
 cursor: pointer;
 background: linear-gradient(#111, #000);
}
.courseModules__module div{
 flex-grow: 1;
 display: flex;
 padding: .4rem;
 justify-content: space-between;
 align-items: center;
}
.courseModules__module-image{
 display: none;
 margin-right: 1rem;
 width: 128px;
 height: 72px;
}
.resourceItem{
 padding: .2rem;
 padding-left: 0;
}
.btnShowCourseSection{
 align-self: center;
 margin-top: 1rem;
 padding: .4rem;
 width: 80%;
 max-width: 300px;
}

/* Module data */
.module__header-title{
 font-family: aladin;
 font-size: 2rem;
}
.moduleContentList li{
 display: flex;
 justify-content: space-between;
 padding: .4rem;
 color: #666;
}
.moduleContentList li:hover{
 color: #fff;
 cursor: pointer;
 background: linear-gradient(#111, #000);
}

/* Generic element */
.container-genericElements{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 align-items: flex-start;
}
.genericElement{
 flex-grow: 1;
 width: 312px;
 max-width: 472px;
 margin: 1rem 4px 0;
 border: 2px solid #222;
 border-radius: .8rem 0;
 overflow: hidden;
 background-image: linear-gradient(90deg, #000, #222);
}
.genericElement__title{
 font-family: aladin;
 font-size: 1.5rem;
 text-align: center;
}
.genericElement .text{
 text-align: center;
}
.genericElement__data{
 flex-direction: column;
 padding: 0 .4rem 1rem;
}
.genericElement__button{
 width: 100%;
 padding: .8rem;
 margin-top: 1rem;
 font-family: aladin;
 font-size: 1.4rem;
 text-align: center;
 background: #000;
 outline: none ;
}
.genericElement__button span{
 font-size: .8em;
 color: inherit;
}
.genericElement__button:hover{
 color: var(--purple);
}

/* Copyable element */
.container-copyableElement{
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.copyableElement__button{
 padding: .4rem;
 color: #666;
 border-bottom: 1px solid transparent;
}
.copyableElement__button:hover{
 padding: .4rem;
 color: #fff;
 border-bottom: 1px solid #fff;
}

/* Footer */
.footer{
  padding: .4rem;
  text-align: center;
  font-size: .8rem;
  border-top: 1px solid var(--purple);
  background-color: #000;
}
.footer em{
  font-family: aladin;
  font-size: 1.2rem;
}