* {
    box-sizing: border-box;
}

@font-face {
    font-family: "Lato";
    font-style : normal;
    font-weight: 400;
    src        : url('../../../libs/fonts/Lato-Regular.woff2') format('woff2'),
                 url('../../../libs/fonts/Lato-Regular.woff') format('woff')
                 url('../../../libs/fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Lato-Black";
    font-style : normal;
    font-weight: 700;
    src        : url('../../../libs/fonts/Lato-Black.woff2') format('woff2'),
                 url('../../../libs/fonts/Lato-Black.woff') format('woff'),
                 url('../../../libs/fonts/Lato-Black.ttf') format('truetype');
}

@font-face {
    font-family: "Lato-Light";
    font-style : normal;
    font-weight: 700;
    src        : url('../../../libs/fonts/Lato-Hairline.woff2') format('woff2'),
                 url('../../../libs/fonts/Lato-Hairline.woff') format('woff'),
                 url('../../../libs/fonts/Lato-Hairline.ttf') format('truetype');
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style : normal;
} 

.success-text {
    color: #16803d;
}
.error-text {
    color: #9a1b1b;
}

h1.heading,
h2.heading {
    font-family: "Lato-Black", sans-serif;
    font-weight: 700;
    font-style : normal;
}

.force-hidden {
    display: none !important;
}

.socials:hover {
  animation-play-state: paused;
}

.socials > .icon {
  margin: 0 0.1em;  
}

.socials > .icon  > i {    
  transition: 0.5s ease-in-out;
}

i.fa-facebook:hover {
  color: #1877F2;
}

i.fa-twitter:hover {
  color: #1DA1F2;
}

i.fa-linkedin:hover {
  color: #0A66C2;
}

i.fa-github:hover {
  color: #24292E;
}

i.fa-npm:hover {
  color: #E60023;
}

i.fa-diagram-project:hover {
  color: rgb(9, 7, 141);
}

.image-fade {
  -webkit-mask-image: 
    linear-gradient(to top,    transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to left,   transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-composite: intersect;
  
  mask-image: 
    linear-gradient(to top,    transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to left,   transparent 0%, black 20%, black 80%, transparent 100%);
  mask-composite: intersect;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}