/* custom fonts */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

/* Colours */
:root {
  --kaworu-red: #C54343;
  --kaworu-red-light: #f06b6b;
}

/* main content */

/* general */

/* Ensure the body takes full height and has no margins */
body, html {
  font-family: "Archivo", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: italic;
  font-variation-settings:
    "wdth" 112.5;
}

b{
  font-size:inherit;
  font-weight: 800;
  color: var(--kaworu-red-light);
}

.index{
  background-image: url(imgs/darkgrainBG.jpg);
  background-blend-mode: color-burn;
  background-size: 450px;
  background-repeat: repeat;
  color: white;
}

/*index table menu*/
table.clear{
    width: 500px;
		border:0px solid RGB(0,0,0,1);
    margin-left:auto;
    margin-right:auto;
    background-color: RGB(0,0,0,0);
    
}

.image-holder {
	float:right;
	position:relative;
	z-index:1;
	display:block;
}

ul.links {
	list-style:none;
}
ul>li{
  padding: 20px;
}

.invert:hover{
  filter: grayscale();
  /*filter: invert();*/
}

.welcometext{
  font-size: 1em;
  line-height: 1.5;
  font-weight: 500;
  padding:15px;
  border: 5px dashed var(--kaworu-red);
}

.ktext{

  background-color: var(--kaworu-red);
}

.title{
  width: 100%;
}

.links-space{
  width: 650px;
  height: 200px;
}

#dragableWindow {
  width: 650px;


  background-image: url(imgs/darkgrainBG.jpg);
  background-blend-mode: color-burn;
  background-size: 450px;

  border: 5px solid var(--kaworu-red);

  font-size: 1em;
  line-height: 1.5;
  font-weight: 500;

  position: absolute;
  z-index: 9;

}

#dragableWindowheader {

  background-color: var(--kaworu-red);

  margin: none;

  font-size: 1.5em;
  font-weight: 700;

  text-align: center;

  padding: 10px;
  cursor: move;
  z-index: 10;
}

#dragableWindowcontent{
  padding: 10px;
}

/* Changelog 

.changelog-title{
  font-size: 1.8em;
  text-align: right;
  padding-bottom: 0.4em;
  margin-bottom: 0.4em;
  border-bottom: 0.1em solid var(--kaworu-red-light) !important;
}

.changelog-content{

  border-radius: 0.8em;
 
  padding: 1em;
}

*/

/*Media*/

@media screen and (max-width: 768px){
  .table.clear {
    width: 768px;
    table-layout: auto;
  }
}