:root{
    --lace:var(--black); /* change black to the color you want */ 
    /* options are: pink, black, blue, yellow, purple */
    --pink:url("https://files.catbox.moe/bsr34l.png");
    --black:url("https://files.catbox.moe/stv815.png");
    --blue:url("https://files.catbox.moe/pweyk3.png");
    --yellow:url("https://files.catbox.moe/r3ub8h.png");
    --purple:url("https://files.catbox.moe/acs8xi.png");
}

/****** fonts ******/
@font-face{
    font-family:"Scratch Boys";
    src:url(https://files.catbox.moe/1sb02z.ttf);
}

@font-face{
    font-family:"Cerl";
    src:url(https://dl.dropbox.com/s/vaz4fe5yzk1uiku/CHERL___.TTF);
}

@font-face{
    font-family:"Adorable Doll";
    src:url(https://dl.dropbox.com/s/plehp3a9xbtct7n/AdorableDoll.ttf);
}

@font-face{
    font-family:"Vintage";
    src:url(https://files.catbox.moe/nwq0cf.ttf);
}

/****** scrollbar ******/
::-webkit-scrollbar{
    display:none;
}

/****** select hightlight ******/
::selection{
    background:#7053d0;
    color:white;
}

::-moz-selection{
    background:#7053d0;
    color:white;
}

/****** body ******/
body{
    background-color:#ffffff;
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    color:#7053d0; /* default font color */
    font-family:"MS Gothic"; /* default font */
    font-size:20px; /* default font size */
    padding:10px;
    background-image:linear-gradient(#7053d0 1px, transparent 1px), linear-gradient(to right, #7053d0 1px, #c3bcfa 1px);
    background-size:20px 20px;
}

/****** links ******/
a{
    text-decoration:none;
    color:#fff;
    transition:0.3s;
    text-shadow:-1px 0 #7053d0, 0 1px #7053d0, 1px 0 #7053d0, 0 -1px #7053d0;
}

a:hover{
    cursor:help;
    transition:0.3s;
    color:#7053d0;
    text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

/****** wrappers ******/
#wrapper{
    animation:fadeEffect 1s;
    margin:auto;
    width:fit-content;
    width:-moz-fit-content;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    position:absolute;
}

@keyframes fadeEffect{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/****** containers ******/
.container{  
    display:grid;
    margin:auto;
    width:1000px;
    grid-template-columns:250px 1fr 1fr 250px;
    grid-template-rows:250px 250px 0.1fr;
    gap:10px 10px;
    grid-auto-flow:row;
    grid-template-areas:
    "icon main main links"
    "updates main main box"
    "footer footer footer footer";
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round; 
}

.main{ 
    grid-area:main;
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round; 
    padding:10px;
    overflow:auto;
}

.icon{ 
    grid-area:icon;
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round; 
    padding:10px;
}

.icon img{
    width:100%;
    display:block;
    height:auto;
}

.updates{ 
    grid-area:updates; 
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round;
    padding:10px;
    overflow:auto;
    line-height:130%;
}

.links{ 
    grid-area:links; 
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round; 
    padding:10px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.box{ 
    grid-area:box; 
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round;
    padding:10px;
}

.footer{
    grid-area:footer;
    text-align:center;
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round;
}

header{
    text-align:center;
    font-family:"Adorable Doll";
    font-size:40px;
    margin-bottom:10px;
}

.cornerimg{
    position:absolute;
    bottom:0;
    right:0;
}

.highlight{
    background-color:#7053d0;
    color:white;
}