/* Local Variables */
:root{  
    /* COLORS*/
    --color-primary: #f8f8f8;
    --color-primary-dark-1: #f4f4f4;
    --color-primary-dark-2: #dedede;
    --color-secondary: #df2e75;
    --color-tertiary: #f2b50f;

    --color-grey-dark: #5f5f5f;
    --color-grey-dark-2: #2A2820;
    --color-grey-dark-3: #ddd;
    --color-black-1: #293233;
    --color-black-2: #414C4D;

    /* FONT */
    --default-font-size: 1.6rem;

    /* MEDIA */
    --small-mobile: 375px;
    --mobile-landscape: 480px;
    --tablet-portrait: 768px;
    --tablet-landscape: 992px;
    --desktop: 1200px;
    --big-desktop: 1800px;
}

/* MEDIA QUERY MANAGER */

/*
0 - 375px       Small mobile
[375 - 480px]	is where our normal styles apply
480 - 768px:    Mobile landscape		
768 - 992px:    Tablet portrait
992 - 1200px:	Tablet landscape
1200 - 1800px:	Desktop
1800px - more:	Big desktop

$breakpoint argument choices:
- tab-port
- tab-land
- desktop
- big-desktop

ORDER: Base + Tipography > General layout + Grid > Page layout > Components 
*/


/* Global */
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

html, body {
	/* user-select: none; */
	/* -webkit-user-select: none;
    -webkit-touch-callout: none; */
	-webkit-tap-highlight-color: transparent;
	font-family: "SangBleuSans-Regular";
	font-size: 14px;
	line-height: 16px;
	letter-spacing: -0.02em;
	margin: 0;
	overflow: hidden; 
	background: #fff;
}

/* *:not(input):not(textarea) {
    -webkit-user-select: none; 
    user-select: none; 
    -webkit-touch-callout: none; 
  } */
html{
    font-size: 50%;
    /* 1rem = 8px --> 8/16 = 50% */
}

@media only screen and (max-width: 375px){
    html{
        font-size: 50%;
        /* 1rem = 8px --> 8/16 = 50% */
    }
}
@media only screen and (min-width: 480px){
    html{
        font-size: 50%;
        /* 1rem = 8px --> 8/16 = 50% */
    }
}
@media only screen and (min-width: 768px){
    html{
        font-size: 50%;
        /* 1rem = 8px --> 8/16 = 50% */
    }
}
@media only screen and (min-width: 992px){
    html{
        font-size: 56.25%; 
        /* 1rem = 9px --> 9/16 = 56.25% */
    }
}
@media only screen and (min-width: 1200px){
    html{
        font-size: 62.5%; 
        /* 1rem = 10px --> 10/16 = 62.5% */
    }    
}


/* Grid */

.global-grid{  
	position: fixed;
	height: 100%;
	width: 100%;
    background-color: var(--color-primary);

	display: grid;
    /* grid-template-columns: [left-page] minmax(3.6rem, 1fr) [left-margin] minmax(20rem, 103rem) [right-margin] minmax(3.6rem, 1fr) [right-page];  */
    grid-template-columns: [left-page] 4.8rem [left-margin-sub] minmax(0rem, 1fr) [left-margin] minmax(20rem, 140rem) [right-margin] minmax(0rem, 1fr) [right-margin-sub] 4.8rem [right-page]; 
	grid-template-rows: [top-page] 7rem [base-head] auto [base-hero] auto [top-get-started] minmax(min-content, max-content) [top-footer] minmax(min-content, max-content) [bottom-page];
	overflow-y: scroll;
    overflow-x: hidden;
}


 
/* Typography */

@font-face {
    font-family: "baseFont";
    src: url("../font/SourceSansPro-Regular.ttf");
  }
  
  @font-face {
    font-family: "titleFont";
    src: url("../font/Lora-VariableFont_wght.ttf");
  }
  
  @font-face {
    font-family: "subtitleFont";
    src: url("../font/OpenSans-Regular.ttf");
  }


body{
    font-family: 'subtitleFont';
    line-height: 1.5;
    font-size: var(--default-font-size);
    color: var(--color-grey-dark);
    -webkit-user-select: none !important;
    user-select: none !important;
}

h1{
    font-family: 'titleFont', serif;
    font-weight: 100;
    font-size: 2.8rem;
    /* padding-top: 2rem; */
    color: var(--color-black-1);
}
/* @media only screen and (min-width: 992px){
    h1{
        font-size: 4rem;
    }
}
@media only screen and (min-width: 1200px){
    h1{
        font-size: 4.5rem;
        padding-bottom: 2rem;
    }
} */

h2{
    font-family: 'subtitleFont';
    font-weight: 100;
    font-size: var(--default-font-size);
    color: var(--color-grey-dark);
}

h3{
    font-family: 'subtitleFont';
    /* margin-top: 6px; */
}

p{
    font-size: 1.3rem;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

button{
    /* font-family: 'subtitleFont'; */
    line-height: 1.5;
    /* font-size: var(--default-font-size); */
    /* color: var(--color-grey-dark); */
}

.link,
.link:link,
.link:visited{
    text-decoration: none;
    cursor: pointer;
    color: inherit;
    /* display: inline-block; */
}

.link--footer,
.link--footer:link,
.link--footer:visited{
    text-decoration: none;
    color: var(--color-primary);
    font-size: var(--default-font-size);
    transition: all .2s;
}
.link--footer p {
    transition: all .2s;

}
.link--footer:hover{
    transform: translateY(-2px);
}
.link--footer:hover p{
    text-decoration: underline;
}

.item{
    list-style: none;
    font-size: var(--default-font-size);
}

.animated-placeholder {
    animation-duration: 9s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #f8f8f8 0%, #eee 50%, #f8f8f8 100%);
    background-size: 400% 100%;
}

/* Animations */
@keyframes placeHolderShimmer{
    0%{
        background-position: 400% 0
    }
    100%{
        background-position: -400% 0
    }
}

/* Draggable image */
.draggable-image{
    box-shadow: 0 0 0 1px var(--color-grey-dark-2);
    border-radius: 50%;
    border: 1px solid var(--color-primary)
}