/* Windows */
.tab-bar::-webkit-scrollbar {
   display: none;
}

.tab-window {
   height: 100vh;
   width: 100vw;
   background-color: var(--background-blurbox-color);
   backdrop-filter: blur(var(--blur-amount));
   overflow: auto;
   display: grid;
   grid-template-columns: 12vw 88vw;
}

/* Tabs bar */
.tab-bar {
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   box-sizing: border-box;
   overflow-y: hidden;
   display: grid;
   grid-template-rows: auto auto auto;
}

.tab {
   box-sizing: border-box;
   position: relative;
   display: inline-block;
   width: 100%;
   text-align: center;
   background-color: var(--theme-color);
   font-family: sans-serif;
   font-size: 1.5rem;
   color: var(--text-color);
   box-shadow: 0 0 .2vh #00000020;
   font-family: "Nunito", sans-serif;
   transition: .2s;
   display: flex;
   justify-content: center;
   align-items: center;
}

.tab::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 1rem;
   background-color: #00CC66;
   transition: .15s;
}

.active-tab {
   opacity: .8;
}

.active-tab::before {
   height: 1.7rem;
   background-color: #ED5D5D;
}

/* Information */
.tab-pages {
   width: 100%;
   overflow: hidden;
   /* white-space: nowrap; */
   scroll-behavior: smooth;
}

.tab-pages .page {
   display: inline-block;
   width: 100%;
   height: 100vh;
   padding: 1rem 0;
   vertical-align: top;
   box-sizing: border-box;
   overflow: auto;
}

.tab-pages h1 {
   font-family: sans-serif;
   text-align: center;
   font-size: 8vh;
}

.tab-pages p {
   padding: 3vh 4vh;
   white-space: normal;
   font-size: 3.5vh;
}

.tab-pages span {
   color: #ccc;
   font-family: sans-serif;
   text-decoration: underline;
}

/* decorations */
.decoration-items {
   max-width: 100vw;
   overflow: auto;
}

.decoration-item *, .decoration-item p {
   padding: 0;
   margin: 0;
}

.decoration-item {
   display: inline-block;
   width: 25rem;
   background-color: var(--theme-color);
   color: var(--text-color);
   border-radius: var(--border-radius);
   text-align: center;
   margin: 2rem 1rem;
   padding: 0 1rem;
}

.decoration-item img {
   height: 12rem;
   margin: 1rem auto;
}

.decoration-item h1 {
   font-family: sans-serif;
   font-size: 3em;
   font-weight: 700;
   margin: .5rem 0;
}

.decoration-item p {
   font-size: 1.3rem;
   margin: .2rem;
}

.decoration-item button {
   margin: 2rem;
   padding: .5rem 1rem;
   border-radius: var(--border-radius);
   transition: .2s;
}

.decoration-item button:hover {
   transform: scale(1.05);
}