:root{
    --lace:var(--blue); /* 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:"rodin";
    src:url(newrodin.otf);
	
}@font-face{
    font-family:"KusukusuAme";
    src:url(kusukusuame-Regular.otf);
}

@font-face{
    font-family:"Nugget";
    src:url(AudioNugget.ttf);
}

h1{
	font-family: "Nugget";
	text-align: center;
}

h2{
	font-family: "Nugget";
	text-align: center;
}
h3{
	font-weight:bold;
	text-align: center;
}

/****** 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:"KusukusuAme"; /* default font */
    font-size:20px; /* default font size */
    padding:10px;
    background-image: url('bg/96.gif');
}

img:hover { cursor: pointer; }

/****** links ******/
a{
    text-decoration:none;
   color:#7053d0;
    transition:0.3s;
}

a:hover{
    cursor:help;
    transition:0.3s;
    color:#b5e9ff;
    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:1400px;
    grid-template-columns:250px 1fr 1fr 250px;
    grid-template-rows:250px 250px 0.1fr;
    gap:10px 10px;
    grid-auto-flow:row;
    grid-template-areas:
    "main main main links"
    "main main main links"
    "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;
}

.links{ 
font-family:rodin;
    grid-area:links; 
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round; 
    padding:5px;
    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:"Nugget";
    font-size:25px;
    margin-bottom:10px;
}

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

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