@font-face {
    font-family: OseeMono;
    src: url('Assets/Oseemono-V5Ez.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(--blue);
}
body {
    margin: 0;
    padding: 0;
    font-family: OseeMono, monospace;
    font-size: 1.3em;
}

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

    display: flex;
    flex-direction: column;
    justify-content: stretch;
    background-color: var(--pink);
    border: solid 2px;
    text-align: center;                     
    overflow: hiden;
}

/* #window {
    position: absolute;
}

#windowheader {
    cursor: move;
} */

.top {
    display: flex;
    flex-direction: row;                    /* makes them align in a line*/       
    flex: 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;
    }

            #umetnina {
                width: 80px;
                text-align: left;
            }


.center {
    display: flex;

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

    background-color: var(--pink);
}

.cleft {
    display: flex;
    flex-direction: column;
    align-items: stretch;                    
    justify-content: space-around;          /*evenly distributes all inner divs*/
    flex: 1;
}

    .cl-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;                    
        justify-content: flex-start;      /*evenly distributes all inner divs*/

        align-content: center;
        gap: 5px;

        width: 100%;
    }

    img.cl-but {
        align-self: center;
        width: 80px;
    }

    .cl-header {
        display: flex;
        flex-direction: column;
        justify-items: flex-start;
        padding-top: 5px;
    }

    .textbox {
        width: 100px;
        height: 150px;
    }

    textarea {
        font-family: OseeMono, monospace;
        font-size: 1em; 
        text-align: center;
        resize: none;
        /* border-width: 1px;
        border-style: groove; */
    }


    
    #thank-you-message {
        display: none; 
        text-align: center;
    }

.cmain {
    display: flex;
    flex: 4;
    flex-direction: column;
    border: groove 2px ;
    align-items: center;                    
    justify-content: flex-start;      
    
}

    .cm-header {
        margin: 10px;
    }

    .cm-blog {
        display: flex;
        flex-direction: column;
        justify-content: stretch;      /*evenly distributes all inner divs*/
        align-items:flex-start;                    
        text-align: left;
        overflow: scroll;
        gap: 5px;

        width: 80%;
        height: 380px;
        
        background-color: var(--blue);
        border-style: groove;
        border-radius: 3px;
        padding: 5%;

    }

            .cm-blog::-webkit-scrollbar:horizontal {
                display: none;
            }
        
        .cm-blogpost {
            display: flex;
            flex-direction: column;

            background-color: var(--pink);

            border-style: groove;
            border-radius: 3px;

            padding: 5%;
            width: 340px;
        }
            .cm-blogpost h2 {
                    color: var(--blue);
                    font-weight: normal;

                    padding: 0px;
                    margin: 0px;
                }

            .cm-bloglink {
                align-self: end;

            }

                .cm-bloglink a {
                    color: var(--blue);
                    text-decoration: none;
                    align-self: end;
                }

        .blogpost {
            display: flex;
            flex-direction:column;
            height: 100px;
            width: 50vw;
            color: white;
            display: flex;
        }

            .blogpost a {
                text-decoration: none;
                color: white;
            }
        
        .gallery {  /* 500x115px */
            display: flex;
            flex-direction: column;
            justify-content:space-between;      /*evenly distributes all inner divs*/
            align-items: left;                    


            height: 103px;
            width: 450px;
            /* max-height: 105px;
            max-width: 490px; */
            /* margin: 5px; */
            background-color: var(--pink);
            color: black;
        }

            .gallery img {
                max-inline-size: 40px;
            }

            .gallery a {
                text-decoration: none;
                color: var(--blue);
            }

        .gal-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-self: left;
            text-align: left;
        }

        .gal-pics {
            display: flex;
            flex-direction: row;
            gap: 5px;
            overflow: scroll;
        }

        .gal-pics::-webkit-scrollbar:vertical {
            display: none;
        }

        .gal-pics::-webkit-scrollbar:horizontal {
            justify-content: safe;
        }

.cright {
    display: flex;
    flex-direction: column;
    align-items: stretch;                    
    justify-content:flex-start;             /*evenly distributes all inner divs*/
    flex: 1;
    max-height: 508px;                      /*prevents the content from changing the main window*/
    max-width: 120px;                       /*prevents the content from changing the main window*/
    padding: 0px;
}


    .tabs {
        display: flex;
        flex-direction: row;
        flex: 0;
        
        align-items: center;                     /*centers the text vertically*/
        justify-content: space-around;           /*spreads the text evenly across the width*/
        align-self: top;
    }


    .tab {
        padding: 5px;                           /*top left right bottom*/
        cursor: pointer;
        background: white;
        border-style: groove;
        border-radius: 3px;
        border-radius: 4px 4px 0 0;
    }

    .tab.active {
        background: var(--pink);
        border-bottom: none;
        text-transform: uppercase;
    }
    
    .content {
        flex: 3;
        display: none;
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 0 4px 4px 4px;
        border-top: none;
        background: #fff;
    }

    .content::-webkit-scrollbar:horizontal {
        display: none;
    }
    
    .content.active {
        display:inline;
        overflow: scroll;
        background: var(--pink);
        padding: 5px 0px 5px 5px;
    }

    .cright h3 {
        padding: 0px;
        margin: 0px;
        color: var(--blue);
    }
    
    .cright h4 {
        padding: 0px;
        margin-block-start: 25px;
        margin-block-end: 0em;
        color: var(--brown);
        text-align: left;
    }

    .cright ul {
        list-style-type:none;
        padding: 0px 15px;
        text-align: left;
        margin-block-start: 0em;
        margin-block-end: 0em;
    }

    .cright li {
        display: list-item;
        unicode-bidi: isolate;
        margin-top: 15px;
        /* text-indent: -10px; */
    }

    .cright ul li li {
        display: list-item;
        text-indent: -10px;
    }

.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*/
    gap: 5px;

    background-color: black;
    color: var(--pink);
    padding: 4px 2px 2px 2px;                         /*adds padding to the left and right*/
}
    img.small { 
        height: 31px;
        max-height: 31px;
    }