:root {
    --gap: 0.6vw;
    --border_1: gray 2px solid;
    --shadow: 0.5vw;
}
* {
    box-sizing: border-box;
}
@font-face {
    font-family: "rosetta";
    src: url(assets/font/rosetta.woff);
}
body {
    background: url("assets/windowsvista.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scrollbar-width: none;
}
label > img {
    display: inline-block;
    height: 100%;
}
.text_1, .accounts label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    font-size: 16px;
    text-shadow: rgba(0, 0, 0, 0.75) 2px 2px 5px;
}
.spacer {
    min-height: var(--gap);
    height: var(--gap);
}
.spacer.top {
    min-height: 1vh;
}
i {
    color: gray;
}
.text_1 > p {
    margin-block: 2px;
}
.text_1 > h1 {
    font-size: 24px;
    font-weight: normal;
    margin-block-end: 4px;
}

#all {
    margin: auto;
    width: 100%;
    max-width: 900px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#content {
    height: 100%;
}
.window {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--gap);
    background-image: linear-gradient(
        to right, 
        rgba(240, 255, 255, 0.67),
        rgba(122, 168, 204, 0.5),
        rgba(240, 255, 255, 0.33)
    );
    backdrop-filter: blur(5px);
    border-radius: 10px;
    border: var(--border_1);
    filter: drop-shadow(var(--shadow) var(--shadow) var(--shadow) rgba(0, 0, 0, 0.5));
    padding: calc(var(--gap) * 0.5);
    padding-top: 0;
}
.window .decoratives {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.window .decoratives > .buttons {
    display: grid;
    width: 125px;
    height: 25px;
    margin-left: auto;
    grid-template-columns: 1fr 1fr 2fr;
}
.window .decoratives > .buttons button {
    all: unset;
    border: var(--border_1);
    border-top: none;
    text-align: center;
    vertical-align: center;
    color: #FFF;
    font-weight: bold;
    pointer-events: none;
    position: relative;
    background-image: linear-gradient(
        to bottom, 
        rgba(240, 255, 255, 0.67),
        rgb(122, 168, 204, 0.0),
        rgba(240, 255, 255, 0.33)
    );
    box-shadow: inset 0 0 0 1px rgba(240, 255, 255, 0.5);
    -webkit-text-stroke: 3px rgb(82, 111, 131);
    paint-order: stroke fill;
}
.window .decoratives > .buttons button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: rgba(255,255,255,0.33);
}
.window .decoratives > .buttons > button:first-child {
    border-bottom-left-radius: 10px;
    border-right: none;
    padding-bottom: 4px;
}
.window .decoratives > .buttons > button:last-child {
    border-bottom-right-radius: 10px;
    border-left: none;
    background: linear-gradient(
        to left,
        rgb(167, 37, 19, 0.9),
        rgba(216, 61, 40, 0.9) 20%,
        rgba(216, 61, 40, 0.9) 80%,
        rgb(167, 37, 19, 0.9)
    );
    box-shadow: inset 0 0 0 1px rgba(255, 207, 207, 0.9);
}
.window .decoratives > .searchbar {
    display: grid;
    grid-template-columns: auto 3fr auto 2fr;
    align-items: center;
}
.window .decoratives > .searchbar > label:last-child {
    justify-content: space-between;
    margin-left: 4px;
}
.window .decoratives > .searchbar > label:nth-child(3) {
    border-left: none;
}
.window .decoratives > .searchbar > label {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgba(255,255,255,0.67);
    color: rgba(0,0,0,0.67);
    border: var(--border_1);
    height: 30px;
    padding: 4px;
    gap: calc(var(--gap) * 0.5);
    font-size: 0.9em;
}
.window .decoratives > .searchbar > label span {
    font-size: 1.25em;
}
.window .decoratives > .searchbar > div {
    display: grid;
    grid-template-columns: auto auto auto;
}
.window .decoratives > .searchbar > div span {
    position: relative;
    margin: 4px;
    top: 5px;
}
.window .decoratives > .searchbar button {
    position: relative;
    all: unset;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    border: var(--border_1);
    background-image: linear-gradient(
        to bottom, 
        rgba(240, 255, 255, 0.67),
        rgb(122, 168, 204, 0.0),
        rgba(240, 255, 255, 0.33)
    );
    box-shadow: inset 0 0 0 1px rgba(240, 255, 255, 0.5);
    -webkit-text-stroke: 3px rgb(82, 111, 131);
    paint-order: stroke fill;
}
.window .decoratives > .searchbar button img {
    width: 35px;
    height: 35px;
}
.window .decoratives > .searchbar button:nth-child(2) {
    transform: scaleX(-1);
}
.window > main {
    border: inherit;
    height: 100%;
    box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 10px;
    border-radius: 3px;
}
.welcome {
    display: grid;
    grid-template-rows: 3fr 5fr;
}
.welcome > .banner {
    background-image: url(assets/login.jpg);
    background-size: cover;
    background-position: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.welcome > .banner > header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: calc(var(--gap) * 0.5);
    gap: calc(var(--gap) * 0.5);
    height: 50px;
    width: 100%;
}
.welcome > .banner > header > label {
    z-index: 2;
}
.welcome > .banner > header > span {
    position: absolute;
    bottom: calc(var(--gap) * -0.5);
    height: 90%;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(122,168,204,0.33),
        rgba(0,0,0,0.33) 5%,
        rgba(0,0,0,0.33) 95%,
        rgba(122,168,204,0.33) 100%
    );
    z-index: 1;
}
.profile {
    border: 4px solid;
    border-color: #FFF lightblue lightblue #FFF;
    height: 100%;
    z-index: 2;
    margin: calc(var(--gap) * 0.5);
    border-radius: 5px;
}
.profile > img {
    box-shadow: rgba(0,0,0,0.33) 0 0 4px;
    height: 100%;
}
.welcome > .banner > main {
    display: grid;
    width: 90%;
    grid-template-columns: 200px auto;
    box-sizing: border-box;
    gap: var(--gap);
}
.welcome > .banner > main > label p,
.welcome > .banner > main > label h1 {

}
.welcome > .banner > main > img {
    width: 100%;
}
.welcome > .banner > label {
    position: absolute;
    bottom: 0;
    right: 0;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 6vh;
    line-height: 6vh;
    letter-spacing: 2px;
    color: white;
    opacity: 0.25;
    font-weight: 500;
    pointer-events: none;
}
.welcome > .content {
    background-color: #FFF;
    padding: var(--gap);
}
.apps {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--gap);
    padding-bottom: var(--gap);
}
.apps > header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    color: blue;
    font-size: 16px;
    gap: var(--gap);
}
.apps > header > span {
    display: inline-block;
    height: 0;
    border: 1px rgba(0,0,255,0.25) solid;
    width: 100%;
}
.apps > main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: calc(var(--gap) * 2);
}
.apps > main > button {
    all: unset;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 75px;
    padding:calc(var(--gap) * 0.5);
    border: 2px solid rgb(173, 225, 255, 0.0);
    cursor: pointer;
}
.apps > main > button:hover {
    
    background: linear-gradient(
        to bottom,
        rgb(236, 251, 255),
        rgb(192, 233, 245) 70%,
        rgb(192, 233, 245) 90%,
        rgb(173, 225, 255) 100%
    );
    border: 2px solid rgb(173, 225, 255);
}
.apps > main > button span {
    line-height: 75px;
    padding-left: var(--gap)
}
.apps > main > button a {
    all: unset;
}
.apps > main > button img {
    height: 100%;
}
.accountsAll {
    display: grid;
    grid-template-rows: auto 20vh;
    height: 100vh;
}
.accounts {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
}
.accounts > button {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.accounts label {
    font-size: 20px;
    text-align: center;
}
.accounts > button span > img {
    height: 100%;
    width: 100%;
    border: 1px solid gray;
    border-radius: 10px;
    box-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    z-index: 200;
    pointer-events: none;
}
.accounts > button span {
    width: 100px;
    height: 100px;
    position: relative;
    box-sizing: border-box;
    padding: 8px;
    border-radius:10px;
    background: linear-gradient(
        to bottom,
        rgba(236, 251, 255, 0.5),
        rgba(192, 233, 245, 0.5) 70%,
        rgba(192, 233, 245, 0.5) 90%,
        rgba(173, 225, 255, 0.5) 100%
    );
}
.accounts > button span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: rgba(255,255,255,0.33);
    border-radius: inherit;
    z-index: 1;
}
.bottom {
    height: 100%;
    background: transparent;
    padding: calc(var(--gap) * 4);
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
}
.bottom button {
    all: unset;
    width: 80px;
    height: 40px;
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.bottom .quit {
    position: relative;
    border-left: none;
    background: linear-gradient(
        to bottom,
        rgba(230, 49, 43, 0.9),
        rgba(131, 10, 10, 0.9),
        rgba(124, 3, 3, 0.9),
        rgba(131, 10, 10, 0.9),
        rgba(230, 49, 43, 0.9)
    );
}
.bottom .quit > span {
    box-shadow: inset 0 0 0 1px rgba(255, 207, 207, 0.9);
}
.bottom > .quit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: rgba(255,255,255,0.33);
}
/*
CREDIT TO: dimden.dev's "Old Twitter Layout" extension!
(https://chromewebstore.google.com/detail/old-twitter-layout-2026/jgejdcdoeeabklepnkdbglgccjpdgpmf?hl=en)
I referenced it to mimic Twitter's CSS...
*/
article.tweet {
    max-width: 500px;
    background-color: white;
    min-height: 100px;
    height: min-content;
    padding: 10px;
    border: 1px solid gray;
    border-top: none;
    border-left: none;
}
article.tweet.ooc {
    background-color: hsl(0, 0%, 90%)
}
article.tweet > .avatar {
    display: inline;
    float: left;
    margin-right: 10px;
    border-radius: 10px;
}
article.tweet > .avatar img {
    width: 48px;
    height: 48px;
    aspect-ratio: auto 48 / 48;
    border-radius: 3px;
}
article.tweet > header {
    display: contents;
}
article.tweet > header > a {
    display: inline;
    text-decoration: none;
}
article.tweet > header > a > b {
    display: inline;
    font-size: 16px;
    color: #000;
}
article.tweet > header > a > span {
    display: inline;
    color: gray;
    font-size: 14px;
}
article.tweet > main {
    display: flow-root;
}
article.tweet > main {
    font-size: 16px;
}
article.tweet > main > .media {
    max-width: 500px;
    display: grid;
    margin-top: 5px;
    grid-template-columns: 1fr;
}
article.tweet > main > .media img,
article.tweet > main > .media video {
    width: 100%;
    border: 1px solid gray;
    border-radius: 10px;
}
article.tweet > main > .media img:not(:first-child),
article.tweet > main > .media video:not(:first-child) {
    margin-top: 5px;
}
article.tweet > main > .decoratives {
    display: flow-root;
}
article.tweet > main > .decoratives > button {
    all: unset;
    display: inline;
    cursor: not-allowed;
    margin-left: 5px;
    margin-right: 20px;
    height: 20px;
    width: 20px;
    aspect-ratio: auto 20 / 20;
}
article.tweet > main > .time {
    display: inline;
    color: gray;
    font-size: 12px;
}
article.tweet > main > .decoratives button::before {
    color: lightgray;
    font-family: "rosetta";
}
article.tweet > main > .decoratives button:nth-child(1):before {
    content: "\f151";
}
article.tweet > main > .decoratives button:nth-child(2):before {
    content: "\f152";
}
article.tweet > main > .decoratives button:nth-child(3):before {
    content: "\f148";
}
article.tweet > main > .decoratives button:nth-child(4):before {
    content: "\f150";
}
img.emoji {
    display: inline-block;
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}
.tweets {
    width: 100%;
    background-color: #FFF;
    display: grid;
    grid-template-columns: auto 500px;
    overflow: hidden;
    scrollbar-width: none;
}
.tweets > .twitter {
    overflow: scroll;
    overflow-x: hidden;
    scrollbar-width: auto;
    max-width: 500px;
    max-height: 100%;
}
.twitter > div {
    display: contents;
}
.tweets > .menu {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto;
    font-size: 13px;
    border: 1px gray solid;
}
.tweets > .menu select {
    background-color: #FFF;
    border: 1px gray solid;
    border-radius: 10px;
    padding: calc(var(--gap) * 0.5);
    padding-left: calc(var(--gap));
    margin-bottom: calc(var(--gap));
}
.tweets > .menu input {
    display: inline-block;
    width: auto;
}
.tweets > .menu div:last-child span {
    border: 1px gray solid;
    border-radius: 10px;
    padding: calc(var(--gap));
    min-height: 100px;
    height: auto;
    max-height: 300px;
    background-color: #FFF;
}
.tweets > .menu label {
    margin-block: 4px;
    font-weight: bold;
}
.tweets > .menu > h1 {
    margin-block: 4px;
    font-size: 1.5em;
}
.tweets > .menu > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--gap);
}
#profile {
    height: 100%;
    position: relative;
    background-image: url("archive/twitter/vista-widgets-banner.png");
    background-size: cover;
    background-position: top;
}
#profile > span:first-child {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 4px;
    width: 100px;
    height: 100px;
    background-color: #FFF;
    border-radius: 10px;
    z-index: 2;
}
#profile > span:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #FFF;
}
#profile img {
    height: auto;
    width: 100%;
    border-radius: inherit;
}


main.renders {
    background-image: url("assets/checkerboard.png");
    image-rendering: pixelated;
    overflow: hidden;
}
main.fanart {
    background-image: url("assets/bosswall.jpg");
    background-repeat: repeat;
    background-size: 333px;
    overflow: hidden;
}
#fanart, #renders {
    overflow: scroll;
    overflow-x: hidden;
    scrollbar-width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    column-gap: var(--gap);
    row-gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 2);
    width: 100%;
    height: 100%;
}
#fanart > article {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 0.5);
    height: auto;
    width: auto;
}
#fanart > article img,
#fanart > article video,
#renders > img {
    height: 225px;
    width: auto;
}
#fanart > article label {
    cursor: pointer;
    width: auto;
    padding: calc(var(--gap) * 0.5);
    text-align: center;
    font-weight: bold;
    font-size: clamp(0.25em, 12px, 1em)
}
#fanart > article a {
    all: unset;
    display: contents;
}
.gold {
    background-color: gold;
    border-width: 3px;
    border-style: solid;
    border-top-color:#ffe798;
    border-left-color:#ffe798;
    border-right-color:rgb(190, 134, 13);
    border-bottom-color:rgb(190, 134, 13);
}
main.about {
    font-size: 16px;
    background-color: #FFF;
    font-family: consolas, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: calc(var(--gap) * 2);
}
main.about > .info {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    height: 500px;
}
main.about img {
    width: 100%;
}
main.about > .info div {
    margin-block: 0;
    padding: calc(var(--gap));
    
}
main.about > .info label {
    
}
main.about > .info label.title {
    font-size: 32px;
    font-weight: bold;
}
main.about > .info table {
    display: inline-block;
    margin: 8px;
    margin-left: -1px;
}
main.about > .info table th,
main.about > .info table td {
    text-align: left;
    padding: calc(0.5 * var(--gap));
    border: 1px solid #000;
}
main.about > .references {
    display: grid;
    grid-template-rows: 1fr;
    padding: calc(var(--gap) * 2);
    gap: calc(var(--gap) * 2);
}
main.about .imgcaption {
    display: flex;
    flex-direction: column;
}
main.about .imgcaption label {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
@media (max-width: 1200px) {
    #all {
        max-width: 900px;
    }
}
@media (max-width: 900px) {
    #all {
        max-width: 800px;
    }
    #content {
        height: 200vh;
    }
}
@media (max-width: 800px) {
    #all {
        max-width: 650px;
    }
    .apps > main {
        grid-template-columns: 1fr 1fr;
        font-size: 0.75em;
    }
    .window .decoratives > .searchbar > label {
        font-size: 0.67em;
    }
}
@media (max-width: 750px) {
    #all {
        max-width: 500px;
    }
    .tweets {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
    }
    .twitter {
        max-width: none;
        width: 100%;
        border-top: inherit;
    }
    article.tweet {
        max-width: none;
        width: 100%;
    }
    .tweets > .menu div:last-child span {
        height: auto;
    }
    .tweets > menu {
        grid-template-rows: auto auto;
        min-height: 200px;
    }
}
@media (max-width: 750px) {
    #all {
        max-width: 100%;
    }
    .top {
        display: none;
    }
    
}