html {
  scroll-behavior: smooth;
}

body {
    margin: 0;
    background-image: url("/scrapbook/linux/img/2-color.png");
    background-color: #FDFDE4;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    background-repeat: no-repeat;
}

ghost {
display: block;
z-index: 1000;
pointer-events: none;
user-select: none;
width: 100vw;
top: 0;
left: 0;
height: 100vh;
position: fixed;
    overflow-x: hidden;
  background-image: 
    linear-gradient(90deg, 
      rgba(73, 73, 73, 0.5) 0, 
      rgba(73, 73, 73, 0.5) 2%, 
      transparent 2%
    ), 
    linear-gradient(180deg, 
      #fffdfa 50%, 
      transparent 50%
    ), 
    linear-gradient(90deg, 
      transparent 50%, 
      rgba(73, 73, 73, 0.5) 50%, 
      rgba(73, 73, 73, 0.5) 52%, 
      transparent 52%
    ), 
    linear-gradient(180deg, 
      #fffdfa 70%, 
      transparent 70%
    ), 
    linear-gradient(90deg, 
      transparent 10%,
      rgba(73, 73, 73, 0.4) 10%, 
      rgba(73, 73, 73, 0.4) 12%, 
      transparent 12%, 
      
      transparent 20%,
      rgba(73, 73, 73, 0.4) 20%, 
      rgba(73, 73, 73, 0.4) 22%, 
      transparent 22%, 
      
      transparent 30%, 
      rgba(73, 73, 73, 0.4) 30%,
      rgba(73, 73, 73, 0.4) 32%, 
      transparent 32%, 
      
      transparent 40%, 
      rgba(73, 73, 73, 0.4) 40%, 
      rgba(73, 73, 73, 0.4) 42%, 
      transparent 42%, 
      
      transparent 60%, 
      rgba(73, 73, 73, 0.4) 60%, 
      rgba(73, 73, 73, 0.4) 62%, 
      transparent 62%, 
      
      transparent 70%, 
      rgba(73, 73, 73, 0.4) 70%, 
      rgba(73, 73, 73, 0.4) 72%, 
      transparent 72%, 
      
      transparent 80%, 
      rgba(73, 73, 73, 0.4) 80%, 
      rgba(73, 73, 73, 0.4) 82%, 
      transparent 82%, 
      
      transparent 90%, 
      rgba(73, 73, 73, 0.4) 90%, 
      rgba(73, 73, 73, 0.4) 92%, 
      transparent 92%
    );
  background-size: 50px 20px;
  background-repeat: repeat-x;
  white-space:nowrap;
  font-size:0;
  margin:0;
  padding:0;
}

label {
  font-size:8px;
  padding-top:2px;
  display:inline-block;
  width:100px;
  text-indent:3px;
  color: rgba(73, 73, 73, 1);
  font-family: 'tiny';
}

::selection {
    background-color: #ff5b0f !important;
    color: #fff !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #1d1d1d #dfdfdf;
	cursor: url("/scrapbook/linux/img/cur.cur"), auto;
}

* img {
    user-select:none;
}

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #dfdfdf;
}

*::-webkit-scrollbar-thumb {
    background-color: #1d1d1d;
}

a {
	cursor: url('/scrapbook/linux/img/link.cur'), auto;
}

a * {
	cursor: url('/scrapbook/linux/img/link.cur'), auto;
}

deity {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

knight {
    width: 1100px;
    margin-top: 4%;
    height: 700px;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
    'title'
    'nav'
    'queen';
    grid-template-rows: 1fr;
}

.flwr1 {
    position: fixed;
    left: 100px;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(2px 2px 0 #FCFCE3);
}

.flwr2 {
    position: fixed;
    right: -230px;
    bottom: -300px;
    z-index: -1;
    pointer-events: none;
    filter: drop-shadow(8px 2px 0 #FCFCE3);
}

queen {
    display: grid;
    height: 100%;
    grid-template-areas:
    'title sidebar'
    'main sidebar'
    'tab .';
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: 1em;
    row-gap: 0;
}

tab {
    grid-area: tab;
    filter: drop-shadow(1px 1px 0 #adad98);
    pre {
        margin-left: -44px;
        font-family: 'dep';
        font-size: 11px;
    }
    .inner {
        overflow: hidden;
        width: 303px;
        height: 144px;
        background-image: url('/scrapbook/linux/img/tab.png');
        margin: auto 40px auto auto;
        display: flex;
        flex-direction: row;
        font-family: 'dep';
        font-size: 11px;
        padding: 6px 10px;
        color: #5a5a46;
        img {
            margin: 0 10px 0 auto;
            max-height: 94%;
            mix-blend-mode: multiply;
        }
    }
}

.title {
    grid-area: title;
    background-color: #88938D;
    height: 34px;
    border: 1px solid #4A584A;
    border-bottom-width: 0px;
    box-shadow: 3px 3px 0 #9ca69cbd;
    color: #DAE4DA;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;
    font-size: 1rem;
    justify-content: center;
    display: flex;
    align-items: center;
    letter-spacing: 2px;
        .title-icon {
            margin-top: -2px;
            margin-right: 4px;
            image-rendering: pixelated;
            }
}

sidebar {
    grid-area: sidebar;
    width: 230px;
    background-color: #00000094;
    backdrop-filter: blur(18px);
    border: 1px solid #4A584A;
    color: #fff;
    font-family: 'dep';
    font-weight: 100;
    padding: 3px;
    max-height: 556px;
    overflow: auto;
    z-index: 2;
    font-size: 11px;
    box-shadow: 3px 3px 0 #CFCFB6;
    &:hover {
        box-shadow: 3px 3px 0 #ff5b0f;
    }
}

main {
    grid-area: main;
    max-height: 522px;
    overflow: auto;
    line-height: 1.2rem;
    background-color: #BBC2BB;
    text-shadow: 1px 1px 0 #fcfce3ad, 2px 2px 0 #BBC2BB;
    border-top-width: 0px;
    border: 1px solid #4A584A;
    box-shadow: 3px 3px 0 #C5C5AA;
    font-size: 10pt;
    font-family: Verdana;
    color: #0d0e0e;
    text-align: justify;
    position: relative;
    #home {
      background-image: url('/scrapbook/linux/img/mainbg.png');
      background-size: cover;
      background-position: top;
    }
      .digitalgarden {
        padding: 1em;
        margin: 1em;
        background-color: #D9E3D9;
        border: 1px solid #4A584A;
        position: absolute;
        width: 410px;
        right: 0;
        bottom: 0;
        img {
          filter: drop-shadow(0 0 2px #00000042);
        }
      }
    &:hover {
        z-index: 2;
    }
    a {
      color: #ff6c28;
      text-shadow: 1px 1px 0 #000000b0;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
        text-decoration-style: wavy;
      }
    }
    h2 {
padding: .3em .7em;
  margin: 0 0 0.6em 0;
  font-size: 11pt;
  font-family: Trebuchet MS,Arial;
    font-weight: normal;
  font-weight: bold;
  letter-spacing: .15em;
  background-color: #A8ADA8;
    }
    .tux {
      float: right;
      margin: 8px 0 0 8px;
      max-width: 110px;
      filter: drop-shadow(0 0 2px #00000042)
    }
    .fl {
      float:left;
      margin: 4px 4px 0 0;
      filter: drop-shadow(0 0 2px #00000042)
    }
    .arch {
      float:right;
      margin: 4px 0 0 4px;
      mix-blend-mode: multiply;
      max-width: 200px;
    }
    .btw {
      float:left;
      margin: 4px 8px 0 0;
      max-width: 220px;
    }
    .tree {
      float: left;
      max-width: 300px;
      margin: 4px 24px 0 0;
    }
    .image {
        max-width: 100%;
        display: block;
        margin: auto;
        border: 1px dashed #f1f1f1;
    }
    .qf {
        display: flex;
        flex-direction: row;
    }
    span.noh {
        display: inline-block;
        font-size: 8pt;
        padding: 2px 4px;
        line-height: 20px;
        border: 1px solid #AFB5AF;
    }
    span.h {
        display: inline-block;
        font-size: 8pt;
        padding: 3px 4px;
        line-height: 20px;
        background-color: #AFB5AF;
    }
    code {
        background-color: #AEB4AE;
        padding: 0 .2rem;
        border-radius: 4px;
    }
    pre code {
      display: block;
      background-color: #AEB4AE;
    }
}

.page {
  display: none;
  height: 100%;
  padding: 0.5em;
}

.page.active {
  display: block;
}

.term {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  width: auto;
  td {
    padding: 2px 12px 2px 0;
    margin: 0;
    line-height: 1;
    vertical-align: top;
  }

  td:first-child {
    padding-left: 12px;
  }
}

.help-block div:first-child {
  color: #00ff88;
}

.term td:first-child {
  color: #00ff88;
  white-space: nowrap;
}

.term td:last-child {
  color: #bbbbbb;
}

#cmd {
    display: inline;
    width: 100px;
    padding: 0;
    margin: 0;
    background-color: unset;
    border: none;
    caret-color: transparent; 
    font-family: 'dep';
    font-size: 11px;
    color: #fff
}

.input-wrap {
  position: relative;
  display: inline-block;
}

.input-wrap::after {
  content: "▮";
  position: absolute;
  left: 0;
  color: #fff;
  animation: blink 1s step-end infinite;
  pointer-events: none;
  display: none;
}

.input-wrap.active::after {
  display: inline-block;
}

#cmd:focus {
  outline: none;
  box-shadow: none;
}

#cmd::-moz-focus-inner {
  border: 0;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

nav {
    width:500px;
    position: fixed;
    bottom: 25px;
    left: 352px;
    grid-area: nav;
    .top {
    background-color: #88938d;
    border: 1px solid #4A584A;
    line-height: 17px;
    letter-spacing: 2px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #DAE4DA;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;
    font-size: 1rem;
    min-height: 24px;
    text-align: center;
    span {
        vertical-align: -2px;
    }
    }
    .bottom {
    background-color: #BBC2BB;
    border: 1px solid #546359;
    border-top-width: 0px;
    color: #000;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    min-height: 36px;
    font-family: 'ms';
    font-size: 11px;
    padding: 5px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    .link {
        width: fit-content;
        text-decoration: none;
        padding: 4px 8px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        border: 1px solid transparent;
        color: #3B4A4A;
        &:hover {
        border-color: #546359;
        background-color: #D2D6D2;
        * {
            cursor: url('/scrapbook/linux/img/link.cur'), auto;
        }
        }
        img {
            margin-right: 3px;
        }
    }
    }
}

.shape {
  visibility: visible;
  opacity: 1;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transition: opacity 0.5s cubic-bezier(0.5, 0, 0, 1) 0.4s, transform 0.5s cubic-bezier(0.5, 0, 0, 1) 0.4s;
    grid-area: title;
    position: fixed;
    bottom: 120px;
    left: 230px;
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

.bg-cover {
    height: 100px;
  width: 600px;
   background-image: url("/scrapbook/linux/img/boxbg.png");
   background-repeat: repeat;
    animation: liquid 2s ease-in-out infinite;
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
        text {
            margin-top: 0.2em;
            font-family: 'mesh';
            font-size: 12em;
            color: #6b6b54;
            filter: drop-shadow(7px 7px 0px #c2c2a9);
            letter-spacing: -1.4rem;
            span {
                display: inline-block;
            }
span:nth-child(1) { transform: rotate(-10deg); }
span:nth-child(2) { transform: rotate(5deg); }
span:nth-child(3) { transform: rotate(-6deg); }
span:nth-child(4) { transform: rotate(8deg); }
span:nth-child(5) { transform: rotate(-3deg); }
        }
}

@keyframes liquid {
0% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
   
}
50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  
}
100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    
}
  }

@font-face {
	font-family: 'vera';
	src: url('/fonts/Vera.ttf');
}

@font-face {
	font-family: 'dep';
	src: url('/fonts/DepartureMono-Regular.woff');
}

@font-face {
	font-family: 'ms';
	src: url('/fonts/ms_sans_serif.woff');
}

@font-face {
	font-family: 'tiny';
	src: url('/fonts/tiny5.ttf');
}

@font-face {
	font-family: 'mesh';
	src: url('/fonts/Meshes.ttf');
}

@media (max-width: 1199px) {
    .flwr1 {
        display: none;
    }
}

@media (max-width: 1399px) {
    .flwr2 {
        display: none;
    }
}

@media (max-width: 1099px) {
knight {
    width: 100%;
    margin: 10% 4% 4%; 
    height: unset;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
    'title'
    'nav'
    'queen';
    grid-template-rows: 1fr;
}
queen {
    display: grid;
    height: unset;
    grid-template-areas:
    'sidebar'
    'title'
    'main'
    'tab';
    grid-template-columns: auto;
    grid-template-rows: auto;
    column-gap: unset;
    row-gap: 1em;
    margin-top: 1em;
}
sidebar {
    grid-area: sidebar;
    width: unset;
    max-height: unset;
}
main {
    max-height: unset;
}
tab {
  margin-top: -1em;
}
nav {
  position: relative;
  width: auto;
  min-width: 250px;
  margin: auto;
  left: unset;
  bottom: unset;
}
.shape {
  position: relative;
  bottom: unset;
  left: unset;
  margin: auto auto 3em auto;
}
.bg-cover {
  width: unset;
  text {
    font-size: 9rem;
  }
}
.digitalgarden {
  position: relative !important;
  right: unset !important;
  bottom: unset !important;
  width: unset !important;
}
}

@media (max-width: 470px) {
  nav {
    .bottom {
      flex-direction: column;
    }
  }
}