@font-face {
    font-family: OseeMono;
    src: url('Assets/Oseemono-V5Ez.ttf') format('truetype');
}

@font-face {
    font-family: 'MapleMono NF';
    src: url('Assets/MapleMono-NF/MapleMono-NF-Regular.ttf') format('truetype');
}

:root {
    /*-----------------------------------------colorpalette*/
    --pink:#f3e6ff;
    --brown: #7a5c58;
    --blue: #3D5A80;
    /*------------------------------------------------------*/    


    /*-----------------------------------------scrollbarvars*/
    --window-frame: #0a0a0a;
    --button-shadow:#808080;
    --button-face: #dfdfdf;
    --button-highlight:#ffffff;
    --border-width: 1px;
    --border-raised-outer: 
        inset -1px -1px var(--window-frame),
        inset 1px 1px var(--button-highlight);
    --border-raised-inner: 
        inset -2px -2px var(--button-shadow),
        inset 2px 2px var(--button-face);
    /*-------------------------------------------------------*/    
}



::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar:horizontal {
  height: 17px;
}

::-webkit-scrollbar-corner {
  background: var(--button-face);
}

::-webkit-scrollbar-track {
  background-color: var(--button-face);
}

::-webkit-scrollbar-thumb {
  background-color: var(--button-face);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display:block;
}

::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: url("Assets/button-up.png");
}
::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: url("Assets/button-down.png");
}
::-webkit-scrollbar-button:horizontal:start {
  width: 16px;
  background-image: url("Assets/button-left.png");
}
::-webkit-scrollbar-button:horizontal:end {
  width: 16px;
  background-image: url("Assets/button-right.png");
}

html {
    background-color: var(--pink);
    overflow: hidden;
}
body {
    margin: 0;
    padding: 0;
    font-family: OseeMono, monospace;
    font-size: 1.3em;
}

.all {
    width: 750px;                           /*fixed size of the center window*/
    height: 570px;
    margin: 10vh auto;                      /*top left right bottom*/

    display: flex;
    flex-direction: column;
    justify-content: stretch;
    border: solid 2px;
    text-align: center;                     
}

.top {
    display: flex;
    flex-direction: row;                    /* makes them align in a line*/       
    flex: 0 0;                              /*flex-grow, flex-shrink, flex-basis*/
    align-items: stretch;                   /*centers the text vertically*/
    justify-content:space-between;         /*spreads the text evenly across the width*/
    
    background-color: black;
    color: var(--pink);
    padding: 0 1rem;                        /*adds padding to the left and right*/
}

    .top a {
        text-decoration: none;
        color: white;
    }

    .top a:hover {
        text-transform: uppercase;
    }


.center {
    display: flex;

    flex: 1;                                /*takes up all the space available*/
    align-items: stretch;                    
    justify-content: space-around;                

    background-color: var(--blue);
    color: white;
    overflow: hidden;
    text-align: left;
    border-style: groove;

}

                .center a {
                    text-decoration: none;
                    color: var(--pink)
                }

    .cmain {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: start;      
        flex: 1;
        padding: 0px;
        margin: 0px;
    }
    
    .cmain img {
        width: 360px;
    }
    
    .about-text {
        width: 340px;
        height: 506px;
        text-align: justify;
        padding: 10px;
        overflow: scroll;
    }
    
    .about-img {
        display: flex;
        align-self: end;      

        width: 360px;
        align-items: flex-end;
            }


.bottom {
    display: flex;
    flex-direction: row;                     /* makes them align in a line*/       
    flex: 0 0;                               /*flex-grow, flex-shrink, flex-basis*/
    align-items: center;                     /*centers the text vertically*/
    justify-content: space-around;           /*spreads the text evenly across the width*/
    
    background-color: black;
    color: var(--pink);
    padding: 0 1rem;                         /*adds padding to the left and right*/
}

    img.responsive { 
        height: 5vh;
    }