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

body {
  background-image: url(img69.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center 50%;
  color: black;
  font-family: Frutiger;
  font-size: 1em;
  padding: 0px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100vh;
}

@font-face {
    font-family: 'Frutiger';
    font-style: normal;
    font-weight: normal;
    src: url(mainHTML/font/FrutigerLTStd-Roman.otf);
}

@font-face {
    font-family: 'Frutiger Bold';
    font-style: normal;
    font-weight: normal;
    src: url(mainHTML/font/FrutigerLTStd-Bold.otf);
}

.border-outer{
  border: solid 1px black;
  border-radius: 7px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 1px white inset, 0 0 1px white inset, 0 0 5px black;
  margin: auto;
  width: 750px;
}
.border-inner{
  border: solid 1px black;
  background: hsla(0, 0%, 100%, 0.75);
  border-radius: 5px;
  margin: 5px;
  box-shadow: 0 0 1px white, 0 0 1px white;
  overflow: auto;
  mix-blend-mode: screen;
}
.banner{
  width:100%;
  aspect-ratio: 5 / 1;
  background: url(img6.jpg); /*https://static.wikitide.net/bluearchivewiki/a/ac/BG_CS_Abydos_18.jpg*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0% 30%;
}
.large-banner{
  width:100%;
  aspect-ratio: 4 / 3;
  background: url(img6.jpg); /*https://static.wikitide.net/bluearchivewiki/a/ac/BG_CS_Abydos_18.jpg*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0% 30%;
}

.title{
  color: white;
  opacity: 0.9;
  margin: 0 0 15px 0;
  padding: 15px;
  text-shadow: 0 0 1px black;
  background: linear-gradient(0deg,rgba(51, 51, 51, 1) 0%, rgba(38, 38, 38, 1) 49%, rgba(89, 89, 89, 1) 50%, rgba(176, 176, 176, 1) 100%);
}
.title h1{
 margin: 0;
 padding: 0;
 font-weight: normal;
}
.title h1 span{
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 20px;
  border: 1px solid gray;
  border-radius: 7px;
  box-shadow: 0 0 10px black inset;
}

.container{
  width: 90%;
  margin: 0 auto;
  border: 1px solid silver;
  background: white;
}
.container p{
  padding: 10px 10px 10px 65px;
}
.container a{
  color: #0047ab;
  text-decoration: none;
}
.container a::hover{
  color: #0047ab;
  text-decoration: underline;
}
.container ul{
  padding: 10px 10px 10px 65px;
}
.header{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  border-bottom: 1px solid silver;
  background: linear-gradient(to right, hsla(200, 70%, 80%, 1), hsla(200, 80%, 90%, 0.5), hsla(200, 100%, 100%, 0));
}
.header h1{
  font-weight: normal;
  color: #0047ab;
  opacity: 0.75;
  margin: 0;
  padding: 0 10px;
}
.header img{
  height: 40px;
}

.button-container{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 50px auto;
}

.enter-button{
  background: linear-gradient(0deg,rgba(45, 134, 194, 1) 0%, rgba(14, 41, 74, 1) 40%, rgba(14, 41, 74, 1) 49%, rgba(67, 84, 115, 1) 50%, rgba(167, 204, 232, 1) 100%);
  color: white;
  padding: 10px 50px;
  border: 1px solid darkgray;
  border-radius: 7px;
  font-size: 1.5em;
  cursor: pointer;
}
.enter-button-outer button{
  transition: .3s;
  transition-timing-function: ease-out;
}
.enter-button-outer button:hover{
  transform: scale(1.125);
  opacity: 0.9;
}