*{
    --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
{
    border: black 2px solid;
    grid-area: main;
    /*height: max-content;*/
    
    background-color: azure;
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    border-color: lightblue;
    
    display: grid;
    
    grid-template-columns: auto, auto;
    
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "welcome-title welcome-image"
        "welcome-text welcome-text";
    
    justify-content: center;
    
    overflow-y:auto;
    overflow-x: hidden;
}

#welcome-title
{
    
    grid-area: welcome-title;
    
    font-family: 'Milkyway DEMO';
    text-align: center;
    font-size: 15px;
    padding: 8px;
    letter-spacing: 5px;
    
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    
    justify-content: center;
    
    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);
}


#welcome-text
{
    grid-area: welcome-text;
    
    text-align: center;
    padding: 25px;
}

#welcome-image
{
    grid-area: welcome-image;
    /*grid-row: 1 / 3;*/
    /*grid-column: 2 / 5;*/
    
    padding: 10px;
    width: 100%;
    height: max-content;
}