@font-face {
    font-family: "VT323";
    src: url("https://files.catbox.moe/3kswi6.ttf");

}

a {
    text-decoration: underline;
}

a:link {
    color: #DEDEFF;
}

a:visited {
    color: #5BBFE9;
}

a:hover {
    color: white;
}

a:active {
    color: lightskyblue;
}

.browserwindow a:link {
    color: #3F85A2;
}

.browserwindow a:visited {
    color: #68658b;
}

.browserwindow a:hover {
    color: white;
}

.browserwindow a:active {
    color: lightskyblue;
}

.miniheadings a {
    text-decoration: underline;
}

.miniheadings a:link {
    color: #DEDEFF;
}

.miniheadings a:visited {
    color: #5BBFE9;
}

.miniheadings a:hover {
    color: white;
}

.miniheadings a:active {
    color: lightskyblue;
}


body {
    display: flex;
    flex-direction: column;

    background-position: center center;
    background-repeat: repeat;

    min-height: 100vh;

    margin: 0px;

    justify-content: center;
    align-items: center;

    line-height: 95%;
    font-size: 100%;
    font-family: "Courier";

    scrollbar-width: thin;
}


#pagecontainer {

    display: flex;
    flex-direction: column;

    padding-top: 50px;
    padding-bottom: 100px;

}

#title {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: right;

    width: 1152px;

    font-family: "VT323";
    color: white;
    text-shadow: 4px 4px black;
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 10px;

}

#mainpage {

    display: flex;
    flex-direction: column;

    width: 1152px;
    height: auto;
    margin: 0px;

    border: solid white 1px;

}



#pagecontents {
    display: grid;

    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;

}

#navside {

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    padding-top: 8px;
    padding-right: 4px;
    padding-bottom: 8px;
    padding-left: 4px;
}

#rightside {

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    padding-top: 8px;
    padding-right: 4px;
    padding-bottom: 8px;
    padding-left: 4px;
}

#leftside {

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    padding-top: 8px;
    padding-right: 4px;
    padding-bottom: 8px;
    padding-left: 4px;
}

.headings {

    background: url("https://files.catbox.moe/lvpnio.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    text-align: left;
    font-family: VT323;
    color: white;
    text-shadow: 2px 2px black;
    font-weight: normal;
    font-size: 24px;

    padding: 10px;

}

.miniheadings {

    font-family: "VT323";
    color: white;
    text-shadow: 2px 2px black, -1px -1px black, 1px -1px black, -1px 1px black, 1px 1px black;
    font-size: 27px;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 7px;

    text-align: end;
}


.navbuttons {
    background: url("https://files.catbox.moe/orwjsb.png");
    background-size: contain;
    background-repeat: no-repeat;

    margin-right: 5%;
    margin-top: 8px;

    color: white;
    text-shadow: 2px 2px black;
    font-weight: bold;

    padding-top: 1px;
    padding-bottom: 8px;
    padding-left: 4px;
}

.navbuttons:hover {

    background: url("https://files.catbox.moe/ojlxc5.png");
    background-size: contain;
    background-repeat: no-repeat;

    color: white;
}

.browserwindow {

    background: #D2D2D9;
    border-left: #E7E7EE 2px solid;
    border-right: #B3B8C6 2px solid;
    Border-bottom: #B3B8C6 2px solid;
    color: rgb(48, 48, 48);

    padding: 2%;

    margin-bottom: 10px;

}

.browserheader {

    color: white;

    font-size: 97%;
    text-align: left;

    padding-left: 1%;
    padding-right: 1%;

    align-content: center;

}

.browserheader.a {

    background: #BCA7C2;
    border-top: #D9CFDC 2px solid;
    border-left: #D9CFDC 2px solid;
    border-right: #92779A 2px solid;
    border-bottom: #92779A 2px solid;

}

.browserheader.b {

    background: #9A9ABE;
    border-top: #BCB9D4 2px solid;
    border-left: #BCB9D4 2px solid;
    border-right: #767CA3 2px solid;
    border-bottom: #767CA3 2px solid;
}

.browserheader.c {

    background: #7090B4;
    border-top: #A0B7D1 2px solid;
    border-left: #A0B7D1 2px solid;
    border-right: #426184 2px solid;
    border-bottom: #426184 2px solid;
}

.browserheader.d {

    background: #3F85A2;
    border-top: #78A9BD 2px solid;
    border-left: #78A9BD 2px solid;
    border-right: #22617B 2px solid;
    border-bottom: #22617B 2px solid;
}

.browserheader.e {

    background: #007987;
    border-top: #25A2B0 2px solid;
    border-left: #25A2B0 2px solid;
    border-right: #04525B 2px solid;
    border-bottom: #04525B 2px solid;
}

.browserheader.f {

    background: #006C63;
    border-top: #27988E 2px solid;
    border-left: #27988E 2px solid;
    border-right: #05433E 2px solid;
    border-bottom: #05433E 2px solid;
}

.browserscroll {

    background: #D2D2D9;
    border-left: #E7E7EE 2px solid;
    border-right: #B3B8C6 2px solid;
    border-bottom: #B3B8C6 2px solid;
    color: #006C63BF;

    padding: 2%;

    margin-bottom: 10px;

    overflow-y: scroll;

    scrollbar-color: #7090B4 #D2D2D9;
    scrollbar-width: thin;

}

.buttonsgroup {

    float: right;

    display: flex;
    margin-top: 4px;
}

.browserbuttons {
    color: white;

    align-content: center;
    justify-content: center;

    margin-left: 2px;

    text-align: center;

    height: 20px;
    width: 20px;

}

.browserbuttons.a {

    background: #BCA7C2;
    border-top: #D9CFDC 2px solid;
    border-left: #D9CFDC 2px solid;
    border-right: #92779A 2px solid;
    border-bottom: #92779A 2px solid;

}

.browserbuttons.a:hover {

    background: #AE92B6;

    border-top: #92779A 2px solid;
    border-left: #92779A 2px solid;
    border-right: #D9CFDC 2px solid;
    border-bottom: #D9CFDC 2px solid;
}

.browserbuttons.b {

    background: #9A9ABE;

    border-top: #BCB9D4 2px solid;
    border-left: #BCB9D4 2px solid;
    border-right: #767CA3 2px solid;
    border-bottom: #767CA3 2px solid;

}

.browserbuttons.b:hover {

    background: #8989B0;

    border-top: #767CA3 2px solid;
    border-left: #767CA3 2px solid;
    border-right: #BCB9D4 2px solid;
    border-bottom: #BCB9D4 2px solid;
}

.browserbuttons.c {

    background: #7090B4;
    border-top: #A0B7D1 2px solid;
    border-left: #A0B7D1 2px solid;
    border-right: #426184 2px solid;
    border-bottom: #426184 2px solid;

}

.browserbuttons.c:hover {

    background: #5B7B9F;

    border-top: #426184 2px solid;
    border-left: #426184 2px solid;
    border-right: #A0B7D1 2px solid;
    border-bottom: #A0B7D1 2px solid;
}

.browserbuttons.d {

    background: #3F85A2;
    border-top: #78A9BD 2px solid;
    border-left: #78A9BD 2px solid;
    border-right: #22617B 2px solid;
    border-bottom: #22617B 2px solid;

}

.browserbuttons.d:hover {

    background: #31718C;

    border-top: #22617B 2px solid;
    border-left: #22617B 2px solid;
    border-right: #78A9BD 2px solid;
    border-bottom: #78A9BD 2px solid;
}

.browserbuttons.e {

    background: #007987;
    border-top: #25A2B0 2px solid;
    border-left: #25A2B0 2px solid;
    border-right: #04525B 2px solid;
    border-bottom: #04525B 2px solid;

}

.browserbuttons.e:hover {

    background: #006A76;

    border-top: #04525B 2px solid;
    border-left: #04525B 2px solid;
    border-right: #25A2B0 2px solid;
    border-bottom: #25A2B0 2px solid;
}

.browserbuttons.f {

    background: #006C63;
    border-top: #27988E 2px solid;
    border-left: #27988E 2px solid;
    border-right: #05433E 2px solid;
    border-bottom: #05433E 2px solid;

}

.browserbuttons.f:hover {

    background: #005750;

    border-top: #05433E 2px solid;
    border-left: #05433E 2px solid;
    border-right: #27988E 2px solid;
    border-bottom: #27988E 2px solid;
}