/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
:root {
  --parchment : #E0DCD2;
  --beige : #d7caa8; 
  --burnished: #D0BC9F;
}

body {
  font-family: "Spectral", serif;
  margin: 0;
  background-color: #000;
  color: #D0BC9F;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.bl {
  color: #AEAF89;
}

.js {
  color: #ADB3B6;
}


a {
  color: #E4490F;
  text-decoration: none;
}

nav {
    display: block;
    position: sticky;
    top: -1px;
    width: 100%;
    background-color: #d7caa8;
    text-align: center;
    z-index: 100;
    min-height: 50px;
}

.navbar {
  display: flex;
  justify-content: space-between; /* pushes left and right apart */
  align-items: center;
}

.nav-center img {
  height: 40px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.navleft,
.navright {
  display: flex;
  padding: 0em 2em;
}

.navlink {
    display: inline-block;
    padding: 15px;
    font-size: 12px;
    font-family: Montserrat, sans-serif;
}

.navlink a {
    color: #223344;
    letter-spacing: 4px;
    text-decoration: none;
    font-weight: 700;
}

header {
    /*margin-top: 325px;*/
    /*margin-bottom: 100px;*/
    background-image: url('tps_header.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    min-height: 500px;
    position: relative;
    display: block;
    width: 100%;
}

#logo {
    position: absolute;
    bottom: 20px;         /* 20px margin from the bottom edge */
    left: 48%;            /* center horizontally */
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px;
}

#logo img {
  display: block;
  width: 100%;
  height: auto;
}

.section {
  width: 100%;
  padding: 10px 0; /* space top and bottom */
}

.section-title {
  display: flex;
  position: sticky;
  bottom: 30px;            
  padding: 0.5em 1em;
  margin: 0;
  z-index: 900;          /* slightly below navbar */
}

.section.tcxx {
    background-color: #E0DCD2;
    background-image: url('tcxx_bg.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 75% 10%;
    min-height: 500px;
    position: relative;
    display: block;
    width: 100%;
}

.section-title.tcxx {
  float: right;
  right: 18%;
}

.divider {
  border: none;           /* remove default 3D border */
  height: 1px;            /* thickness of the line */
  background-color: #d7caa8; /* your color */
  margin: 1em auto;       /* vertical spacing */
}

.container {
  display: block;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.main {
    width: 80%;
    max-width: 800px;
    display: block;
    margin: 0 auto;
    padding-left: 70px;
    padding-right: 70px;
    position: relative;
    background-size: 500px auto;
    background-position: center;
    z-index: 1;
}

.main.light {
  color: #000;
  /*font-family: Libre Baskerville, serif;*/
  /*-webkit-text-stroke: 1px #000;*/
    /*text-shadow:*/
    /*0 0 17px beige,*/
    /*0 0 20px beige,*/
    /*0 0 1px beige;*/
    /*0 0 3px beige;*/
}

.main.light img {
  max-width: 100%;    /* never exceed container width */
  min-width: 40%;     /* never shrink below 40% of container */
  height: auto;       /* maintain aspect ratio */
  padding: 15px;
  
}

.main.light.pcontainer {
  background-image: url('parchment.png');
  padding-left: 20px;
  padding-right: 20px;
  opacity: 0.9;
  max-width: 400px;
  float: left;
  border-radius: 1px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.3)
  
}

.ribbon-btn {
  display: block;
  width: 100%;
  background: #000;
  color: #D0BC9F;
  font-weight: bold;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 0.3em 2.3em; /* top/bottom padding */
  margin-top: 10px; /* space between container and ribbon */
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 3% 50%);
}

.start-btn:hover {
  background: #666;
}


footer {
  /*background: #d7caa8;*/
  text-align: center;
  padding: 1em;
  font-size: 0.9em;
}