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

html,
body {
  height: 100vh;
  margin: 0;
  font-size: 1rem;
}

* {
  box-sizing: border-box;
}

p {
  font-family: MS UI Gothic, "MS-UI-Gothic", monospace, 'system-ui';
  font-size: 1rem;
}

h1,
h2,
h3,
h4{
  color: #ffffff;
  font-weight: 100;
}

#textbox h1 {
  font-size: 1.25rem;
  font-family: "Bitmap-Times";
}


ul {
  font-size: 0.90rem;
  list-style-type: square;
  padding-left: 15px;
  margin: 0;
}
ol {
  color:#0000FF;
}
@font-face {
  font-family: "MS-UI-Gothic";
  src: url(fonts/MSGOTHIC.TTF);
}
@font-face {
  font-family: "Bitmap-Times";
  src: url(fonts/TimesNewRomanBitmap.ttf);
}

body {
  /* background-color:#697a94; */
  color: black;
  font-family: MS UI Gothic, "MS-UI-Gothic", 'system-ui';
  /* background-position: center; */
  /* background-size:cover;
  background-image: url('https://file.garden/Z4322jt67TpUFPS3/forest.jpg'); */
  background-image: linear-gradient(rgba(255, 255, 255, 0.4)), url('https://file.garden/Z4322jt67TpUFPS3/purplespace-grayscaled-bg.png');
}
#header {
  max-height: 100px;
  background-image: url('https://file.garden/Z4322jt67TpUFPS3/IMG_5645.jpg');
  background-size:100%;
  background-position: center;
  padding: 10px;
  border-radius: 5px;
  border: 1.5px solid #6b7d8b;
}
#headerarea{
  width:100%;
  height:80px;
  border: 1.5px solid #6b7d8b;
  border-radius: 5px;
  background-size: 100%;
}

#banner {
  height: 100px;
  width: 100%;
  margin: 20px auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  background-image: linear-gradient(to bottom, #ffffff 0%, #a8bbfd 100%);
  box-shadow: 0px 2px 2px #a0a6bc inset, 0px -2px 2px #9aa3c4 inset;
  border-radius: 5px;
  padding-left: 10px;
  border: 1px solid #5e809c;
}

#banner h1 {
  color: rgb(224, 224, 224);
  font-size: 2.5rem;
  text-shadow: 0px 1px 1px rgb(61, 61, 61);
  text-align: right;
}

#text {
  text-align: center;
  margin: 5px;
}

#nav {
  width: 150px;
  /* background-color: #00000087;
  opacity:0.95; */
  /* background-image: linear-gradient(to bottom, #ffffff 0%, #415c6f 75%); */
  border-radius: 5px;
  padding:15px;
}

.tabnav {
  background-color: #4f4e4ea1;
  border: 1px solid black;
  padding:5px;
  padding-top: 0;
}

#stats {
  margin: 15px;
  margin-left: -30px;
  text-align: center;
}
#linkme {
  margin: 15px;
  margin-left: -30px;
  text-align: center;
  padding:0px;
  font-family: Bitmap-Times; 
  color:white; 
}
#tabs {
  font-family: "Bitmap-Times";
  height: 20px;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #e6e8fc 0%, rgb(0, 0, 0) 100%);
  background-image: linear-gradient(to bottom, #c7c7c7 0%, white 100%);
  border-bottom: 0.05px solid rgb(112, 112, 112);
  box-shadow: 0px 1px 2px rgb(190, 190, 190) inset, 0px -1px 2px rgb(231, 231, 231) inset;
  text-align: center;
}

#nav h2 {
  color: black;
  font-size: 1.2rem;
}

.headerline {
  background-image: linear-gradient(to bottom, #F7F7F7 50%, #F3F3F3 51%);
  height:20px;
}

.container {
  width: 1100px;
  margin: 10px auto;
  /* padding: 15px; */
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.575)), url('https://file.garden/Z4322jt67TpUFPS3/ss209.gif');  */
}

.container2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin:15px;
  padding: 15px;
  border: 10px solid rgba(10, 10, 10, 0.3);
  outline: 1.5px solid #0000009c;
  background-image: linear-gradient(rgba(0, 0, 0, 0.575)), url('https://file.garden/Z4322jt67TpUFPS3/ss209.gif'); 
}

#flex {
  display: flex;
  flex-grow: 1;
  /* border: 1px solid gray;
  background-image: url("divback.png");
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.1); */
}


#textbox {
  background-image: linear-gradient(to bottom, rgba(200, 200, 200, 0.5) 0%, #989898ad 75%);
  border: 1.5px solid #000000;
  /* box-shadow: 0px 5px 5px #000000a5 inset, 0px -5px 5px #555a66 inset, 0px 5px 5px #3d3d3d88; */
  width: 100%;
  height:fit-content;
  padding-top:10px;
}

.window {
  width: 300px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(53, 53, 53) 0%, #555555 75%);
  border: 0.5px solid #000000;
  border-top:none;
  /* box-shadow: 0px -10px 5px #e4ecff inset, 0px 5px 5px #c0d3ff88; */
  padding: 10px;
  margin-left:10px;
  color: white;
}

.tabcontent {
  display: none;
  max-height: 600px;
  overflow-y:auto;
}
.tabbutton {
  margin-left: 10px;
  font-size: 0;
  border-left: 0.5px solid #000000;
  /* #6b7d8b */
}
.tabbutton button {
  font-size: 1rem;
  height: 25px;
  width: 75px;
  background-image: linear-gradient(to bottom, rgb(53, 53, 53)0%, #cecece 100%);
  border: 0.5px solid #000000;
  border-left:none;
  outline: none;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgb(53, 53, 53) inset;
  font-family:MS UI Gothic, "MS-UI-Gothic", 'system-ui';
  overflow-x:hidden;
}
.tabbutton button.active {
  border-bottom: none;
  background-image: linear-gradient(to bottom, #cecece 0%, rgb(53, 53, 53) 100%);
}

#frame {
  height: 250px;
  width: 215px;
  background-color: #26292c;
  border: 1px dotted #bfc8cf;
  display: flex;
  flex-flow: column;
  height: 100%;
}

#framebottom {
  background-image: linear-gradient(to bottom, #000000 0%, rgb(69, 69, 83) 100%);
  border-top: 1px solid #bfc8cf;
  box-shadow: 0px 1px 2px white inset, 0px -1px 2px rgb(231, 231, 231) inset;
  width: auto;
}

.tilt {
  transform: translate(-20px,0);
}

#bio {
  /* transform: translate(-20px,0); */
  height: auto;
  width:100%;
  margin: 10px;
  margin-left:0;
  margin-bottom: 0;
  border-radius: 3px;
  /* background-image: linear-gradient(to bottom, #f7f9ff 0%, #d7e0ff 100%); */
  /* background-image: linear-gradient(to bottom, #687E96 0%, #212830 100%); */
  background-color: rgba(0, 0, 0, 0.100);
  box-shadow: 0px 2px 2px #ffffff85 inset, 0px -2px 2px #43505f inset;
  padding:10px;
  padding-left:0;
  color:white;
  opacity:0.8;
}
#bio p{
  font-size:1rem;
}

.flex2 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.flex3 {
  display:flex;
  flex-direction: column;
}
  
.window2 {
  width: 400px;
  height: 250px;
  background-image: linear-gradient(to bottom, rgba(138, 138, 138, 0.6) 0%, #7676769a 75%);
  /* border: 0.5px dotted #6b7d8b; */
  border: 0.5px solid #000000;
  overflow-y: auto;
  overflow-x:hidden;
  padding: 10px;
  margin:10px;
}
/* style="background-image: linear-gradient(to bottom, rgb(255, 255, 255) 0%, #e4f2fa 100%); */
.log {
  width: 100%;
  padding: 10px;
  margin: 10px;
  background-color: transparent;  
  height:500px; 
  overflow-y:scroll;
}
.log img video {
  max-width: 100%;
}


.window2 div{
  margin: -10px;
}
/* Gray button */
/* background-image: linear-gradient(to bottom, #ffffffc7 0%, #c7c7c7c7 50%, #CCCCCCc7 100%); */
/* box-shadow: 0px 2px 2px #bebebe inset, 0px -2px 2px #bebebe inset, 0px 2px 2px #888888; */

.button {
  font-family: MS UI Gothic, "MS-UI-Gothic", 'system-ui';
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #c7c7c7 50%, #CCCCCC 100%); 
  box-shadow: 0px 2px 2px #c6d0db inset, 0px -2px 2px #43505f inset;
  text-align: left;
  width: 120px;
  height: 20px;
  border: 0px;
  border-radius: 3px;
  color: white;
  text-shadow: 0px 0px 5px rgb(61, 61, 61);
  cursor: pointer;
  opacity: 0.8;
}

.button:hover {
  background-image: linear-gradient(to bottom, #687E96 0%, #404e5f 50%);
}

.button:active {
  background-image: linear-gradient(to bottom, #747474 0%, #c7c7c7 50%, #CCCCCC 100%); 
  box-shadow: 0px 2px 2px #7c7c7c inset, 0px -2px 2px #7c7c7c inset, 0px 2px 2px #888888;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

.entry {
  width: 100%;
  background-image: linear-gradient(to bottom, #fefefe, #dcdcdc);
  border: 1px solid #a0a0a0;
  border-radius: 3px;
  box-shadow: inset 0 1px 0px #ffffff, inset 0 -1px 0px #c4c4c4, 0 1px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  height: 40px;
  margin: 10px auto;
  padding: 0 10px;
  font-family: 'Segoe UI', system-ui;
  font-size: 0.9rem;
  color: #000;
  text-align: left;
  transition: all 0.1s ease-in-out;
}

.entry:hover {
  background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);
  box-shadow: inset 0 1px 0px #ffffff, inset 0 -1px 0px #b4b4b4, 0 2px 2px rgba(0, 0, 0, 0.2);
}

.entry:active {
  background-image: linear-gradient(to bottom, #cccccc, #bbbbbb);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* .rolling {
  font-size: 1em;
  overflow: hidden;
  width: 100%;
  height: 40px;
  background-color: #ffffff;
  text-align: center;
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #c7c7c7 50%, #CCCCCC 100%);
  border-radius: 5px;
  box-shadow: 0px 3px 3px #bebebe inset, 0px -3px 3px #bebebe inset, 1px 1px 10px #00000050;
} */

.footer p {
  display: inline-block;
  /* animation: scrollright 12s linear infinite; */
  color: white;
}

.footer {
  background-image: linear-gradient(to bottom, #4b6482 0%, #4B6482 48%, #3D4E63 52%, #222F3C 100%);
  overflow: hidden;
  margin: 20px auto;
  opacity: 0.8;
  box-shadow: 0px 2px 2px #9caec4b6 inset, 0px -2px 2px #9caec4b6 inset, 0px 2px 15px #272727b4;
  height: 50px;
  border-radius: 5px;
}

.rollingdown {
  width: 200px;
  height: 750px;  
  overflow: hidden;
  overflow-x: hidden;
  background-image: linear-gradient(to bottom, rgb(255, 255, 255) 0%, #c0d1e3 75%);
  box-shadow: 0px 5px 5px #e4ecff inset, 0px -5px 5px #e4ecff inset, 0px 5px 5px #c0d3ff88;
  border: 1.5px solid #6b7d8b;
  opacity: 0.9;
}

.rollingdown img {
  display: inline-block;
  animation: scrolldown 6s linear infinite;
  width: max-content;
}

.recent p {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0000FF;
  animation: color 0.5s step-start infinite;
  font-family: Bitmap-Times;
}

@keyframes color {
  0% {
    color: #ffa600;
  }

  50% {
    color: #860404;
  }

  100% {
    color: #ffb730;
  }
}

@keyframes scrollright {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes scrolldown {
  0% {
    transform: translateY(-650%);
  }

  100% {
    transform: translateY(650%);
  }
}
.mobile {
  display:none;
}
#mobilenav {
  display:none;
  width:auto;
  text-align: center;
}
@media only screen and (max-width: 800px) {
  .container {
    margin: 10px auto;
    width: auto;
  }
  .footer {
    display:none;
  }
  #nav {
    display:none;
  }
  #mobilenav {
    display:inline-block;
  }
  .flex2 {
    flex-wrap: wrap;
  }
  .button {
    width: auto;
  }
  .rollingdown {
    display:none;
  }
  #textbox {
    width:auto;
  }
  .mobile {
    width: auto;
    height: fit-content;
    margin: 10px;
    background-color: white;
    border: 0.5px solid #6b7d8b;
    overflow-y: auto;
    overflow-x:hidden;
    padding: 10px;
    display:inline-block;
  }
  #frame {
    margin:0;
  }
  .window2 {
    width:auto;
  }
  #tabs {
    width:auto;
  }
}


#statuscafe {
  padding: 5px;
  border: 1.5px solid #8d9aa5;
  box-shadow: 0px 2px 2px #818181;
}

#statuscafe-username {
  margin-bottom: .5em;
  font-size: 0.8em;
}

#statuscafe-content {
  /* margin: 0 1em 0.5em 1em; */
  margin:0;
  font-size: 0.8em;
}

img {
  max-width: 100%;
}

.spantxt {
  cursor: pointer;
}

.spantxt:hover {
  text-decoration: underline ;
  font-weight: bold;
}

/* .piclog {
  border: 3px solid #19196f;
  border-top: 20px solid #19196f;
} */
#tabpiclog {
  /* margin-top: -20px; */
  color:white;
  font-family: "Bitmap-Times", monospace, "MS-UI-Gothic";
}

/* Helvetica  */
/* #hue {
  transition: .7s ease;
  }
  #hue:hover {
  filter: hue-rotate(100deg);
  } */

  ::-webkit-scrollbar {
    width: 10px;
    height: 16px;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
    width: 10px;
    height: 16px;
    background: silver;
    box-shadow: inset 1px 1px 1px #dfdfdf, inset -1px -1px 1px gray;
    border: 1px solid;
    border-color: silver #000 #000 silver;
}
::-webkit-scrollbar-track {
    background-color: #e1dfe0;
}
.image-filter {
  position: relative;
}

.image-filter::before,
.image-filter::after {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.image-filter--daydream img {
  filter: contrast(0.9) brightness(1.3) saturate(0.6) blur(1px);
}
 .image-filter--daydream::after {
  background: #aeaeae; /* change color here */
  opacity: 0.3;
  mix-blend-mode: luminosity;
}