/*Overall*/

:root {
   color-scheme: light dark;

   --color_green_light: #88a69c;
   --color_green: #4f7165;
   --color_green_dark: #2b3a36;
   --color_cinnabar: #ff6039;
   --color_Black_10: #e6e6e6;
   --color_Black_30: #b3b3b3;
   --color_Black_50: #808080;
   --color_Black_70: #4d4d4d;
   --color_Black_90: #1a1a1a;

   --color_misskeyio: #91c948;

   font-family: "Kode Mono", monospace;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;

   line-height: 180%;

   user-select: none
}

@media (prefers-color-scheme: light) {
   body { 
      color: var(--color_Black_90);
      background-color: var(--color_Black_10); 
   }
   .color_green { color: var(--color_green); }
   .color_gray { color: var(--color_Black_50); }
}

@media (prefers-color-scheme: dark) {
   body { 
      color: var(--color_Black_10);
      background-color: var(--color_Black_90); 
   }
   .color_green { color: var(--color_green_light); }
   .color_gray { color: var(--color_Black_50); }
}

/*Container*/
.Container{
   height: 100svh;
   align-content: center;
}

/**mainContainer**/
.mainContainer{
   display: flex;
   gap: 48px;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   margin: 0px 25px 0px 25px;

   @media screen and (orientation: portrait) {
      flex-direction:column;
      text-align: center;
   }
}

.Symbol{ width: 84px; }

/** btn**/

[class^="btn-"] { 
   display:inline-block;
   width: 170px;
   margin: 2px 5px;
   text-align: left;
   font-size: 14px;
   color:var(--color_Black_50);
}

.btn-index:before { content: "> What's Takeno?"; }
.btn-io:before { content: "> What's Happening?"; }

.btn-index:hover::before {
   content: "→ index.takeno.page";
   text-decoration:underline;
   color:var(--color_green);
}

.btn-io:hover::before {
   content: "→ misskey.io";
   text-decoration:underline;
   color:var(--color_misskeyio);
}

/* coffee animation */
.coffee-container {
    position: relative; 
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 0.5em;
    margin-left: 1px;
}

.coffee-container .coffee-cup { margin-right: 3px; }
.coffee-container .coffee-text { margin-left: 3px; }

.coffee-container .steam {
    position: absolute;
    width: 3px;
    height: 10px;
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 100%;
    opacity: 0;
    filter: blur(2px);
}

.coffee-container .steam-1 {
    top: -2px;
    left: 6px;
    animation: steam-animation-1 6s linear infinite;
}

.coffee-container .steam-2 {
    top: -6px;
    left: 11px;
    animation: steam-animation-2 6s linear infinite;
}

@keyframes steam-animation-1 {
    0% { opacity: 0; transform: translateY(0); }
    25% { opacity: 0.7; transform: translateY(-5px); }
    100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes steam-animation-2 {
    0% { opacity: 0; transform: translateY(0); }
    25% { opacity: 1; transform: translateY(-5px); }
    100% { opacity: 0; transform: translateY(-20px); }
}