@font-face {
  font-family: 'RA'; /*a name to be used later*/
  src: url('/fonts/RomanAntique.ttf'); /*URL to font*/
}

*{
  box-sizing:border-box;
  position:relative;
  filter:grayscale(100%);
  color:white;
  font-family:RA;
}
img{
  pointer-events: none;
}
body{
  background-image:url('/bgs/bg010.jpeg');
  background-size:100vw 100vh;
  width:100vw;
  height:100vh;
  background-color:black;
  overflow:hidden;
  text-align:center;
  padding:10vh;
}
main{
  width:70vw;
  height:70vh;
  border:1px dotted white;
  background-image:url('/bgs/bg011.jpeg');
  box-shadow:0 0 5px white, inset 0 0 5px white;
  margin: auto;
  padding:2%;
  border-top-right-radius:50px;
  border-bottom-left-radius:50px;
}
header{
  position:absolute;
  top:0;
  left:0;
  border-bottom:1px dotted white;
  border-top-right-radius:50px;
  text-align:right;
}
footer{
  position:absolute;
  bottom:0;
  left:0;
  border-top:1px dotted white;
  border-bottom-left-radius:50px;
  text-align:left;
}
button{
  background-image:linear-gradient(to bottom, #000000, #434343);
  width:95%;
  height:auto;
  border:1px dotted white;
  box-shadow: inset 0 0 5px white, 0 0 5px 3px black;
  border-radius:15px;
  margin:4% 0;
}

main > img{
  position:absolute;
  z-index:20;
  filter:drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(0 0 4px black);
}
header, footer{
  background-image:linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
  width:100%;
  height:auto;
  box-shadow: inset 0 0 5px white;
  z-index:19;
  padding:0 2%;
}
header *, footer *{
  display:inline-block;
}
p, h1, h2, h3, li{
  filter: drop-shadow(2px 2px black) drop-shadow(-2px -2px black) drop-shadow(2px -2px black) drop-shadow(-2px 2px black);
}
a, a:visited{
  color:white;
}
header:is(h1, h2, h3, p), footer:is(h1, h2, h3, p){
  margin:0 5%;
}
button:hover{
  box-shadow: inset 0 0 10px white, 0 0 5px 3px black;
}

.inner{
  background-color:black;
  width:98%;
  height:100%;
  margin:0 auto;
  border:1px solid white;
  box-shadow: inset 0 0 5px white; 
  border-top-right-radius:50px;
  border-bottom-left-radius:50px;
  padding:12% 0 10% 0;
  overflow:hidden;
}
.inner2{
  background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
  width:96%;
  height:100%;
  margin:0 auto;
  border:1px dotted white;
  box-shadow: inset 0 0 5px white; 
}
.inner3{
  background-image:linear-gradient(to bottom, #000000, #434343);
  width:100%;
  height:100%;
  border:1px dotted white;
  box-shadow: inset 0 0 5px white, 0 0 5px 3px black;
  border-radius:15px;
  padding:2%;
}

.row{
  display:flex;
  width:100%;
  height:100%;
  gap:1%;
  margin:auto;
}
.column1{
  flex:70%;
  max-width:70%;
  padding:2%;
}
.column2{
  flex:30%;
  max-width:30%;
  border-right:1px solid white;
  padding:2%;
}


.scroll{
  overflow:auto;
  overflow-x:hidden;
  height:100%;
}
.inner3 .scroll{
  border:1px dashed white;
  height:80%;
  border-radius:15px;
  box-shadow: inset 0 0 3px white;
}

.imgtxt{
  height:1em;
  width:auto;
  vertical-align: middle;
}

.divider{
  width:100%;
  height:auto;
}
.frame{
  width:100vw;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:50;
}

.quotecontainer{
  width:40%;
  height:8vh;
  position:absolute;
  top:50%;
  right:15%;
  transform:translateY(-50%);
  padding:1%;
  overflow:hidden;
  border-right:1px solid white;
  border-left:1px solid white;
}
.quotecontainer2{
  overflow:hidden;
  height:100%;
  width:100%;
}
.quotecontainer3{
  animation:scrollleft 15s linear infinite;
  white-space:nowrap;
}
@keyframes scrollleft{
  from{transform:translate(18%,-50%);top:50%}
  to{transform:translate(-100%,-50%);top:50%}
}

.stroke{
  filter:drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(0 0 4px black);
}
.stroke2{
  filter:drop-shadow(0 1px 0 white)drop-shadow(0 0 4px black);
}