:root{
  /* --backgroundColor :#00000059 ; */
  --backgroundColor :#beb181ca ;
}


body {
    min-height: 0;
    height: calc(80vh - 60px);
    font-family:'Times New Roman', Times, serif;
    color: #ddd9c9;
    /* background-color: var(--backgroundColor);  */
    transition: background-color ease;
    position: relative;
    background-image: url(https://assets.codepen.io/3735/nier-bg.svg), linear-gradient(rgba(72, 70, 61, 0.855) 2px, transparent 2px), linear-gradient(90deg, rgba(72, 70, 61, 0.025) 2px, transparent 2px);
    background-size: 125%, 125%, 6px 6px, 6px 6px;
    background-position: center center;
    background-repeat: no-repeat, repeat, repeat;
    margin: 30px 0;
    padding: 60px 0;
  }


  .container {
    display: flex;
}

  .hiddenFromDesktop {
    display: none;
    /* width: 200px; */
  }

  .displayBLOCK {
    display: block;
  }
  

  /* .buttons {
    @media (pointer:none), (pointer:coarse)  {
      width: 200px;
    }
  } */
  body:before, body:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14px;
    background: url(https://assets.codepen.io/3735/nier-border.svg) repeat-x;
    background-size: contain;
  }
  body:after {
    top: auto;
    bottom: 0;
  }
  .button-layout {
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
  }
  .button-column {
    width: 300px;
    max-width: 100%;
    margin: 0 32px 64px;
  }
  h2 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
    text-shadow: 6px 6px 0px rgba(190, 185, 163, 0.224);
  }
  h2 span {
    opacity: 0;
  }
  .button-group {
    display: flex;
    flex-direction: column;
    padding-left: 42px;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, transparent 12px, rgba(72, 70, 61, 0.25) 12px, transparent 16px), linear-gradient(90deg, rgba(72, 70, 61, 0.25) 6px, transparent 0px);
  }
  .button-group .button {
    margin-bottom: 18px;
    transform: translateX(-35px);
    opacity: 0;
  }
  .button-group .button:last-child {
    margin-bottom: 0;
  }
  .button {
    position: relative;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    /* DARK */
    /* background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 0%, rgba(72, 70, 61, 0.25) 50%, #48463d 50%, #48463d 100%); */
    /* LIGHT */
    background: linear-gradient(90deg, rgba(72, 70, 61, 0.468) 0%, rgba(72, 70, 61, 0.444) 50%, #48463d 50%, #48463d 100%);
    background-size: 200%;
    color: #dcdad0;
    /* color: #737345; */
    border: none;
    border-top: transparent 3px solid;
    border-bottom: transparent 3px solid;
    padding: 8px 20px 7px;
    line-height: 1;
    cursor: pointer;
    text-align: left;
    transition: background 0.4s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.4s ease-in-out;
  }
  .button-label {
    display: inline-block;
  }
  .button-label:before {
    content: '';
    display: inline-block;
    height: 16px;
    width: 16px;
    background: #ffffff;
    margin-right: 6px;
    transition: background-color 0.3s ease-in-out;
  }
  .button:before {
    content: '';
    display: block;
    position: absolute;
    left: -42px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 20px;
    background: url("https://assets.codepen.io/3735/nier-pointer.svg") no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
  }
  .button:after {
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    bottom: -5px;
    border-top: transparent 2px solid;
    border-bottom: transparent 2px solid;
    transition: border-color 0.3s ease-in-out;
  }
  .button:hover, .button:active, .button:focus {
    background-position: -100% 100%;
    border-color: #c2bda6;
    color: #c2bda6;
    box-shadow: 4px 4px 6px 2px rgba(72, 70, 61, 0.745);
    outline: 0;
  }
  .button:hover .button-label:before, .button:active .button-label:before, .button:focus .button-label:before {
    background: #c2bda6;
  }
  .button:hover:before, .button:active:before, .button:focus:before {
    opacity: 1;
  }
  .button:hover:after, .button:active:after, .button:focus:after {
    border-top-color: #cbc4a5;
    border-bottom-color: #bcb79d;
  }
  


/* LEFT PART OVER */


  .copy-box 
{
  position: relative;
  display: inline-block;
  margin: 0 auto;
  width: calc(71vw - 100px);
  background-color: #1b1b1b;
  /* background-color: var(--backgroundColor); */
  color: #cbcbcb;
  font-family: sans-serif;
  padding: 20px;
}



.copy-box .line
{
  position: absolute;
  background-color: rgb(71, 69, 45);
  box-shadow: 0px 0px 12px rgb(101, 102, 98);
  width: 4px;
  height: calc(100% - 20px);
  top: 10px;
  left: 22px;
  border-radius: 50%;
  overflow: hidden;
}
.copy-box.two .line
{
  border-radius: 0;
  width: 2px;
}
.copy-box .line .scanner 
{
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(121, 120, 120);
  width: 100%;
  height: 20px;
  border-radius: 50%;
  animation: scanner-loop 3s ease-in-out infinite;
}

.copy-box.two .line .scanner
{
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  height: 50%;
}
@keyframes scanner-loop
{
  0% 
  {
    top: 0;
  }
  50%
  {
    top: 100%;
  }
  100%
  {
    top: 0;
  }
}
.copy-box .inner 
{
  padding: 30px;
}






/* AGAIN */


.scrollbox {
    overflow: auto;
    width: 90vw;
    max-height: 200px;
    
    --g:radial-gradient(55% 20px, #0009, #0000);  
    background: 
      linear-gradient(#000000 10px, #0000 40px calc(100% - 40px),#000000 calc(100% - 10px)) local, 
      var(--g) top   /100% 200%,    
      var(--g) bottom/100% 200%;
  }


  .scrollbar
  {
      margin-left: 30px;
      float: left;
      height: 70vh;
      width: calc(75vw - 100px);
      /* background: #000000; */
      background: #00000000;
      /* background: var(--backgroundColor); */
      overflow-y: scroll;
      margin-bottom: 25px;
  }
  
  .force-overflow
  {
      min-height: 450px;
  }
  
  #wrapper
  {
      text-align: center;
      width: 500px;
      margin: auto;
  }
  
/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #100f0f;
}

#style-4::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
	background-color: #3a3618;
	border: 2px solid #101010;
}

#target1 {
    /* background:#0099cc; */
    /* width:300px; */
    /* height:300px; */
    /* height:160px; */
    /* padding:5px; */
    display:none;
  }
  
  /* .Hide
  {
    display:none;
  } */
  



a {
    color: rgba(213, 208, 124, 0.834);
    text-decoration: none;
}





/* overlay stuff */


.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
}

changedColor {
  color:#cbc4a5;
}

.dark-mode {
  background-color: #222;
  color: #fff;
}

/* CHANGES FOR MOBILE */
@media (pointer:none), (pointer:coarse)  {
  /* HERE ADD STYLE FOR MOBILE PHONES */
  
  /* .buttons {
    width: 200px;
    
  } */
  .hiddenFromDesktop {
    display: block;
    /* width: 200px; */
  }
  .scrollbar {
    margin-left: 20px;
    float: left;
    height: 70vh;
    width: calc(1000vw);
    /* background: #000000; */
    background: #00000000;
    /* background: var(--backgroundColor); */
    overflow-y: scroll;
    margin-bottom: 25px;
}
  .image {
    max-width: 360px;
    width: 100%;
  }


  .copy-box 
  {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    width: calc(80vw);
    background-color: #1b1b1b;
    /* background-color: var(--backgroundColor); */
    color: #cbcbcb;
    font-family: sans-serif;
    padding: 20px;
  }

}
/* END OF MOBILE PART */



.image {
  width: 400px;
}
.hidden {
  display: none;
}


.righty {
  position: absolute;
  left: 95%;
}