/*

DEFINE VIEWPORT BREAKPOINTS

PURPLE: 5950CC
GREEN: 01FF79

STATIC, FIELD AND LINK DEFINE LOOK OF TEXT, NOT POSITION

POSITION DEFINED BY ROW AND COLUMN CLASSES

*/

@FONT-FACE {
  FONT-FAMILY: "COSMICA";
  SRC: URL("../FONTS/COSMICA-LIGHT.OTF") FORMAT("OPENTYPE");
}

/* TAG */

A {
  CURSOR: POINTER;
  DISPLAY: GRID;
  HEIGHT: 100%;
  WIDTH: 100%;
  TEXT-DECORATION-LINE: UNDERLINE;
  TEXT-DECORATION-THICKNESS: FROM-FONT;
}

A:LINK:HOVER {
  COLOR: #FFFFFF;
  BACKGROUND-COLOR: #01FF79;
}

A:VISITED:HOVER {
  COLOR: #FFFFFF;
  BACKGROUND-COLOR: #5950CC;
}

BODY {
  ALIGN-ITEMS: CENTER;
  BACKGROUND-COLOR: #FFFFFF;
  DISPLAY: GRID;
  FONT-FAMILY: "COSMICA", SANS-SERIF;
  FONT-SIZE: 1.5VH;
  GRID-TEMPLATE-COLUMNS: REPEAT(7, 1FR);
  GRID-TEMPLATE-ROWS: REPEAT(50, 2VH);
  LINE-HEIGHT: 2VH;
  FONT-WEIGHT: 300;
  MARGIN: 0;
  TEXT-ALIGN: LEFT;
}

DIV {
  DISPLAY: GRID;
  HEIGHT: 100%;
  WIDTH: 100%;
}

IMG {
  WIDTH:100%;
  HEIGHT:100%;
  OBJECT-FIT: COVER;
  OVERFLOW: HIDDEN;
}


/* CLASS */

.COLUMN-1 {
  GRID-COLUMN: 1;
}

.COLUMN-1-4 {
  GRID-COLUMN: 1 / 4;
}

.COLUMN-2-4 {
  GRID-COLUMN: 2 / 4;
}

.FIELD {
  BACKGROUND-COLOR: #5950CC;
  COLOR: #FFFFFF;
}

.FORMAT {
  BACKGROUND-COLOR: #FFFFFF;
  COLOR: #5950CC;
  GRID-COLUMN: 1 / 2;
}

.FORMAT-INFORMATION {
  ALIGN-ITEMS: CENTER;
  DISPLAY: GRID;
  GRID-COLUMN: 2 / 7;
  GRID-ROW: 48 / 49;
  GRID-TEMPLATE-COLUMNS: REPEAT(5, 1FR);
  TEXT-ALIGN: LEFT;
}

.IDENTIFICATION-IMAGE {
  BACKGROUND-COLOR: #5950CC;
  GRID-ROW: 17 / 33;
  GRID-COLUMN: 2 / 3;
}

.INFORMATION {
  DISPLAY: GRID;
}

.NAVIGATION-LINKS {
  BACKGROUND-COLOR: #FFFFFF;
  COLOR: #5950CC;
  DISPLAY: GRID;
  GRID-COLUMN: 4 / 7;
  GRID-ROW: 2 / 3;
  GRID-TEMPLATE-COLUMNS: REPEAT(3, 1FR);
}

.STATIC {
  BACKGROUND-COLOR: #FFFFFF;
  COLOR: #5950CC;
}

.VERSION {
  BACKGROUND-COLOR: #5950CC;
  COLOR: #FFFFFF;
  GRID-COLUMN: 5 / 6;
}

/* ID */

#SUBJECT {
  GRID-ROW: 20 / 22;
  GRID-COLUMN: 4 / 7;
  GRID-TEMPLATE-COLUMNS: REPEAT(3, 1FR);
  GRID-TEMPLATE-ROWS: REPEAT(2, 1FR);
}

#SUBJECT-CONTACTS {
  GRID-ROW: 28 / 30;
  GRID-COLUMN: 4 / 7;
  GRID-TEMPLATE-COLUMNS: REPEAT(3, 1FR);
  GRID-TEMPLATE-ROWS: REPEAT(2, 1FR);
}

#SUBJECT-DATA {
  GRID-ROW: 23 / 27;
  GRID-COLUMN: 4 / 7;
  GRID-TEMPLATE-COLUMNS: REPEAT(3, 1FR);
  GRID-TEMPLATE-ROWS: REPEAT(4, 1FR);
}