/* Color Palette */
/* When using (example):
        background: var(--warm-gray-light);
*/
:root {
    /* White */
    --white: #f8f5f5;
    /* Warm Gray Ramp */
    --warm-gray-light: #e3e0d7;
    --warm-gray-med-light: #c3b8b1;
    --warm-gray-med: #a39391;
    --warm-gray-med-dark: #8d7176;
    --warm-gray-dark: #6a4c62;
    /* Brick Ramp */
    --brick-light-light: #dbac8c;
    --brick-light: #d18b79;
    --brick-med-light: #bd6868;
    --brick-med: #96485b;
    --brick-med-dark: #7a3757;
    --brick-dark: #612447;
    --brick-dark-dark: #421e42; /* use as "black" */
    /* Aged Yellow */
    --aged-yellow: #e6cfa1;
    /* Green Ramp */
    --green-light-light: #e7ebbc;
    --green-light: #b2dba0;
    --green-med-light: #87c293;
    --green-med: #70a18f;
    --green-med-dark: #637c8f;
    /* Blue Ramp */
    --blue-light-light: #c0e5f3;
    --blue-light: #95c3e9;
    --blue-med-light: #74a0d1;
    --blue-med: #6074ab;
    --blue-med-dark: #5b5280;
    /* Nougat Ramp */
    --nougat-light: #edd5ca;
    --nougat-med-light: #dfb6ae;
    --nougat-med: #c98f8f;
    --nougat-dark-med: #b56e75;
}

/* Cayetano Normal */
@font-face {
    font-family: "Cayetano";
    src: url('assets/fonts/cayetano/CAYETANR.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

/* Cayetano Italic */
@font-face {
    font-family: "Cayetano";
    src: url('assets/fonts/cayetano/CAYETNRI.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

/* Cayetano Bold */
@font-face {
    font-family: "Cayetano";
    src: url('assets/fonts/cayetano/CAYETNRB.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}


body {
    font-size: 100%; /* default font size */
    font-family: "Cayetano", Arial, Helvetica, sans-serif;
}

header {
    font-size: 115%;
    font-family: "Cayetano", Arial, Helvetica, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.main-title {
  position: absolute;
  width: 50%;
  height: 12%;
  left: 25%;
  top: 20%;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 2.5em;
}

/* MEDIA QUERIES FOR SCREEN SIZE ---------------------------------*/

/* If the screen height is 500px tall or less */
@media screen and (max-height: 500px) {
  .container {
    height: 250px;
  }
}

/* If the screen width is 900px tall or less */
@media screen and (max-width: 900px) {
  .container {
    width: 360px;
  }
}

/* If the screen size is 601px wide or more */
@media screen and (min-width: 1301px) {
  .main-title {
    font-size: 2.5em;
  }
}

/* If the screen size is 600px wide or less */
@media screen and (max-width: 1300px) {
  .main-title {
    font-size: 1.5em;
  }
}

/* If the screen size is 601px tall or more */
@media screen and (min-height: 601px) {
  .btn-start {
    font-size: 1.5em;
    height: 12%;
  }
}

/* If the screen size is 600px tall or less */
@media screen and (max-height: 600px) {
  .btn-start {
    font-size: 1em;
    height: 30px;
  }
}

/* -------------------------------------------------------------------------- */

.canvas1 {
  background: linear-gradient(0deg, #c0b6d3, #e2deeb, #c0b6d3);
  position: absolute;
  width: 100%;
  height: 100%;
}

.btn-start {
  position: absolute;
  width: 20%;
  left: 40%;
  top: 60%;
  font-family: system-ui, sans-serif;
  cursor: pointer;
  font-weight: bold;
  border: none;
  text-align: center;
  border: 3px solid #705d97;
  border-radius: 6px;
}

.btn-start:active,
.btn-start:hover {
  outline: 0;
  box-shadow: rgba(255, 255, 255, 0.8) 0 15px 30px -5px;
  border: 3px solid #1c142d;
}

.btn-vision {
  position: absolute;
  bottom: 10%;
  right: 10%;
  font-family: system-ui, sans-serif;
  cursor: pointer;
  font-weight: bold;
  border: none;
  text-align: center;
  border: 3px solid #705d97;
  border-radius: 6px;
  white-space: nowrap;
  height: 10%;
  font-size: 0.8em;
  padding: 0.2rem;
}

.btn-vision:active,
.btn-vision:hover {
  outline: 0;
  box-shadow: rgba(255, 255, 255, 0.8) 0 15px 30px -5px;
  border: 3px solid #1c142d;
}