@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/bg008.jpeg');
  background-size:100vw 100vh;
  background-color:black;
  overflow:hidden;
  text-align:center;
}
nav{
  position:absolute !important;
  width:13% !important;
  height:25% !important;
  left:4% !important;
  top:35% !important;
  transform:rotate(-6deg) !important;
  z-index:98 !important;
  padding-top:3% !important;
}
footer{
  position:fixed;
  bottom:-10%;
  left:25%;
  z-index:100;
  width:36vw;
  height:auto;
  align-items:center;
}
button {
  padding:2%;
  background-image: linear-gradient(0deg, rgba(48, 48, 48, 1) 0%, rgba(0, 0, 0, 1) 100%);
  border:1px white solid;
  border-radius:20px;
  color:white;
  width:100%;
  height:auto;
  box-shadow: inset 0 0 6px white;
  margin:2% 0 2% 0;
}
button:hover {
  padding:2%;
  background-image: linear-gradient(180deg, rgba(48, 48, 48, 1) 0%, rgba(0, 0, 0, 1) 100%);
  border:1px white solid;
  border-radius:20px;
  color:white;
  width:100%;
  height:auto;
  box-shadow: 0 0 6px white;
  margin:2% 0 2% 0;
}
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);
}
nav .scroll h1, nav .scroll h2, nav .scroll h3, nav .scroll li, nav .scroll p{
  margin:1%;
}
a, a:visited{
  color:white;
}

.main{
  background-image: url('/bgs/bg009.png');
  background-size:100% 100%;
  width:85vw;
  height:80vh;
  margin:0 auto;
  padding:6%;
  padding-top:12% !important;
}

.box{
  background-image:linear-gradient(180deg,rgba(94, 94, 94, 1) 0%, rgba(0, 0, 0, 1) 100%);
  border-radius:20px;
  border:groove 1px white;
  box-shadow:inset 0 0 10px 5px black;
  width:100%;
  height:25vh;
  color:white;
  padding:1%;
  padding-top:4%;
  overflow:visible;
  margin-bottom:6%;
}

.row{
  display:flex;
  max-width:88%;
  gap:1%;
  margin:auto;
}
.column1{
  flex:60%;
  max-width:60%;
}
.column2{
  flex:40%;
  max-width:40%;
}
.column3{
  flex:49%;
  max-width:49%;
}
.column4{
  flex:50%;
  max-width:50%;
}
.column5{
  flex:33%;
  max-width:33%;
}

.scroll{
  overflow:auto;
  overflow-x:hidden;
  height:100%;
}

.scroll2{
  overflow:auto;
  height:46%;
  overflow-x:hidden;
}

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

.dropshadow{
  filter:drop-shadow(0 0 5px white);
}
.dropshadow2{
  filter:drop-shadow(0 0 5px white) drop-shadow(0 0 2px white) drop-shadow(0 0 3px white);
}

.inline{
  display:inline;
}

.divider{
  margin:6% 0 6% 0;
  width:100%;
  height:auto;
}
.divider2{
  width:100%;
  height:auto;
}
.frame{
  width:100vw;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:99;
  pointer-events:none;
}