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


   /* 
   Copyright 2013 The WindSong Project Authors (https://github.com/googlefonts/windsong)

This Font Software is licensed under the SIL Open Font License, Version 1.1 . This license is copied below, and is also available with a FAQ at: https://openfontlicense.org

SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 
*/


/* COMMON VARIABLES */
:root {
--dark: #030a08c7;
--mid: #5d7f65;
--light: #ccdbc7;
--green: #25dda6;
--accent: #BFFF70;

--text: #ecf0e9;

--fontmain: Monospace;
--fontalt: 
}




/* SITE DEFAULTS */


* {
  font-family: var(--fontmain);
  cursor: crosshair;
  list-style-type: none;
}

body {
  background-color: black;
  color: var(--text);
  font-size: 16px;
  margin: 5%;
}

main {
  padding: 0% 35%;
}

p, .summary {
  text-align: justify;
  color: var(--text);
  font-size: 16px;
  margin: 5%;
}
.header {
  height: 10px;
  padding: 0 8px;
  background:  var(--dark);
  color:  var(--green);
  text-align: center;
}

.button {
  background-color:  var(--dark);
  color: var(--text);
  border: 1px solid #ffffff;
  box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.671);
  padding: 7px 12px;
  margin: 12px 0 0 0;
  width: 100%;
  color: white;
  font-size: 16px;
}

.button:hover {
  background-color: var(--green);
  color: var(--dark);
}



/* SPECIAL UTILITY */
.draggable-card {
  position: absolute;
  /* z-index: 99; */
  max-width: 500px;
  background-color: var(--dark);
  border: 1px solid #ffffff;
  box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.671);
  padding: 10px;
}
.draggable-header {
  padding: 10px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.search {
  display: flex;
  width: 90%;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: var(--dark);
}

.scrollingbox {
  overflow-y: auto;
}












.index{
  background: var(--dark);
  height: calc(100% - 30px);
  padding-top: 6px;
  margin-top: 2px;
  font-size: 14px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

          .entry {
            padding: 0% 20%;
            background-color: var(--dark);
            border: 1px solid #ffffff;
            box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.671);
            padding: 10px;
          }

          .time {
            text-align: center;
            vertical-align: middle;
          } 

          .character {
            text-align: left;
          }



/* {
  outline: 1.5px solid red;
}

* * {
  outline: 1.5px solid green;
}

* * * {
  outline: 1.5px solid yellow;
}

* * * * {
outline: aquamarine solid 2px;
}

* * * * * {
outline: solid 2px lightcoral;
}