/* Change colors and fonts here */
:root {
    /*  COLORS  */

    --background:#dabfff; /*Main background color*/
    --color:#333; /*Body text color*/

    --header: ; /*Header background color*/

    /* CONTENT COLORS */
    --mainbg: #f1e8ff; /*Content background color*/
    --linkcolor: #00a5e0; /*Body link color*/
    --linkhover: #7fdeff; /*Body link hover color*/

    --borders: #fff; /*Border for header 1*/

    --formbg:#f5f5f5; /*Background for text boxes/dropdown menus*/
    --formcolor:#907ad6; /*Color for text boxes/dropdown menus*/
    --buttonbg:#f5f5f5; /*Background for submit buttons*/
    --buttoncolor:#907ad6; /*Color for submit buttons*/

    /* MENU COLORS */
    --navcolor:#333; /*Menu text color*/
    --navbg:#f1e8ff; /*Menu background color*/

    --navtextlink:#ffe8a2; /*Sidebar text link color*/
    --navtexthover:#907ad6; /*Sidebar text link hover*/

    --navlink: #907ad6; /*Menu link color*/
    --navlinkbg: #dabfff; /*Menu link background*/
    --navhover: #907ad6; /*Menu link hover color*/
    --navhoverbg: #f5f5f5; /*Menu link hover background*/

    --burger:#333; /*Color for hamburger menu text/icons*/
    --overlay:rgb(0,0,0,0.3); /*Color for overlay when hamburger menu is open*/
    
    /* FOOTER COLORS */
    --footercolor:#333; /*Footer text color*/
    --footerbg:#f1e8ff; /*Footer background color*/

    --footerlink:#00a5e0; /*Footer link color*/
    --footerhover:#7fdeff; /*Footer background color*/
    
    --burgericon:url(../img/assets/burger.svg); /* Path to burger vector */
    --closeicon:url(../img/assets/assets/close.svg); /* Path to close vector */

    /*  FONTS   */
    --titlefont: "Chewy", sans-serif; /* Logo/Header + Magic Text */
    --headerfont: "Sour Gummy", sans-serif; /* Headers */
    --navheader: "Jua", sans-serif; /* Nav Bar Headers */
    --bodyfont: "Montserrat", sans-serif; /* Body */
    --bodyfont2: "Comfortaa", sans-serif; /* Body 2 (+Nav Bar?) */
}

/* Body */

body {
    font-family: var(--bodyfont2);
    color: var(--color);
    background: var(--background);
    background-image: url(../img/assets/Raikou-Sleep_Opaque-1-1.png), url(../img/assets/MagoShinyBG-Pattern_Trans.png); /* Background images (fixed bottom right, pattern) */
    background-position: bottom right, left top; /* Background images (fixed bottom right, pattern) */
    background-repeat: no-repeat, repeat; /* Only repeat BG pattern */
}

/* Header */

header {
    background-image: url(../img/assets/Raikou_Smile-Anim-Flip.gif), url(../img/assets/Raikou_Smile-Anim.gif); /* Header Image - Left to Right */
}

/* Content */

main {
    font-family: var(--bodyfont2);
    background: var(--mainbg);
    border: 15px solid;
    border-image: url(../img/assets/borders/lace.png) 50 round; /* Border pattern around center content box */
    background-clip: padding-box;
    word-wrap: break-word;
}

main h1 {
    font-family: var(--headerfont);
    border-bottom: 4px dotted var(--borders);
    border-radius: 12px;
    -webkit-text-stroke: 5px #fff;
    paint-order: stroke fill;
    background-image: url('../img/assets/LoveBall.png'),
    linear-gradient(90deg,rgba(239, 156, 218, 1) 0%, rgba(254, 206, 241, 1) 10%, rgba(255, 255, 255, 0) 100%);
}

main h2 {
    font-family: var(--headerfont);
    border-bottom: 3px dotted var(--borders);
    border-radius: 12px;
    -webkit-text-stroke: 5px #fff;
    paint-order: stroke fill;
    background-image: url('../img/assets/DreamBall.png'),
    linear-gradient(90deg,rgba(218, 191, 255, 1) 0%, rgba(218, 191, 255, 1) 10%, rgba(218, 191, 255, 0) 100%);
}

main h3 {
    font-family: var(--headerfont);
    border-bottom: 2px dotted var(--borders);
    border-radius: 12px;
    -webkit-text-stroke:5px #fff;
    paint-order: stroke fill;
    background-image: url('../img/assets/QuickBall.png'),
    linear-gradient(90deg,rgba(170, 234, 255, .5) 0%, rgba(255, 255, 255, 0) 100%);
}

main h4 {
    font-family: var(--headerfont);
    border-bottom:2px dotted var(--borders);
    border-radius: 12px;
    -webkit-text-stroke:5px #fff;
    paint-order: stroke fill;
    background-image: url('../img/assets/LuxuryBall.png'), linear-gradient(90deg,rgba(255, 220, 122, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background-position: top right;
    background-size:contain;
    background-repeat: no-repeat;
}

main h6 { /*  Sparkle Magic Header  */
    font-family: var(--titlefont);
    color: violet; /* Color for surrounding non-magic text */
    text-align: center;
}


/* Divider - Dotted */
.divider {
    border-top: 5px dotted #fff;
    text-align: center;
}

/* Paragraphs and Links */

p {
    color: var(--bodytext)
}

main a {
    color: var(--linkcolor);
    text-decoration: underline;
}

main a:hover {
    color: var(--linkhover);
    text-decoration: none;
}

main details {
    background: var(--details);
}

/* Form Elements */

main input, textarea, select {
    color: var(--formcolor);
    background: var(--formbg);
    border: 1px solid;
}

main button {
    color: var(--buttoncolor);
    background: var(--buttonbg);
    border: 1px solid;
}

/* Lists */

main ul, ol {
    background: rgba(255, 255, 255, 0.4);
    border: 3px dotted #fff;
    border-radius: 12px;
    text-indent: 0.5rem;
    vertical-align: middle;
}


main li {
    background: rgba(218, 191, 255, 0.5);
    border-bottom: 3px dotted #fff;
    border-radius: 12px;
    list-style-image: url(../img/assets/Pachirisu.gif);
    background-position: left center middle;
    background-size: 20px;
    list-style-type: circle;
	vertical-align: middle;
}

/*  Tables  */
th {
    border-radius: 10px 10px 0px 0px;
    border-top: 2px dotted white;
    border-left: 2px dotted white;
    border-right: 2px dotted white;
    border-bottom: 2px dotted rgba(255, 255, 255, 0.4);
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0px;
}

td {
    border-left: 2px dotted white;
    border-right: 2px dotted white;
    border-bottom: 2px dotted rgba(255, 255, 255, 0.4);
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0px;
}

th, td {
    color: #3d3d3d;
    font-size: 1rem;
    background-color: #dabfff;
    vertical-align: middle;
    border-spacing: 0;
    border-collapse: collapse;
    padding: 5px;
}

/* Navigation Bars - Left & Right */

.menu {
    font-family: var(--navheader);
    background: var(--navbg);
    background-clip: padding-box;
    border: 15px solid transparent;
    border-image: url(../img/assets/borders/lace.png) 50 round; /* Border pattern around navigation bars */
}

/* .menu section {
    NO RULE
} */


.menu .text p {
    font-family: var(--bodyfont2);
    color: var(--navcolor);
}

.menu .text a {
    color: var(--navtextlink);
    text-decoration: none;
}

.menu .text a:hover {
    cursor: pointer;
    position: relative;
    color: var(--navtexthover);
    text-decoration: underline;
}


.menu ul {
    list-style: none;
}

.menu li a {
    background: #DABFFF;
    background: linear-gradient(90deg,rgba(218, 191, 255, 1) 0%, rgba(218, 191, 255, 1) 10%, rgba(218, 191, 255, 0) 100%);
    border-bottom: 2px dotted var(--borders);
    border-radius: 5px;
    text-decoration: none;
}

.menu li a:hover {
    transition: 300ms, background-color 300ms;
    background: url(../img/assets/Skitty-1.gif) no-repeat right;
    background-color: #beb0ee;
    border-radius: 5px;
    text-decoration: none;
    font-size: 130%;
    text-indent: 0.5rem;
    -webkit-text-stroke: 5px white;
    paint-order: stroke fill;
}

.menu h2 {
    font-family: var(--navheader);
    color: var(--navcolor)
}

/* Footer styling */

footer {
    text-align: center;
    background: var(--footerbg);
    color: var(--footercolor);
    background-clip: padding-box;
    border: 15px solid;
    border-image: url(../img/assets/borders/lace.png) 50 round;
}

footer a {
    color:var(--footerlink);
    text-decoration:underline;
}

footer a:hover {
    color:var(--footerhover);
    text-decoration:none;
}

/* Accessibility - UNTESTED */
#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--mainbg);
    color:var(--link);
    z-index:1100;
    padding:5px;
}

#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

.desktopmenulink { display:inline; }
.mobilemenulink { display:none; }

@media screen and (max-width: 799px) {
    #container {
        width:calc(100 - 20px);
        margin-top:50px;
    }
    
    #columns {
        display:block;
    }
    
    main {
        margin:auto;
        width:calc(100% - 30px);
    }
    
    #left {
        display:none;
    }
    
    #burger {
        display:block;
    }
    
    #right {
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-gap:5px;
        width:calc(100% - 20px);
        margin-top:10px;
    }

    .desktopmenulink { display:none; }
    .mobilemenulink { display:inline; }
}