/**
style_index.css by Ramble Tydiel
SIDEBAR TUTORIAL: https://www.youtube.com/watch?v=R7b3OlEyqug
**/
/*FONTS*/

@font-face {
  font-family: dragon;
  src: url(fonts/Dragon.ttf);
}

@font-face {
  font-family: magnus;
  src: url();
}

@font-face {
    font-family: "Proxima";
    src: url("https://db.onlinewebfonts.com/t/f07adcc3b76e4bcccedf8089dca270ec.eot");
    src: url("https://db.onlinewebfonts.com/t/f07adcc3b76e4bcccedf8089dca270ec.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/f07adcc3b76e4bcccedf8089dca270ec.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/f07adcc3b76e4bcccedf8089dca270ec.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/f07adcc3b76e4bcccedf8089dca270ec.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/f07adcc3b76e4bcccedf8089dca270ec.svg#Proxima Nova S Semibold")format("svg");
}

@font-face {
    font-family: "MSung";
    src: url("https://db.onlinewebfonts.com/t/879e627c4af1afcd6f4140a1da5184df.eot");
    src: url("https://db.onlinewebfonts.com/t/879e627c4af1afcd6f4140a1da5184df.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/879e627c4af1afcd6f4140a1da5184df.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/879e627c4af1afcd6f4140a1da5184df.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/879e627c4af1afcd6f4140a1da5184df.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/879e627c4af1afcd6f4140a1da5184df.svg#MSung PRC Light")format("svg");
}

@font-face {
    font-family: "Garamond";
    src: url("https://db.onlinewebfonts.com/t/2bf40ab72ea4897a3fd9b6e48b233a19.eot");
    src: url("https://db.onlinewebfonts.com/t/2bf40ab72ea4897a3fd9b6e48b233a19.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/2bf40ab72ea4897a3fd9b6e48b233a19.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/2bf40ab72ea4897a3fd9b6e48b233a19.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/2bf40ab72ea4897a3fd9b6e48b233a19.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/2bf40ab72ea4897a3fd9b6e48b233a19.svg#Garamond")format("svg");
}

@font-face {
    font-family: 'EB Garamond';
    src: url('fonts/EBGaramond-Regular.woff2') format('woff2'),
         url('fonts/EBGaramond-Regular.woff') format('woff');
    font-weight: 400; /* Normal weight */
    font-style: normal; /* Normal style */
}

/*VARIABLE LIBRARY*/
:root {
  /*Color Variables*/
  --text-h1: #010869;
  --text-h1-hover: #014e8c;
  /*Magnus Colors*/
  --text-tma-white: #FCFCFC; /*light text*/
  --text-tma-l: #9FCC2E; /*light tone*/
  --text-tma-lm: #79A129; /*light-mid tone*/
  --text-tma-m: #537623; /*mid tone*/
  --text-tma-md: #2D4B1D; /*mid-dark tone*/
  --text-tma-d: #070217; /*dark tone*/
  
  /*Box Shadows*/
  --box-shadow: 2px 2px;
  
  /*Aurora Base Color Tokens */
  --sys-color-custard: #f5f0a1; /*off white equivilant*/
  --sys-color-twilight: #1e2f59; /*black equivilant*/
  --sys-color-cornflower: #276a9a; /*grey equivilant*/
  --sys-color-baltic: #115b90; /*dark mid equivilant*/
  --sys-color-neonice: #42ecf1; /*accent 1*/
  --sys-color-amethyst: #884ca7; /*accent 2*/
  --sys-color-grape: #5c469a; /*accent 3*/
  
  /*Sunset Base Color Tokens*/
  --sys-color-sunset1: #9B292E;
  --sys-color-sunset2: #F57E37;
  --sys-color-sunset3: #F2B83A;
  --sys-color-sunset4: #3D62DE;
  --sys-color-sunset5: #573276;
 /* 
  Central Color Pallet
  --color1: var(--sys-color-custard);
  --color2: var(--sys-color-twilight);
  --color3: var(--sys-color-baltic);
  --color4: var(--sys-color-neonice);
  --color5: var(--sys-color-amethyst);
  
*/
  /* Component Tokens */
  /*--disabled: var(?);*/
  /*--highlighted: var(?);*/
  /*COLOR VARIABLES*/
  
    /*Body Colors - Colors that are used as default in webpage.*/
    --bkg-body-clr: var(--sys-color-twilight);
    --text-body-clr: var(--sys-color-custard);
    --sb-div-clr: var(--sys-color-cornflower);
  
}

/*-- ------------------------------------------------------------------------------------ --*/

/*TESTPAGE STYLE*/

/*-- ------------------------------------------------------------------------------------ --*/

body {
  background-image: url("https://wallpapercave.com/wp/wp10131327.jpg");
  background-color: darkgrey;
  margin: 0;
  margin-top:1%;
  image-rendering: smooth;
  background-repeat: repeat;
  background-attachment: fixed;
  font-family: "Lato", sans-serif;
  min-height: 97vh;/*Makes webpage use 100% of the viewport-height*/
  min-width: 95vw;/*Makes webpage use 100% of the viewport-width*/
  background-color: var(--bkg-body-clr); /*Sets the Base Color of the webpage background*/
  /*color: var(--text-body-clr); /*Base Text Color*/
}


/*CONTENT*/

.content {
  padding: 1px 16px;
  margin-left:345px;
  width: calc(95% - 345px);;
  margin-top: 1%;
  margin-bottom: 15px;
  /*background-color: var(--sys-color-baltic);*/
}
/*
.content p {
  color: var(--sys-color-neonice);
}
*/
/*-- ------------------------------------------------------------------------------------ --*/
/*-- ------------------------------------------------------------------------------------ --*/
/*-- ------------------------------------------------------------------------------------ --*/

/*Header Link Properties*/

/*-- ------------------------------------------------------------------------------------ --*/
#headerLink:hover {
  color: var(--sys-color-neonice);
  text-decoration-color: var(--sys-color-neonice);
  text-decoration-line: none;
}

#headerLink{
  color: var(--sys-color-neonice);
  text-decoration-line: none;
  text-decoration-color: var(--sys-color-neonice);
}
#homelinkhead {
  font-size: 20px;
  text-align: left;
  min-width: 380px;
}
/*-- ------------------------------------------------------------------------------------ --*/
/*-- ------------------------------------------------------------------------------------ --*/
/*-- ------------------------------------------------------------------------------------ --*/

/*SIDEBAR*/

/*-- ------------------------------------------------------------------------------------ --*/
.sidebar {
  text-align: left;
  margin-bottom: 1%;
  margin-right: 1%;
  margin-left: 1%;
  padding: 0;
  
  background-color: var(--sb-div-clr);
  position: fixed;
  height: 100%;
  overflow: auto;
  align-tracks: center;
  box-sizing:border-box;
  width: 320px;
  
  list-style-type: none;
  display: block;
  padding: 4;
  text-decoration: none;
  text-align: center;
  
}


#sidebar ul {
  list-style-type: none;
  width: 100%;
  padding-inline-start: 0;
  text-align: center;

}




#sidebar > ul > li:first-child{
  display: flex;
  justify-content: flex-end;
  
}

#sidebar ul li.active a {
  text-decoration-line: none;
}

#sidebar ul a {
  text-align: center;
  align-content: center;
}

#sidebar li {
  font-size: 16px;
  margin: 5px 0px 5px 0px;
}


#sidebar a:link{
  color: var(--bkg-body-clr);
  opacity: 1;
  text-decoration: none;
}

#sidebar a:visited, a:hover, a:active {
  color: var(--bkg-body-clr);
  opacity: 1;
  text-decoration: none;
}

.sidebar a, #sidebar .sb-dropdown-btn, #sidebar .logo {
  align-items: center;
  text-decoration: none;
  border-radius: .5em;
  padding: .2em;
  text-align: center;
  gap: 1em;
  
}

.sb-dropdown-btn {
  width:100%;
  height: auto;
  text-align: left;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  

  
}
#sidebar svg {
  flex-shrink: 0;
  fill: var(--text-body-clr);
}

#sidebar .sb-dropdown-btn a {
  flex-grow: 1;
}

#sidebar .sub-menu {
  display: none;
  transition: 500ms ease-in-out;
}

#sidebar .sub-menu.show {
  display: block;
}

@media screen and (max-width: 890px) {
  #sidebar {
    justify-content: center;
    margin: 1%;
    width: auto;
    height: auto;
    position: relative;
    overflow-y: none;
  }
  .sidebar {
    display: grid; /*This makes the Sidebar into a grid and the justify-content:center allows it to be centered.*/
    justify-content: center;
    overflow-y: hidden;
  }
  #sidebar ul {
    width: auto;
  }
  .sidebar a {
    text-align: center;
    float: none;
  }
  .content {margin: 0; width: 99vw;}
  
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}


/*-- ------------------------------------------------------------------------------------ --*/
/*-- ------------------------------------------------------------------------------------ --*/
/*-- ------------------------------------------------------------------------------------ --*/
/*-- ------------------------------------------------------------------------------------ --*/
/*-- ------------------------------------------------------------------------------------ --*/


/*-- ------------------------------------------------------------------------------------ --*/

/*-- MAGNUS ARCHIVE FORMATTING --*/

/*-- ------------------------------------------------------------------------------------ --*/
.TMACENTER {
  margin-left: 5%;
  margin-right: 5%;
}
.tmaDiv {
  /*border-image: url("/TTRPG/CS/img/page.svg") 26 30 26 38 fill / 26px 30px 26px 37px;*/
  background-color: #F6F5F1;
  border-image: url("/TTRPG/CS/img/page.svg");
  border-image-width: 126px 30px 226px 38px;
  border-image-slice: 126 30 226 38 fill;
  border-image-repeat: round;
  padding-left: 34px;
  padding-right: 24px;
  width: 90%;
  color: #010869;
  color: var(--text-tma-m);
  font-size: 22px;
  
}

.tma_sec1 p {
  margin: 4%;
  text-align: left;
}

.tma_interface p {
  text-align: center;
}

.tmaDiv img {
  align-items: center;
}

.tmaDiv em {
  align-items: center;
}

.tmaDiv h1 {
  text-align: center;
  position: relative;
  top: -17px;
  color:#FCFCFC;
  font-size-adjust: 100%;
  font-family: "MSung";
  margin-top: 5%;
  margin-bottom:-5px;
  padding-top: 33px;
  padding-bottom: 40px;
  background:url('/TTRPG/CS/img/tma_title_box.png') center center no-repeat;
  background-size: clamp(300px,95%,800px) 100%;
  
}
.tmaDiv h2 {
  text-align: center;
  color: var(--text-tma-white);
  font-size-adjust: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  background:url('/TTRPG/CS/img/tma_sub_head.png') center center no-repeat;
  background-size: clamp(280px, 65%,600px) 100%;
  font-family: "MSung";
}

.tmaDiv p {
  font-family: "Garamond";
}

.tmaDiv .tmabottom {
  position: relative;
  bottom: 20px;
  
}

.tinynotes {
  text-align: left;
  grid-auto-flow: column;
  font-size: 12px;
  font-family: "Garamond";
  height: 100px;
}



.tmaDiv em {
  font-size: 12px;
  color: var(--text-tma-d);
  font-family: "MSung";
  position: relative;
  top: -50;

}


.tmaDiv emphasis {
  color: var(--text-tma-md);
  text-shadow: 1px 1px 0 #48bcd7;
}

/*------------------*/

#default.mainBody {
  background-color: darkgrey;
  color: #010869;
  font-family: "dragon";
  font-size: 16px;
  
  height: 100%;
  margin: 0;
  image-rendering: smooth;
  background-attachment: fixed;
  display: flex;
}

.mainDiv {
  border: 32px solid black;
  border-color: 32px solid black round;
  background-color:#c79f8bde;
  margin:auto;
  width:
     clamp(300px,50%,820px);
  align-items: center;
  font-family: "dragon";
}


h1.mainDiv {
text-align: center;
color:#00075a;
text-shadow: 1px 1px 0 #48bcd7;
}

em.mainDiv{
color:#d82238;
}

h2.mainDiv {
text-align: center;
color:#003000;
text-shadow: 1px 1px 0 #48bcd7;
}

h1 {
text-align: center;
color:#00075a;
text-shadow: 1px 1px 0 #48bcd7;
}

emphasis.mainDiv {
color:#000336;
text-shadow: 1px 1px 0 #48bcd7;
}

#centereddiv {
  text-align: center;
  margin:auto;
}

#magsourcetext {
  font-size: 10px bold;
  font-family: "EB Garamond";
  color: var(--text-tma-md);
  background-color: var(--text-tma-l);
}


#magendimg {
  display: block;
  margin:auto;
  width:
     clamp(322px,70%,820px);
}
.wrap-img-right-350 {
    float: right;
    margin-right: 15px; /* Adds space between the image and the text */
    width: 350px; /* Optional: adjust image width */
}

.wrap-img-left-300 {
    float: left;
    margin-left: -70px;
    margin-right: 0px;
    padding-left:-30px;
    padding-right:-15px;
    padding-top:-4px;
    padding-bottom: -4px;
    margin-right: -15px; /* Adds space between the image and the text */
    width: 300px; /* Optional: adjust image width */
}

#magbannerimg {
  display:block;
  width:
     clamp(300px,100%,820px);
  margin: auto;
  align-items: center;
}

@media screen and (max-width: 890px) {
  .TMACENTER {margin: 0; width: 95%; text-align: center}
  .tmaDiv {  margin: 0; width: 95%;}
  #Magnus.content {
    padding-left: 10px;
    width:clamp(100px,calc(95vw-32px),890px);
  }
}
@media screen and (max-width: 400px) {
}
/*
*{
  background-color: var(--color3);
  background-size: cover;
}
body {
 
  color: var(--color3);
  font-style: normal;
  height: 50vh;
  width: 50vw;
  background-size:cover;
  background-color: var(--color3);
  border: 32px solid var(--color2);
  border-radius: 25px;
  text-shadow: var(--box-shadow) 0 var(--color4);
}

h1 {
  color: var(--color1);
  background-color: var(--color5);
  background-size:cover;
}
*/