@import url('https://fonts.googleapis.com/css2?family=Basic&family=Bree+Serif&family=Righteous&family=Signika&display=swap');

:root {
  --letra: 'Basic', sans-serif;
  /*h1*/
  --letra2: 'Righteous', cursive;
  /*h2*/
  --letra3: 'Signika', sans-serif;
  /*h3*/
  --letra4: 'Bree Serif', serif;
}

/* ------------------------------------------------------------------- 
 * ## colors 
 * ------------------------------------------------------------------- */
:root {
  --color-1: #f8f9fa; /*color nav*/
  --color-2: #003A6F; /*color selector*/
  --color-3: #FFFFFF;
  --color-4: #C8D9E3;  

  /* shades 
     * generated using 
     * Tint & Shade Generator 
     * (https://maketintsandshades.com/)
     */
  --color-black: #000000;
  --color-white: #ffffff;

  /* text
     */
  --color-text: var(--color-3);
  --color-text-dark: var(--color-black);
  --color-text-light: var(--color-2);
  --color-placeholder: var(--color-4);

  /* buttons
     */
  --color-btn: var(--color-4);
  --color-btn-text: var(--color-black);
  --color-btn-hover: var(--color-1);
  --color-btn-hover-text: var(--color-white);

  --color-border: var(--color-black);
}

/* ------------------------------------------------------------------- 
 * ## vertical spacing and typescale
 * ------------------------------------------------------------------- */


/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --base-font-size: 1.7rem;
    --space: 2.8rem;
  }
}

/* ------------------------------------------------------------------- 
 * ## grid variables
 * ------------------------------------------------------------------- */
:root {
  /* widths for rows and containers
     */
  --width-full: 100%;
  --width-max: 1200px;
  --width-wide: 1400px;
  --width-wider: 1600px;
  --width-widest: 1800px;
  --width-narrow: 1000px;
  --width-narrower: 900px;
  --width-grid-max: var(--width-max);

  /* gutters
     */
  --gutter-lg: 2.4rem;
  --gutter-md: 2rem;
  --gutter-mob: 1rem;
}

/* ==========================================================================
 * # normalize
 * normalize.css v8.0.1 | MIT License |
 * github.com/necolas/normalize.css
 *
 * -------------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## document
 * ------------------------------------------------------------------- */

/* 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.*/

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* ------------------------------------------------------------------- 
 * ## sections
 * ------------------------------------------------------------------- */

/* Remove the margin in all browsers. */

body {
  margin: 0;
  font-size: 14px;
}

/* Render the `main` element consistently in IE. */

main {
  display: block;
}

/* Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari. */

h1 {
  font-size: medium;
  margin: 0.67em 0;
}

/* ------------------------------------------------------------------- 
 * ## grouping
 * ------------------------------------------------------------------- */

/* 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE. */

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/* 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers. */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* ------------------------------------------------------------------- 
 * ## text-level semantics
 * ------------------------------------------------------------------- */

/* Remove the gray background on active links in IE 10. */

a {
  background-color: transparent;
  font-size: medium;
}

/* 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  /* 2 */
}

/* Add the correct font weight in Chrome, Edge, and Safari. */

b,
strong {
  font-weight: bolder;
}

/* 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers. */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Add the correct font size in all browsers. */

small {
  font-size: 80%;
}

/* Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers. */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* ------------------------------------------------------------------- 
 * ## embedded content
 * ------------------------------------------------------------------- */

/* Remove the border on images inside links in IE 10. */

img {
  border-style: none;
}

/* ------------------------------------------------------------------- 
 * ## forms
 * ------------------------------------------------------------------- */

/* 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari. */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/* Show the overflow in IE.
 * 1. Show the overflow in Edge. */

button,
input {
  /* 1 */
  overflow: visible;
}

/* Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox. */

button,
select {
  /* 1 */
  text-transform: none;
}

/* Correct the inability to style clickable types in iOS and Safari. */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/* Remove the inner border and padding in Firefox. */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Restore the focus styles unset by the previous rule. */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

.row {
    width: 98%;
    max-width: var(--width-grid-max);
    margin: 0px auto;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-flow: row wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row wrap;
  }
  /* flex row containers utility classes
 */
.row.row-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .row.row-nowrap {
    -ms-flex-wrap: none;
    flex-wrap: nowrap;
  }
  
  .row.row-y-top {
    -ms-flex-align: start;
    -webkit-box-align: start;
    align-items: flex-start;
  }
  
  .row.row-y-bottom {
    -ms-flex-align: end;
    -webkit-box-align: end;
    align-items: flex-end;
  }
  
  .row.row-y-center {
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
  }
  
  .row.row-stretch {
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
  }
  
  .row.row-baseline {
    -ms-flex-align: baseline;
    -webkit-box-align: baseline;
    align-items: baseline;
  }
  
  .row.row-x-left {
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start;
  }
  
  .row.row-x-right {
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end;
  }
  
  .row.row-x-center {
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
  }