@font-face {
  font-family: "FT88-Regular";
  src: url("../fonts/FT88-Regular.woff2") format("woff2"),
       url("../fonts/FT88-Regular.woff") format("woff");
}

@font-face {
  font-family: "FT88-Italic";
  src: url("../fonts/FT88-Italic.woff2") format("woff2"),
       url("../fonts/FT88-Italic.woff") format("woff");
}

@font-face {
  font-family: "FT88-Gothique";
  src: url("../fonts/FT88-Gothique.woff") format("woff2"),
       url("../fonts/FT88-Gothique.wofff") format("woff");
}

/* =========================================================== FAMILY */

body{
    font-family: FT88-Regular, monospace;
    font-size: 1rem;
    color: black;
    line-height: 1.3;
}


/* ===================================================================== STYLES */

.underlined{
  text-decoration: underline;
}

.noUnderline{
  text-decoration: none !important;
}

.fontItalic{
  font-family: FT88-Italic;
  line-height: 1.1 !important;
}

.fontActive{
  font-family: FT88-Gothique;
  line-height: 1.1 !important;
}


/* ===================================================================== ALIGN */

.alignCenter{
  text-align: center;
}

.alignRight{
  text-align: right;
}

.alignJustify{
  text-align: justify;
  text-justify: inter-word;
  text-align-last: justify;
}


/* ===================================================================== LINKS */

a{
  text-decoration: underline;
  text-transform: lowercase !important;
  color: black;
}

a:hover{
  font-family: FT88-Gothique;
  text-decoration: none;
  color: black;
  line-height: 1.1;
}

.projectCard a:hover{
  line-height: inherit;
}

.projectCard a:hover .fontCaption{
  font-family: FT88-Regular;
  line-height: inherit;
}



/* ===================================================================== SIZES */

body::selection, div::selection, p::selection, a::selection, span::selection, li::selection, .fontName::selection, .fontH1::selection, .fontH2::selection, .fontH3::selection, .fontBody::selection, .fontCaption::selection, br::selection{
  background: white;
}

.fontName{
  font-size: 3.5rem;
}

.fontH1{
  font-size: 2rem;
}

.fontH2{
  font-size: 1.25rem;
}

.fontH3{
  font-size: 1.125rem;
}

.fontBody{
  font-size: 1rem;
}

.fontBody div{
  margin-bottom: .75rem;
}

.fontCaption{
  font-size: .75rem;
}



/* ===================================================================== RESPONSIVE/MEDIA QUERY */

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1200px) {

}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 992px) {

}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 768px) {
  .fontH1{
    font-size: 1.5rem;
  }

}

/* Smartphones ----------- */
@media only screen and (max-width : 600px) {


}