/* zen-maru-gothic-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('/Assets/Fonts/zen-maru-gothic-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-maru-gothic-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('/Assets/Fonts/zen-maru-gothic-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-maru-gothic-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 900;
  src: url('/Assets/Fonts/zen-maru-gothic-v19-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100;
  src: url('/Assets/Fonts/Archivo-Thin.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100;
  src: url('/Assets/Fonts/Archivo-ThinItalic.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 200;
  src: url('/Assets/Fonts/Archivo-ExtraLight.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 200;
  src: url('/Assets/Fonts/Archivo-ExtraLightItalic.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  src: url('/Assets/Fonts/Archivo-Light.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300;
  src: url('/Assets/Fonts/Archivo-LightItalic.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  src: url('/Assets/Fonts/Archivo-Regular.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  src: url('/Assets/Fonts/Archivo-RegularItalic.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  src: url('/Assets/Fonts/Archivo-Medium.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 500;
  src: url('Assets/Fonts/Archivo-MediumItalic.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  src: url('Assets/Fonts/Archivo-SemiBold.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 600;
  src: url('/Assets/Fonts/Archivo-SemiBoldItalic.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  src: url('/Assets/Fonts/Archivo-Bold.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 700;
  src: url('/Assets/Fonts/Archivo-BoldItalic.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  src: url('/Assets/Fonts/Archivo-ExtraBold.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 800;
  src: url('/Assets/Fonts/Archivo-ExtraBoldItalic.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  src: url('/Assets/Fonts/Archivo-Black.ttf') format('truetype');
}
@font-face{
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 900;
  src: url('/Assets/Fonts/Archivo-BlackItalic.ttf') format('truetype');
}

body {
  background-color: #1e0030;
  color: #b626ff;
  font-family: 'Archivo';
    font-weight: 400;
    font-style:normal;
  margin:0;
}
div {
  padding:0.5rem;
}
.window-container {
  display:flex; 
  align-items: stretch;
  padding:5px;
  column-gap:10px;
}
div .window {
  background-color:#000;
  border-color:#a500ff;
  border-style:solid;
  border-width:2.5px;
  margin:0;
  margin-bottom:10px;
  padding:5px;
  float:left;
  height:auto;
  flex:1;
  overflow-x:hidden;
  overflow-y:auto;
}
div .window-title{
  margin:-5px;
  margin-bottom:10px;
  padding:5px;
  background-color:#a500ff;
  color:white;
  font-weight:900;
  text-align:left;
  font-size:1.5rem;
  text-transform: uppercase;
}

div .window-subtitle{
  margin:-5px;
  margin-top:-10px;
  margin-bottom:5px;
  padding:5px;
  background-color:#a500ff;
  color:white;
  font-weight:600;
  text-align:left;
  font-size:1.25rem;
  text-transform: uppercase;
}

.gallery{
  padding:1rem;
  columns: 15rem 3;
  gap:1rem;
}

.gallery-image{
  width:100%;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  
  
}

.big-button{
  border-radius:5px;
  background-color:#fff6ea;
  border-color:orange;
  border-style:solid;
  border-width:2.5px;
  font-size:2rem;
  font-weight:900;
  text-align:center;
  align-items: center;
  justify-content: center;
}

.small-button{
  border-radius:5px;
  background-color:#fff6ea;
  border-color:orange;
  border-style:solid;
  border-width:2.5px;
  font-size:1.5rem;
  font-weight:900;
  text-align:center;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

a {
  text-decoration: none;
  font-weight:700;
  color: #a500ff;
}
a:hover{
  text-shadow: 0px 0px 11px #a500ff;
}
.page-title{
 font-size:3rem; 
 font-weight:900;
 text-align:center;
} 

.section-title{
  font-size:2rem;
  font-weight: 700;
  text-align: center;
}



table,th,td {
  border-color:orange;
  border-style:solid;
  border-width:2.5px;
  border-collapse:collapse;
}

th{
  background-color:orange;
  color:white;
}

.character-profile {
  border-radius:5px;
  width:100%;
}

.character-name{
  font-weight:600;
  font-size: 1.5rem;
  text-align: center;
}

hr{
  border: none;   
  height: 1px;             
  background-color: #b626ff;
}