*{
    --palletColor1 : #282B57;
    --palletColor2 : #443482;
    --palletColor3 : #703E9C;
    --palletColor4 : #C2469D;
    --palletColor5 : #E35F8D;
    --palletColor6 : #EB7A7E;
    --palletColor7 : #F59182;
    --palletColor8 : #FAB88E;
    
    --lavenderShade1 : #777696;
    --lavenderShade2 : #695887;
    
    /*--textShadowColor: #9a6fb0;*/
    --textShadowColor: #282B57;
    
    --sectionTitleColor: #d0bcff;
    --sectionTitleOutlineColor: #282b57;
}

@font-face 
{
    font-family: kawaii stitch;
    src: url(https://dl.dropbox.com/s/yjal3we9j6biyn5/Kawaii%20Stitch.ttf);
}
 
@font-face 
{
    font-family: starborn;
    src: url(https://dl.dropbox.com/s/l0541on0m5eqvdj/Starborn.ttf);
}
 
@font-face 
{
    font-family: pixel;
    src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
}
 
@font-face 
{
    src: url(https://dl.dropbox.com/s/ct0s037q78sao3f/Frighted.ttf);
    font-family: Frighted;
}
 
@font-face 
{
    src: url(https://dl.dropbox.com/s/ktlx5w7t8gk42nb/SakeMoru-Regular.ttf);
    font-family: SakeMoru;
}
 
@font-face 
{
    font-family:'yipes';
    src: url(https://dl.dropbox.com/s/qrdm3wived8sm66/Yipes.ttf);
}
 
@font-face 
{
    font-family:'fenotype';
    src: url(https://dl.dropbox.com/s/klo6yfrf62916qp/02.10FEN.TTF);
}

@font-face {
  font-family: 'guignolet-kirsch-lat';
  src: url('../../assets/fonts/guignolet-kirsch-lat.otf');
}

@font-face {
  font-family: 'rounded-blocks-filled';
  src: url('../../assets/fonts/rounded-blocks-filled.otf');
}

@font-face {
  font-family: 'Cosmo Corner';
  src: url('../../assets/fonts/Cosmo Corner.ttf');
}

@font-face {
  font-family: 'Milkyway DEMO';
  src: url('../../assets/fonts/Milkyway DEMO.ttf');
}

@font-face {
  font-family: 'Mochi Boom DEMO';
  src: url('../../assets/fonts/Mochi Boom DEMO.ttf');
}

#main-container
{
    /*min-height: 100vh;*/
    /*height: max-content;*/
    min-height: 100vh;
    
    /*max-width: 900px;*/
    max-width: 100vh;
    
    margin-left:auto;
    margin-right: auto;
    margin-top: 25px;
    padding: 5px;
    
    display:grid;
    /*grid-gap: 8px;*/
    
    /*grid-template-columns: 200px minmax(0, 1fr) 150px;*/
    /*grid-template-columns: 170px 420px 150px;*/
    /*grid-template-columns: repeat(auto-fit, minmax(0, 1fr));*/
    /*grid-template-columns: 170px minmax(0, 1fr) 150px;*/
    /*
    grid-template-columns: 0.4fr 0.1fr minmax(0, 9fr);
    
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header header header"
        "navbar navbar main"
        "moonbox gifmanager main"
        "footer footer footer";
        */
    
    grid-template-columns: 0.4fr minmax(0, 1fr);
    
    grid-template-rows: auto auto 4fr auto auto;
    grid-template-areas:
        "header header"
        "navbar main"
        "navbar main"
        "moonbox main"
        "footer footer";
    
    border-width:7px;
    border-style: solid;
    border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;        
}

@media only screen and (max-width:600px)
{
    #main-container
    {
        grid-template-columns: 1fr;
        /*grid-template-rows: repeat(7, 0.4fr);*/
        
        grid-template-areas:
            "header"
            "navbar"
            "gifmanager"
            "main"
            "socials"
            "moonbox"
            "footer";
    }
    
    nav 
    {
        text-align: center;
    }
    
    nav ul
    {
        padding: 0;
        list-style-type: none;
        list-style-position: inside;
    }
    
    footer
    {

    }
}

main
{
  
    grid-area: main;
    
    display: grid;
    grid-gap: 8px;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    
    background-color: azure;
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    border-color: lightblue;
}

#scrapbook-title
{
    font-family: 'Milkyway DEMO';
    font-size: 25px;
    letter-spacing: 9px;
    
    line-height: 2.41em;
    
    height: max-content;
    margin-top: 40px; 
    margin-left: 20px;
    text-align: center;
    
    grid-row: 1/2;
    grid-column: 1/3;
    
    /*filter: drop-shadow( 0 3px #9a6fb0) drop-shadow( 2px 0 #9a6fb0) drop-shadow( 0 -1px #ffa9c2) drop-shadow( -1px 0 #9a6fb0) drop-shadow( 0 5px white) drop-shadow( 5px 0 white) drop-shadow( 0 -5px white) drop-shadow( -5px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #424242);*/
    /*color: black;*/
    
    filter: drop-shadow( 0 3px var(--textShadowColor)) drop-shadow( 2px 0 var(--textShadowColor)) drop-shadow( 0 -1px #ffa9c2) drop-shadow( -1px 0 var(--textShadowColor)) drop-shadow( 0 5px white) drop-shadow( 5px 0 white) drop-shadow( 0 -5px white) drop-shadow( -5px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #424242);
    /*color:black;*/
    color: var(--sectionTitleColor);
}

#stamps-container
{
    text-align: center;
}

#stamps-content 
{ 
    margin: 0 auto; 
    padding:15px; 
    width:100%; 
    box-sizing:border-box; 
    
    text-align: center;
    
    grid-row: 2/3;
    grid-column: 1/3;
}

.tabs
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 5px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
    /*border-bottom: 1px solid #6a5b8f;*/
}

.tab
{
    cursor: pointer;
    padding: 5px;
    
    transition: .2s ease; 
    color:black;
    
    background-color: #dabaff;
    border-radius: 5px;
}

.tab:hover
{
    color:hotpink;
    background-color: #332b48;
}

.tab.active
{
    color:hotpink;
    background-color: #6a5b8f;
}

.tab-content
{
    margin-left: 20px;
    margin-right: 20px;
}

.collectionFlex
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1px;
    padding: 15px;
    
    overflow-y:auto;
    overflow-x:hidden;
    max-height: 400px;
    
    scrollbar-color: var(--sectionTitleOutlineColor) var(--sectionTitleColor);
    scrollbar-width: thin;
}

[data-tab-content]
{
    display: none;
}

.active[data-tab-content]
{
    display: block;
}

/*
#button-box
{
    grid-area: buttonbox;
    
    background-color: azure;
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    border-color: lightblue;
    display: flex;
    
    text-align: center;
    flex-wrap: wrap;
    padding: 6px;
    
}
*/