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


:root{
   --white: #FEFEFE;
   --lgrey: #BFBFBF;
   --dgrey: #808080;
   --black: #010101;
   --lred: #FE0105;
   --dred: #800000;
   --lyellow: #FEFE01;
   --dyellow: #7F8000;
   --lgreen: #03FF00;
   --dgreen: #008002;
   --lcyan: #00FFFA;
   --dcyan: #008077;
   --lblue: #0001FF;
   --dblue: #000080;
   --lmagenta: #FE01FF;
   --dmagenta: #7E0080;
   --lcream: #FFFC7F;
   --dcream: #807F40;
   --lslime: #00FF7D;
   --dslime: #003C40;
   --lsky: #7FFBFF;
   --dsky: #0085FF;
   --lviolet: #7F84FF;
   --dviolet: #003E80;
   --pink: #FF0182;
   --purple: #8100FF;
   --orange: #FF8940;
   --brown: #804400;
}

@font-face{
   font-family: 'ComicSans';
   src: url(fonts/Comic\ Sans\ MS.ttf);
}

/* width */
::-webkit-scrollbar {   
   width: 10px;
}
 
/* Track */
::-webkit-scrollbar-track {
   border-radius: 3px;
   background: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: var(--white); 
   border-radius: 5px;
   box-shadow: inset 0 0 5px var(--lgrey); 
}


body{
   background-color: var(--lcream);
   background-attachment: fixed;
   font-family: 'ComicSans';
   color: var(--dviolet);
   text-align: center;
   font-size: 14px;
   margin: 10px 50px;
}

p{
   font-size: 14px;
}

mark{
   background-color: var(--lyellow);
   color: var(--dviolet);
}

a{
   color: var(--lviolet);
   text-decoration: underline;
   text-decoration-style: dotted;
}
a:hover{
   color: var(--lblue);
   font-style: italic;
}

h1{
   font-size: 30px;
   font-weight: bold;
   color: var(--white);
   text-shadow: 2px 2px var(--lviolet), 0 0 15px var(--lyellow), 0 0 2px var(--lviolet);
}

h2{
   font-size: 22px;
   font-weight: bold;
   text-shadow: 2px 2px var(--dviolet);
}
h3{
   font-size: 16px;
   font-weight: bold;
}

ul{
   list-style-type: disc;
   padding: auto;
   margin: auto;
}

table, td {
   border: 1px solid;
   background-color: var(--lyellow);
   text-shadow: 1px 1px var(--lcyan);
   padding: 5px 0;
}

th {
   border: 1px solid;
   background-color: var(--lcyan);
   text-shadow: 1px 1px var(--white);
   padding: 5px 0;
}

table {
   width: 100%;
   border-collapse: collapse;
}


.all{
   width: fit-content;
   margin: 0 auto;
   display: flex;
   height: inherit;
}

.wrapper{
   display: flex;
   flex-direction: column;
   width: 700px; 
   height: 650px;
   background-color: var(--white);
   box-shadow: 5px 5px var(--dcyan);
   border: 5px solid var(--lyellow);
   margin-right: 150px;
   order: 2;
}
.journalwrap{
   display: flex;
   flex-direction: column;
   width: 700px; 
   height: 600px;
   background-color: var(--lcream);
   box-shadow: 5px 5px var(--dviolet);
   border: 5px solid var(--lviolet);
   order: 2;
}
.jnav{
   width: 700px; 
   display: flex;
   flex-direction: row;
   margin: 5px;
   order: 1;
}
.jbut{
   background-color: var(--lviolet);
   width: 50%;
   height: 20px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 0 4px;
   padding: 10px 2px;
   color: var(--dviolet);
   box-shadow: 3px 3px var(--dviolet), inset 3px 3px var(--lcream);
}
.jbut:hover{
   background-color: var(--dsky);
   color: var(--white);
   font-style: normal;
   cursor: pointer;
}
.journaltags{
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
}
.tabs{
   overflow: hidden;
   box-sizing: border-box;
}

button{
   height: 25px;
   width: auto;
   background-color: var(--lviolet);
   color: var(--dviolet);
   box-shadow: 3px 3px var(--dviolet), inset 3px 3px var(--white);
   font-size: 14px;
   padding: 5px 10px;
   margin: 0  5px;
   border: none;
   font-family: 'ComicSans';
}
button:hover{
   background-color: var(--dsky);
   color: var(--white);
   font-style: normal;
   cursor: pointer;
}
.row{
   display: flex;
   flex-direction: row;
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--lblue);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  margin-bottom: 3px;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.userbox{
   font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', 'Arial', sans-serif;
   float:left;
   border-color: var(--dviolet);
   margin:1px;
   width:238px;
}
.userid{
   border:0;
   width:45px;
   height:45px;
   background: var(--dviolet);
   text-align:center;
   font-size:14pt;
   font-weight:bold;
   color:#ffffe0;
   padding:0 1px 0 0;
   line-height:1.25em;
   vertical-align:middle;
   text-shadow: none;
}
.userid img{
   height: 40px;
   width: 40px;
   margin: auto;
   
   vertical-align:middle;
}
.usercontent{
   background: var(--white);
   border:0;
   text-align:left;
   font-size:8pt;
   padding:0 4px 0 4px;
   height:45px;
   line-height:1.1;
   color:black;
   vertical-align:middle;
   text-shadow: none;
}
.usercontent a{
   color: #36c;
   font-style: normal;
   text-decoration-line: none;
}
.usercontent a:hover{
   text-decoration-line: underline;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}



@media screen and (max-width: 500px) {
   .wrapper{
      width: auto;
      height: auto;
      margin-top: auto;
   }
   .nav{
      justify-content: center;
      width: fit-content;
      display: flex;
      flex-direction: row;
      margin: 0 10px;
      margin-bottom: 10px;
      float: none;
   }
   .navbut{
      height: 40px;
   }
   .all{
      flex-direction: column;
   }
   .jentry{
      height: auto;
   }
}