/*Ancho, largo, página*/
*
{
box-sizing: border-box;
}

html, body
{
--border-radius: 100px;
--blue: #1c47ff;
--pink: #d6a3fb;
--green: #d0ff94;
--grey: #e5e5e5;
--negro-puro: #000000;
--negro-claro: #1f1a1c;
--blanco-puro: #ffffff;
--gutter: 3.125vw 6.25vw;

margin: 0;
padding: 0;
background: var(--negro-puro);
color: var(--blanco-puro);
font-size: 30px;
font-family: 'Roboto', sans-serif;
}


/*estilo etiquetas*/

h1
{
font-size: 70px;
line-height: 1em;
margin: 0px;
}

h2
{
font-size: 60px;
margin: 0px;
}

a
{
  color: var(--grey);
  text-decoration: none;
}

section
{
  position: relative;
  display: flex;
  width: 100%;
  height: calc(100vh - 100px);
  top: 100px;
  z-index: 2;
}

section.sticky
{
  position: sticky;
  margin-top: 100px;
}


section.full-screen
{
  height: 100vh;
  top: 0;
  margin-top: 0;
  z-index: 3;
}



/*instrucciones lista navegacion*/
nav
{
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
font-size: 20px;
z-index: 1;
}

nav ul
{
display: flex;
align-items: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

nav ul li
{
list-style: none;
margin-left: 45px;
}

nav ul li a
{
color: var(--grey);
font-family: 'Roboto', sans-serif;
}

/*Instrucciones para los cuadrados blanco, azul y morado*/
section.about .empty
{
flex-basis: 37.5vw;
background: var(--grey);
border-radius: var(--border-radius);
transition: flex-basis 1s cubic-bezier(0,.9,.4,.99);
}

section.about article
{
flex: 1;
display: flex;
flex-direction: column;
}

section.about article .title
{
flex: 1;
display: flex;
align-items: flex-end;
background: var(--blue);
border-radius: var(--border-radius);
padding: var(--gutter);
transition: flex-basis 1s cubic-bezier(0,.9,.4,.99);
}

section.about article .description
{
flex: 2;
display: flex;
align-items: center;
background: var(--pink);
border-radius: var(--border-radius);
padding: var(--gutter);
color: var(--negro-puro);
}



/*service section*/
section.service article
{
  display: flex;
  width: 100%;
}

section.service figure
{
display: flex;
align-items: center;
justify-content: center;
flex-basis: 56.25vw;
margin: 0;
background: var(--green);
border-radius: var(--border-radius);
max-width: 62.5vw;
transition: flex-basis 1s cubic-bezier(0,.9,.4,.99);
}

section.service figure img
{
  width: 40%;
}

section.service .text
{
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
background: #1f1a1c;
padding: var(--gutter);
border-radius: var(--border-radius);
}

section.service .text a
{
  font-family: 'Roboto', sans-serif;
}


/* service section animations */
section.service.service-html figure img 
{
animation-name: float;
animation-duration: 1s;
animation-iteration-count:infinite;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.17,.67,.83,.67)
}




@keyframes float
{
0%
{
transform: translatey(-5%);
}
100%
{
  transform: translatey(5%);
}
}








/* service section overrides*/

section.service.service-html figure
{
background: var(--green);
}

section.service.service-html .text h2,
section.service.service-html .text a
{
  color: var(--pink);
}


section.service.service-css figure
{
background: var(--blue);
}

section.service.service-css .text h2,
section.service.service-css .text a
{
  color: var(--green);
}

section.service.service-js figure
{
background: var(--pink);
}

section.service.service-js .text h2,
section.service.service-js .text a
{
  color: var(--blue);
}


/* contact section*/


section.contact
{
align-items: center;
justify-content: center;
background: linear-gradient(var(--blue), var(--green) 60%, var(--pink) 70%, var(--blanco-puro));  
border-radius: var(--border-radius);   
}


section.contact a
{
  font-size: 100px;
  color: var(--negro-puro);
  font-weight: bold;
  transition: all 2s cubic-bezier(.17,.67,.83,.67); 
  Will-change: filter;
}

section.contact a:hover
{
  color: #ffffff;
  filter: blur(20px);
}
/*responsive*/

@media only screen and (max-width: 798px)
{
html, body
{
background: red;
--gutter: 6.25vw;
--order-radius: 50px
}

h1
{
font-size: 60px;
}

h1
{
  font-size: 40px;
}

nav ul li
{
  margin-left: 25px;
}

section.service article
{
  flex-direction: column;
}

section.service figure
{
  flex-basis:25vh;
}

section.service figure img
{
  width: 20%
}

section.contact a
{
  font-size: 50px;
  transform: rotate(90deg);
}


}