:root{
  /* COLOR BG*/
  --clr-purple-dark: #523ba8;
  --clr-purple-mid1: rgba(82, 59, 168, 0.7);
  --clr-purple-mid2: #7D59FF;
  --clr-purple-light: #b4c6f0;
  --clr-fuchsia-Light: #9a4bd0;

  /* COLOR BG BUTTONS */
  --clr-btnBG-purple: #523BA8FF;
  /* COLOR BG TABLE */
  --clr-cellGB-fuchsia:#bc9ee0;

  /* COLOR BUTTON ACTIONS */
  --clr-but-hov: #7D59FF;
  --clr-but-act: #9a4bd0;

  /* COLOR FONTS */
  --clr-fnt-Light: white;
  --clr-fnt-Dark: black;
  --clr-fnt-Mid-vs: rgba(71, 68, 79, 0.7);

}

/* ANIMATIONS */
@keyframes appearTitleSmoothly {
  from{
    transform: translateX(-300px);
  }to{
     transform: translateX(0);
   }
}
@keyframes appearSmoothly {
  from{
    transform: translateY(-300px);
  }
  to{
    transform: translateY(0);
  }
}

html {
  font-family: "Lucida Sans", sans-serif;
}
body{
   margin: 0;
   padding: 0;
 }
.backGround{
  background-image: url("https://cdn.pixabay.com/photo/2018/08/18/13/26/interface-3614766_1280.png");
  background-position: center;
  background-size: 1280px 854px;
  background-repeat: no-repeat;
  background-color: var(--clr-purple-light);
}

/* NAVBAR */
.navbar{
  background-color: var(--clr-purple-dark);
  display: grid;
  grid-template-columns: 50% 50%;
  height: 60px;
  width: 100%;
  z-index: 1;
  color: var(--clr-fnt-Light);
  /* Combining position sticky and top 0,
  we create a fixed position without overlapping,
  This is used for fixed nav-bars */
  position: sticky;
  top:0;
}
.nav-left{
  display: flex;
  align-items: center;
  place-content: initial;
  padding-left: 20%;
}
.icons{
  height: 40px;
  width: 40px;
}
.title-page{
  color: white;
  margin-left: 5px;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}
.nav-right{
  display: flex;
  align-items: center;
  place-content: end;
  padding-right: 20%;
}
/* Buttons Navbar*/
.butLink{
  padding: 10px 10px;
  border-radius: 5px;
  transition: background-color 350ms ease-in-out;
  /* TEXT STYLE */
  text-align: center;
  font-family: "Luida Sans", sans-serif;
  color: var(--clr-fnt-Light);
  text-decoration: none; /* Eliminate line under letters */
}
.butLink:hover{
  background-color: var(--clr-but-hov);
  /*background-color: #694BD6;*/
  cursor: pointer;
}
.butLink:active{
  background-color: var(--clr-but-act);
  transition: background-color 0.05s;
}

/* MAIN HEADER */
.header-title {
  /*TEST */
  background: rgb(82,59,168);
  background: linear-gradient(180deg, rgba(82,59,168,1) 0%, rgba(82,59,168,0.7) 100%);
  /*-----------------------------------------------------------------*/
  display: flex;
  place-content: center;
  /*background-color: var(--clr-purple-mid1);*/
  z-index: 2;
  /*Animation settings*/
  animation-name: appearTitleSmoothly;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /*border: 1px solid yellow;*/
}
.header-title h2{
  width: 74rem;
  /*font*/
  color: var(--clr-fnt-Light);
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  /*border: 1px solid red;*/
}
/* DESIGN FOR DEVICES WITH RESOLUTION MINOR THAN 700PX*/
@media (max-width: 700px) {
  .navbar{
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    position: sticky;
    height: auto;
    padding: 0.5vh 0;
  }
  .nav-right{
    /*visibility: hidden;*/
    display: flex;
    background-color: var(--clr-btnBG-purple);
    padding-right: 0;
    place-content: center;
  }
  .nav-left{
    display: flex;
    place-content: center;
    padding-left: 0;

    /*Animation settings*/
    animation-name: appearTitleSmoothly;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
  }
  /* WEBSITE TITTLE */
  .header-title {
    /*Animation settings*/
    animation-name: appearTitleSmoothly;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
  }
}

/* ELEMENTS CONTAINER */
.elements_container{
  display: grid;
  place-content: center;
  box-sizing: border-box;
  padding: 0 0.8rem;
  /*border: 1px solid yellow;*/
}

/* TABLE */
.tableCenter{
  display: flex;
  margin-top: 0;
  height: 0;
  opacity: 0;
  transition: opacity 400ms, height 500ms, margin 300ms;
  box-sizing: border-box;
  overflow: scroll;
  /* overflow x and general styles*/
}
.tableCenter::-webkit-scrollbar{
  display: none;
}
.tableAnimation{
  /* overflow x and general styles*/
  display: flex;
  margin: 3vh 0;
  height: 17rem;
  opacity: 100;
  transition: opacity 400ms, height 500ms, margin 500ms;
  box-sizing: border-box;
  overflow: scroll;
  /* Animation settings */
  animation-name: appearSmoothly;
  animation-duration: 400ms;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /*border: 1px solid yellow;*/
}
.tableAnimation::-webkit-scrollbar{
  display: none;
}
.centerObject{
  /*padding-top: 6vh;*/
  box-sizing: border-box;
  /*transition: height 1s;*/
  /*border: 1px solid red;*/
}
.backGroundCell{
  background-color: #bc9ee0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-align: center;
  font-size: 1.3rem;
}
.tituloCelda{
  /* static respecting elements bellow = sticky*/
  position: sticky;
  top:0;
  /*TEXT STYLE*/
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: bold;
}
.backGroundCell tr td{
  padding: 0.5vh 1vw;
  /*border: 1px solid green;*/
}
/* TABLE BUTTONS */
.butCloseTb{
  background-color: var(--clr-btnBG-purple);
  width: 5rem;
  padding: 0.5vh;
  margin: 0.5vh 0.5vw;
  border-style: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  /*Text style*/
  font-family: "Luida Sans", sans-serif;
  font-size: 1.3rem;
  color: white;
}
.butCloseTb:hover{
  background-color: var(--clr-but-hov);
}
.butCloseTb:active{
  background-color: var(--clr-but-act);
  transition: background-color 0s;
}
.butInternal{
  background-color:var(--clr-btnBG-purple);
  border-style: none;
  border-radius: 5px;
  transition: background-color 200ms ease-in-out;
  /*Text style*/
  color: white;
  font-family: "Luida Sans", sans-serif;
  font-size: 1.2rem;
  cursor: pointer;
}
.butInternal:hover{
  background-color: var(--clr-but-hov);
}
.butInternal:active{
  background-color: var(--clr-but-act);
  transition: background-color 0s;
}
.butInternal--alt{
  background-color:var(--clr-cellGB-fuchsia);
  color: var(--clr-fnt-Dark);
  transition: all 100ms ease-in-out;
}
.butInternal--alt:hover{;
  background-color: transparent;
  scale: 1.15;
  color: var(--clr-fnt-Light);
}

/* FORMS */
.formsStyle{
  opacity: 0;
  height: 0;
  padding-top: 0;
  /* Based on a research an animation must last from 100-500ms*/
  transition: padding-top 400ms, opacity 300ms, height 400ms;
  text-align: center;
  /*border: 1px solid yellow;*/
}
.formsStyle--active{
  opacity: 100;
  height: 35vh;
  padding-top: 4vh;
  transition: padding-top 500ms, opacity 400ms, height 500ms;
  text-align: center;
  /*border: 1px solid yellow;*/
}
@media (max-width: 700px){
  .formsStyle--active{
    opacity: 100;
    height: 45vh;
    transition: opacity 400ms, height 500ms;
    text-align: center;
    /*border: 1px solid yellow;*/
  }
}
.formsStyle p,
.formsStyle--active p{
  color: var(--clr-fnt-Light);
}
/* To choose an item according to its attributes, you can use: .classElement [property="value"] */
.formsStyle--active input[type="text"],
.formsStyle--active input[type="number"],
.formsStyle input[type="text"],
.formsStyle input[type="number"]{
  border-style: none;
  text-align:center;
  font-size: 20px;
  color: var(--clr-fnt-Dark);
  margin: 0 0 6px 0;
}
/* This allows your to change the color of a placeholder text*/
.formsStyle--active input::placeholder,
.formsStyle input::placeholder{
  color: var(--clr-fnt-Mid-vs);
}

/* Action Buttons */
.fondIni{
  display: flex;
  place-content: center;
  flex-wrap: wrap;
  background-color: var(--clr-purple-mid1);
  padding: 30px 35px;
}
.butIni{
  background-color: var(--clr-btnBG-purple);
  width: 15rem;
  margin: 10px;
  padding: 10px;
  border-style: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 350ms ease-in-out;
  /*TEXT STYLE*/
  font-family: "Luida Sans", sans-serif;
  font-size: 1.3rem;
  color: var(--clr-fnt-Light);
}
.butIni:hover{
  background-color: var(--clr-but-hov);
}
.butIni:active{
  background-color: var(--clr-but-act);
  transition: background-color 0s;
}

/* FOOTER */
.footer {
  display: flex;
  place-content: center;
  background-color: var(--clr-purple-mid1);
  margin-top: 20px;
}
.footer__section{
  display: flex;
  flex-wrap: wrap;
  width: 74rem;
  padding: 0 1rem;
  color: var(--clr-fnt-Light);
  /*border: 1px solid red;*/
}
.footer__section h3{
  font-size: 1.3rem;
  width: 100%;
  margin: 1.5vh 0 0.2vh 0;
  text-align: center;
  font-weight: bold;
}
.footer__section p{
  width: 100%;
  font-size: 1.2rem;
  font-weight: normal;
}
.footer__section article{
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  width: 100%;
}
.footer__section article img,
.footer__section img{
  height: 75px;
  width: 75px;
  margin: 10px;
}