/*Main CSS File*/
body {
    --bgColor: #ece9d8;
    background-color: var(--bgColor);
    color: black;
    font-size: 10px !important;
    font-family: Tahoma, "Trebuchet MS", sans-serif !important;
    min-width: 550px;
    max-width: 550px;
    margin: auto;
    padding: 10px;
}

h1 h2 h3 h4 {
    font-family: "Trebuchet MS", Tahoma, sans-serif !important;
}

h1 {
    font-size: 1.5em !important;
}

h2 {
    font-size: 1.2em !important;
}

h3 {
    font-size: 1em !important;
}

h4 {
    font-size: .8em !important;
}
/*Window Stuff*/
.noTouchie{
    user-select: none;
}

.window {
    position: absolute;
}

.title-bar {
    cursor: grab;
}

.title-bar:active {
    cursor: grabbing;
}

/*Website Icon Filter*/
.webIcon {
    filter: invert(100%);
    height: 32px;
    vertical-align: middle;
    margin-bottom: 3px;
}

/*Center Anything On A Page!*/
.centerItem {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

/*Sticky Seeder Button (ew..)*/
.seederButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

/*Silly Get Out Button*/
.getOut {
    position: absolute;
    opacity: 0.2;
    top: 3px;
    left: 71px;
    width: 10px;
}

.getOut:hover {
    width: 20px;
    top: -3px;
    left: 66px;
    opacity: 1.0;
}

/*Fancy Button Links*/
.linkButton {
    background-color: #56cbf0;
    border: outset rgb(0, 0, 0);
    border-radius: 10px;
    color: rgb(0, 0, 0);
    padding: .8em 1.2em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.linkButton:hover {
    background-color: #4cb7d7;
    border: inset rgb(45, 45, 45);
    color: rgb(45, 45, 45);
}

/*XP Button Edits*/
button {
    font-size: 1em !important;
}

.buttonWide {
    min-height: 3em;
    min-width: 3em;
}

.buttonWider {
    min-height: 3em;
    min-width: 9em;
}

/*Simple Divider*/
.divider {
    border-top: 5px solid #bbb;
}

/*Line Divider with Text*/
.dividerText {
    font-size: .8em;
    display: flex;
    align-items: center;
}

.dividerText::before,
.dividerText::after {
    flex: 1;
    content: '';
    padding: 3px;
    background-color: black;
    margin: 5px;
}

/*Embeded Window in a Window WHAT*/
.embedWindow {
    width: 100%;
    margin: 0 auto;
}

/*Error Box Flex Formatting*/
.flexbox {
    height: 150px;
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
}

.flexbox div {
    width: 40%;
    height: 30%;
}

.flexbox .one {
    height: 100%;
}

/*Scary Page!*/
.shift {
    animation-name: bgShift;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@keyframes bgShift {
    0% {
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 1%, rgba(105, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
    }

    100% {
        background: linear-gradient(360deg, rgba(0, 0, 0, 1) 1%, rgba(105, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
    }
}

.scary {
    height: 100vh;
    width: 100vw;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 1%, rgba(105, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
    overflow: hidden;
}