/* 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." */

@font-face {
  font-family: EVA;
  src: url(fonts/EVA-Matisse_Classic.ttf);
}

@font-face {
  font-family: Unifont;
  src: url(fonts/unifont.otf);
}

body {
  background: rgb(131, 131, 131);
  background-image: url("img/sayascreen.jpg");
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: #15151500;
  background-size: cover;
  color: rgb(255, 255, 255);
  font-family: EVA;
  text-align: center;
  min-height: 100vh;
    
}

.bg {
  background-image: url("img/lightpoles.jpg");
  height: 100%;
  position: relative;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid white;
  overflow: hidden;
}

.bg::before {
  content: ""; 
  top: 0;
  left: 0;
  width: 100%;
  height: 30px; 
  background-color: black;
  
  display: flex;
  align-items: center;
  overflow: hidden; 
}

.bg::after {
  content: "Life is built on archetypes. Each Archetype is compatible with multiple other specific archetypes, but incompatible with others."; 
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: max-content;
  color: white;
  font-size: 16px;
  font-family: "Unifont";
  opacity: 50%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  z-index: 2;
  padding-left: 100%; 
  animation: scroll-text 15s linear infinite;
  text-shadow: 0 0 5px #fff;
  overflow: hidden;
}

@keyframes scroll-text {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

div {
  text-align: center;
  margin: inherit;
  color: white;
  height: auto;
  padding: 0;

}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}
.footer img {
  max-width: 100%;
  height: auto;
}

.buttons {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  font-size: 24pt;
  text-align: center;
  flex-direction: row;
  align-items: center;
}


.container {
  display: flex;  
  text-align: center;
  flex-direction: column;     
  align-items:left; 
  justify-content: flex-start; 
}

.dcontainer {
  display: flex;  
  text-align: center;
  flex-direction: column;     
  align-items:left; 
  justify-content: flex-start; 
  margin-top: 20px;
  padding-left: 50px;
  border: 1px solid white;
}

.borderright {
  position:relative;
  border-right: 1px solid white;
}

.dcontainer h2 {
  text-align: left;
  margin-left: 0;
}
.dcontainer p::after {
  content: "";
}

.charimg {
  width: 800px;       
  height: auto;       
  display: flex;
  flex-direction: row;
  border-radius: 50px;
  position: relative;
  align-items: center;
  box-shadow: inset 0px 0px 10px 10px #000;
}

h1 {
  font-size: 24pt;
  text-align: center;
  margin: 0;         
}

img {
  max-width: 512px;
  height: auto;
}

.talk {
  display: inline-block;
  text-align: left;
}


p {
  display: block;
  text-align: left;
}
p::after {
  content: url("img/buttons/cursor.png");
  margin-left: 5px;
  vertical-align: top;
  display: inline-flex;

}


.talk::after {
  content: url("img/buttons/cursor.png");
  display: inline-block;
  margin-left: 5px; /* Adds spacing */
  vertical-align: middle; /* Aligns with text */

}


.vnbox {
    border: 1px hidden #262626;
    /*background-color: #111111;*/
    border-radius: 5px;
    font-size: 24pt;
      text-shadow: 0 0 12px black;

}

em {  
    font-style: normal;
    font-size: 105%;
    text-transform: uppercase;
}

.important {
  font-size: 32pt;
  color:white;
  text-shadow: 0 0 12px black;
}

/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: auto; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: black; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #895050;
  animation: shake 3s;
  animation-iteration-count: infinite;
}

/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}