/*
 *
 * --------------------------------------- 01 TYPOGRAPHY SYSTEM ---------------------------------------
 *
 * FONT SIZE SYSTEM
 * *  1px =  10 |  12 |  14 |  16 |  18 |  20 |  24 |  30 |  36 |  44 |  52 |  62 |  74 |  86 |  98 |
 * * 10px = 1.0 | 1.2 | 1.4 | 1.6 | 1.8 | 2.0 | 2.4 | 3.0 | 3.6 | 4.4 | 5.2 | 6.2 | 7.4 | 8.6 | 9.8 |
 * * 1rem = 1.0 | 1.2 | 1.4 | 1.6 | 1.8 | 2.0 | 2.4 | 3.0 | 3.6 | 4.4 | 5.2 | 6.2 | 7.4 | 8.6 | 9.8
 *
 * The 10px reference is used for 1080p monitors,
 * whose rem has been set to 62.5%, so to 10px
 * if you're not entirely conscius of what you're doing please stick to rem dimensions
 *
 * FONT WEIGHTS:
 * * Default: 400
 *
 *
 * LINE HEIGHTS:
 * * Default: 1
 *
 * SPACING SYSTEM
 * *  1px =   2 |   4 |   8 |  12 |  16 |  24 |  32 |  48 |  64 |  80 |  96 |  128 |
 * * 10px = 0.2 | 0.4 | 0.8 | 1.2 | 1.6 | 0.4 | 3.2 | 4.8 | 6.4 | 8.0 | 9.6 | 12.8 |
 * * 1rem = 0.2 | 0.4 | 0.8 | 1.2 | 1.6 | 0.4 | 3.2 | 4.8 | 6.4 | 8.0 | 9.6 | 12.8 |
 *
 * The 10px reference is used for 1080p monitors,
 * whose rem has been set to 62.5%, so to 10px
 * if you're not entirely conscious of what you're doing please stick to rem dimensions
 *
 * LETTER SPACING:
 *
 * ----------------------------------------- 02 COLOR SYSTEM ------------------------------------------
 *
 * Primary:
 *
 * Tints:
 *
 * Shades:
 *
 * Accents:
 *
 *
 * Greys:
 * * #696969
 *
 * -------------------------------------------- 03 IMAGES ---------------------------------------------
 *
 *
 *
 * --------------------------------------------- 04 ICONS ---------------------------------------------
 *
 *
 * -------------------------------------------- 05 SHADOWS --------------------------------------------
 *
 *
 * ----------------------------------------- 06 BORDER-RADIUS -----------------------------------------
 *
 *
 *
 * ------------------------------------------ 07 WHITESPACE -------------------------------------------
 *
 * ----------------------------------------------------------------------------------------------------
 */

/*****************************************************************************************************/
/*********************************************** TAGS ************************************************/
/*****************************************************************************************************/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* To add only if you desire to change the focus outline */
/* *:focus {} */

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    color: #444444;
    font-family: "Raleway", Helvetica, sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.0;
    overflow-x: hidden;
}

/*****************************************************************************************************/
/************************************ GENERAL REUSABLE COMPONENT *************************************/
/*****************************************************************************************************/


/*********************************************** GRIDS ***********************************************/

.grid {
    display: grid;
}

.grid-1col {
    grid-template-columns: repeat(1, 1fr);
}

.grid-2cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid-center {
    justify-content: center;
    align-items: center;
}

/*********************************************** FLEX ************************************************/

.flex {
    display:flex;
}

.flex-column{
    flex-direction: column;
}

.flex-gap-medium{

}

/********************************************** HEADERS **********************************************/

.heading-primary {
    font-size: 3.0rem;
}

.heading-secondary {
    font-size: 2.4rem;
    font-weight: 600;
}

.heading-tertiary {
    font-size: 2.0rem;
    font-weight: 600;
}



/*********************************************** LINKS ***********************************************/

.nav-link:link,
.nav-link:visited
{
    display: inline-block;
    text-decoration: none;
    background-color: #444444;
    color: #ffffff;
    padding: 1rem 1.4rem;
    border-radius: 10rem;
}

.nav-link:hover,
.nav-link:active
{
    background-color: #696969;
    cursor: pointer;
}

.link:link,
.link:visited
{
    color: #696969;
    font-weight: 600;
}

.link:hover,
.link:active
{
    cursor: pointer;
}

/************************************************ GEN ************************************************/

.text-centered {
    text-align: center;
}

.small {
    font-size: 1.6rem;
}

.very-small {
    font-size: 1.2rem;
}

.bold {
    font-weight: 700;
}

.semi-bold {
    font-weight: 600;
}

.medium-line-height{
    line-height: 1.25;
}

.big-line-height{
    line-height: 1.6;
}

.white-text {
    color: white;
}

.block {
    display: block;
}