@font-face {
  font-family: BlackFont;
  src: url(./resources/Fonts/Lato/Lato-Black.ttf);
}
@font-face {
  font-family: BoldFont;
  src: url(./resources/Fonts/Lato/Lato-Bold.ttf);
}

@font-face {
  font-family: regularFont;
  src: url(./resources/Fonts/Lato/Lato-Regular.ttf);
}

:root {
 --asideWidth: 80mm;
 --titleColor: #001850;
 --darkenColor: #010b22;
}

*{
  letter-spacing: 1.5mm;
  font-family: regularFont;
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
  font-size: 4mm;
}

h1 {
  font-family: BlackFont;  
}

h2 {
  font-family: BoldFont;
}

#Page {
    display: grid;
    width: 210mm;    
    /* height: 279.4mm; letter */
    /* height: 240mm; A4*/
    height: 240mm;
    grid-template:
      "head head" 45mm
      "aside2  main" 1fr
      / var(--asideWidth) 1fr;
  }

  body{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  header {
    grid-area: head;
    display: flex; 
    z-index: -1;  
    background-image: url('./images/headerImage10.jpg');
    background-size: cover;           
  }
  
  #Aside1 {
    width:  var(--asideWidth);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #Aside2 {
    background-color: rgb(227, 242, 255);
    grid-area: aside2;
    padding: 4mm;
  }
  
  main {
    background-color: white;
    grid-area: main;
    padding: 4mm 0mm 10mm 10mm;
  }

#ImageProfile{
  width: 40mm;
  height: 40mm;
  background-image: url('./images/EmilioProfile.jpg');
  background-size: cover;
  border-radius: 50%;  
}

#MainDataProfile{
 /* background-color: black;
 opacity: 0.3; */
  width: 130mm;
  display: flex;  
  flex-flow: column; 
  justify-content: center;
  padding: 5px; 
  z-index: 1;
}
/* animation-duration: 2s;
animation-iteration-count: infinite;
transform-origin: bottom; */

#MainDataProfile>h1{ 
  font-size: 10mm;
  color: white;
  font-family: blackFont;  
}

#MainDataProfile>p{ 
  font-size: 5mm;
  color: whitesmoke;
  font-family: regularFont; 
}

.title{
  margin-bottom: 1mm;
}

.title>h1{
  letter-spacing: 2mm; 
  color:  var(--titleColor);
  font-size: 5mm;
}

.title > div{
  margin-top: 2mm;
  background-color: var(--titleColor);
  width: 20mm;
  height: 1.5mm; 
}

.container{
  opacity: 0.6;
  margin-bottom: 4.5mm;
}

.container > p , li{ 
  letter-spacing: normal;
  color: var(--titleColor);
}

.container > p > span{
  letter-spacing: normal;
  color: var(--titleColor);
  font-family: BoldFont
}

.container > p > a {
  letter-spacing: normal;  
}

.bottomSpace{
  margin-bottom: 2mm;
}

ul>li{
  margin: 0mm 0mm 1.5mm 0mm;
  padding: 1mm;
  background-color: rgb(232 232 232);
  border-radius: 2mm;
  list-style: none;
}

/* ANIMATION HOVER - BOUNCE EFFECT */
.bounce{
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
}

.bounce:hover {
  animation-name: bounce;
  animation-timing-function: ease;  
}

@keyframes bounce {
0%   { transform: translateY(0); }
50%  { transform: translateY(-50px); }
100% { transform: translateY(0); }
}

/*ANIMATION HOVER - MOVE RIGHT*/
.animation_move_right{
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
}

.animation_move_right:hover {
  animation-name: bounce;
  animation-timing-function: ease;  
}

@keyframes bounce {
0%   { transform: translateY(0); }
50%  { transform: translateY(-50px); }
100% { transform: translateY(0); }
}

/* TRANSITION HOVER - TRANSITION RIGHT */
.transition_right{  
  transition: transform 0.8s ease;
}

.transition_right:hover{
  transform: translateX(5px);
}

/* TRANSITION HOVER - font darken */

.transition_darken{
  transition: color 1s ease, opacity 1s ease;
}

.transition_darken:hover{
  color: var(--darkenColor);
  opacity: 0.8;
} 

.transition_darken:hover .title > div{
  background-color: var(--darkenColor);
}

/*TRANSITION HOVER - LOW BAR INCREASE.*/
.transition_low_bar_increase_width *{
  transition: width 2s ease; 
}

.transition_low_bar_increase_width:hover .title > div{
  width: 100%;
}

/* TRANSITION HOVER - INCREASE HEIGHT*/
.transition_increase_height{
  transition:  transform 2s ease;
}

.transition_increase_height:hover{
  transform: translateX(5mm);
}