/* styles/main.css */

:root {
  /*colors*/
    --primary-color: #223240;
    --secondary-color: #0a2b42;
    --tertiary-color: #252f35;
    --quaternary-color: #15202d;
    --quinary-color: #3f4756;
    --senary-color: #324357;
    --septenary-color: #655b54;
    --octonary-color: #877e74;
    --nonary-color: #e1d3bf;

  /*backgrounds*/
    --primary-menu-bg: linear-gradient(to bottom, var(--primary-color) 40%, #223240db, #22324000);
    --primary-heading-bg: radial-gradient(at center, var(--primary-color) 50%, #223240db 60%, #22324000 70%);
    --primary-text-bg: #324357db;
    --secondary-button-bg: radial-gradient(at center, var(--septenary-color) 50%, #655b54db 60%, #655b5400 70%);


  }

/*utility*/
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background: fixed url('../images/background.png') no-repeat center center/cover;
    color: var(--nonary-color);
  }
  
header {
    padding: 15px;
    text-align: center;
    color: var(--nonary-color);
    background: var(--primary-menu-bg);
  }
  
nav ul {
    list-style: none;
    padding: 0;
  }
  
nav ul li {
    display: inline;
    margin: 0 15px;
  }
  
nav ul li a {
    color: var(--nonary-color);
    text-decoration: none;
    font-weight: bold;
  }

h1 {
    text-align: center;
    padding: 20px 20px 20px 20px;
    background: var(--primary-heading-bg);
    display: inline-block;
    color: var(--nonary-color);
    position: flex;
  }

.primary-text-box {
    padding: 10px 20px 10px 20px;
    display: inline-block;
    color: var(--nonary-color);
    background:var(--primary-text-bg);
    border-radius: 15% 15% 10% 10%;
    margin: 10px 10px 10px 10px;
  }

  /*hero*/
.hero {
    display: inline-block;
    text-align: center;
    margin: 50px 10px 50px 10px;
    padding: 50px 5px;
    color: var(--nonary-color);

  }

.hero a {
    text-decoration: none;
    font-style: italic;
    color: var(--octonary-color);
  }
  
  /*link buttons*/
.links button {
    display: inline-block;
    margin: 10px 5px 10px 5px;
    padding: 10px 20px 10px 20px;
    font-style: none;
    background: var(--secondary-button-bg);
    text-decoration: none;
    border-style: none;
    font-size: 11.0px;
  }

.links button {
    color: var(--secondary-color);
  }

.links button:hover {
    color: var(--nonary-color);
    transition: color 0.3s ease;
  }

  /*footer*/
footer {
    text-align: center;
    padding: 5px 10px 5px 10px;
    background: rgba(0, 0, 0, 0.45);
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/*text*/

.mulish-light {
  font-family: "Mulish", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}


.quicksand-light {
  font-family: "Quicksand", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.shadows-into-light-regular {
  font-family: "Shadows Into Light", serif;
  font-weight: 400;
  font-style: normal;
}

.cinzel-light {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-regular {
  font-family: "Silkscreen", serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", serif;
  font-weight: 700;
  font-style: normal;
}

.pinyon-regular {
  font-family: "Pinyon Script", serif;
  font-weight: 400;
  font-style: normal;
}

.doto-light {
  font-family: "Doto", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.title-font {
  font-family: "Doto", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.cutive-mono-regular {
  font-family: "Cutive Mono", serif;
  font-weight: 400;
  font-style: normal;
}

.base-font {
  font-family: "Doto", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


/*images*/
  /*
    palette.png is in order of colors from left to right.
    bacgkround.png is the placeholder background image for the site and may need replaced for copyright.
  */
/*buttons*/

/*notes to self*/
  /* 
    Fonts
      mulish font weight: 200 to 1000 
      quicksand font weight: 300 to 700
      shadows into light font weight: 400
      cinzel font weight: 400 to 900
      silkscreen font weight: 400 or 700
      pinyon script font weight: 400
      doto font weight: 100 to 900
      cutive mono font weight: 400
  */