:root {
     --blue:#0000ff;
     --bg:#080e0be6;
     --lt-color:#000000;
     --dkest-color:#fff;
     --accent:#f77e4e;
}
body {
    background-color: #008080;;
    background-size: auto;
    color: #fff;
    font-family: ms gothic;
    image-rendering: pixelated;
}
@font-face {
        font-family: pixel;
        src: url(VCR_OSD_MONO_1.001.ttf)
}
audio {
    display: none;
}
#page {
    width: 100%;
    height: fit-content;
}
#taskbar {
    width: 99.5%;
    height: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #c3c3c3;
    border: 2px outset #c3c3c3;
}
#start {
    width: 80px;
    height: 28px;
    background-color: #c3c3c3;
    border: 2px outset #c3c3c3;
    color: #000;
    font-family: pixel;
    font-weight: bold;
}
.window {
    min-height: 300px;
    background-color: #c3c3c3;
    border: 2px outset #c3c3c3;
    box-shadow: black 2px 2px 3px;
}
.tab {
    width: 99%;
    height: 20px;
    align-self: center;
    background-color: #000000;
    background-image: linear-gradient(to bottom, #000, #010081);
    border: 2px outset #000;
    color: #fdffff;
    padding: 2px;
    display: flex;
}
#gap {
    width: 81%;
}
.tab-b {
    width: fit-content;
    display: flex;
    gap: 3px;
}
.button {
    width: 16px;
    height: 16px;
    background-color: #c3c3c3;
    border: 2px outset #c3c3c3;
    color: #000;
    text-align: center;
}
.button:active, #start:active {
    background-color: #818181;
    border: 2px inset #818181;
}
#window-1 {
    position: absolute;
    left: 200px;
    top: 200px;
    width: 800px;
    height: 500px;
}
#profile {
    width: 90%;
    height: 420px;
    margin: auto;
    margin-top: 14px;
    border: 2px inset #888274;
    background-color: black;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 70% 30%;
}
.pfp {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
#pic {
    filter: grayscale(50%);
}
.right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.bottom {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}
.pfp, .right, .bottom {
    border: 2px solid white;
    margin: 5px;
    padding: 5px;
    font-family: pixel;
}
#window-2 {
  width: 400px;
  height: 200px;
  position: absolute;
  left: 1040px;
  top: 100px;
}
.info {
    width: 400px;
    height: fit-content;
    position: absolute;
    left: 1200px;
    top: 450px;
    background-color: transparent;
    border-radius: 10px;
    padding: 10px;
    color: #888274;
    font-family: pixel;
}
h3 {
  color: #cf757b;
}
#content {
    width: 90%;
    height: 75%;
    overflow-y: scroll;
    padding: 20px;
    justify-content: center;
}

 @media only screen and (max-width: 917px) {
    #taskbar {
        order: 1;
        
    }
     #window-1 {
         position: inherit;
         order:2;
         width:100%;
         margin-top: 40px;
         margin-bottom: 40px;
        
    }
     .info {
         position: initial;
         order:3;
         width:100%;
         margin-bottom: 40px;
         
        
    }
     #window-2 {
         position: initial;
         order: 4;
         width: 100%;
    }
}