body {
    margin: 0;
    padding: 0;
    background-image: url('../bg/kewl.jpg');
    background-size: 20%;
    /* background: gray; */
    /* height: 100vh; */
}


#hi {
    width: 100%;
    height: calc(100% - 3em);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--main);
    position: relative;
    padding: 1.5em 0;
}

.bar {
    background: #220303;
    width:2.25%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    z-index: 2;
}

.bar>.workspaces {
    display: flex;
    flex-direction: column;
    gap: .75em;
    margin-top: 1em;
}

.workspaces button {
    border-radius: 5px;
    background: #220303;
    color: white;
    width: 55%;
    padding: 5px 0;
    margin: auto;
    border: 1px solid white;
    transition: all .1s ease;
}

.activebutton {
    background: #651c1c !important;
    border-radius: 50% !important;
} 

.workspaces button:hover {
    border-radius: 50%;
    background: #480f0f;
}

.winWrapper {
    height: 100%;
    width: 96%;
    left: 1.75em;
    position: relative;
}

.windows {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 1.5em;
    position: absolute;
    top: 0;
    left: 0;

}

.windows>.side1, .windows>.side2 {
    width: 50%;
    height: 100%;
}

.window {
    border-radius: 5px;
    border: 3px solid;
    border-color: rgba(255, 255, 255, 0.454);
    outline: 1px solid rgba(0, 0, 0, 0.218);
    box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.487);
    opacity: .9;
    background: rgba(27, 1, 1, 0.955);
    transition: all .2s ease-in-out;
    backdrop-filter: blur(5px);
    padding: 1em;
    color: white;
    filter:blur(1px) brightness(.8);

    /* opacity: 1;
    background: rgb(121, 121, 121); */
}

.linux, .hardware {
    height: calc(100% - 2em);
}

.intro {
    margin-bottom: 1.5em;
    height: calc(50% - 2em - 1.5em - 3px);
}

.term {
    height: calc(50% - 4em - 3px);
    font-family: NerdFont;
    padding: 2em;
    text-align: left;
}

#regen {
    color: #d77f7f;
    margin-left: .5em;
    user-select: none;
}

#regen:hover {
    color: #e2a6a6;
    cursor: pointer;
}

.window:hover {
    opacity: 1;
    background: rgb(27, 1, 1);
    border-color: rgb(192, 78, 78);
    filter:blur(0) brightness(1);
}

.window>.inner {
    width: 90%;
    margin: auto;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}


table {
    margin: auto;
    background: white;
    color: black;
}

table, th, td {
  border: 1px solid #7e3939;
}

th {
    font-weight: bold;
}

tr {
    text-align: left;
}

td {
    width: 20%;
}

.fastfetch {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2em;
}

.fastfetch>.half1 {
    width: 30%;
}

.fastfetch img {
    border-radius: 5px;
}

.fastfetch>.half2 {
    text-align: left;
    width: 70%;
}

.ffname {
    color: rgb(184, 11, 11);
}

.cursor {
    text-align: left;
    margin-top: 1.5em;
}

.terminalview {
    font-family: NerdFont;
    border: 1px solid white;
    width: calc(85% - 2em);
    margin: auto;
    text-align: left;
    padding: .5em 0 1.5em 2em;
    background: #101017;
    border-radius: 10px;
}

.pgms img {
    width: 30%;
    opacity: .75;
    transition: all .3s ease;
}

.pgms img:hover {
    opacity: 1;
}

.pgms a {
    color: #ae0505;
    text-decoration: none;
}

.pgms a:hover {
    text-decoration: underline;
    color: #e76161;
}

.bigpic {
    width: 100% !important;
}

.software {
    margin-bottom: 1.5em;
    height: calc(50% - 2em - 1.5em - 3px);
}

.servers {
    height: calc(50% - 4em - 3px);
}

@font-face {
    font-family: NerdFont;
    src: url(../font/AnonymiceProNerdFont-Regular.ttf);
}

.blinking {
    animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
    
}