@font-face {
    font-family: kids;
    src: url('../font/Kids/Kids-Magazine.ttf');
}

/* Light Theme */
:root{
    --xlarge :30px;
    --large: 20px;
    --normal: 14px;
    --small:12px;
    --xsmall:10px;

    --prim:#ede961;
    --prim-dark:rgb(201, 131, 3);
    --prim-light:rgb(255, 225, 160);

    --sec:#003e3b;
    --sec-dark:#021d1b;
    --sec-light:#2d9b95;

    --accent:rgb(201, 131, 3);
    --accent-dark:rgb(182, 105, 17);
    --accent-light:rgb(252, 215, 147);

    --light:rgb(255, 255, 255);
    --lightx1:rgb(235, 235, 235);
    --lightx2:rgb(214, 214, 214);

    --dark:rgb(0, 0, 0);
    --darkx1:rgb(36, 36, 36);
    --darkx2:rgb(95, 95, 95);

    --danger:rgb(255, 2, 57);
    --dangerx1:rgb(255, 111, 142);
    --dangerx2:rgb(255, 163, 183);
    
    --shadow:rgb(206, 206, 206);
    --gradient:linear-gradient(300deg, var(--prim) 0%, var(--sec) 100%);

    --main-font:kids;
}

/* Removes spacing from text elements */
.no-spacing{margin: 0; padding: 0;}
.bold-header{font-weight: bold;}

/* Flex spacing */
.m-flex{display: flex; flex-wrap: wrap;} /*My Flex to prevent forced display */
.gap-x1{gap:10px;}
.gap-x2{gap:20px;}
.gap-x3{gap:30px;}

/* template background definition */
.bg-prim{background-color:var(--prim);}
.bg-prim-dark{background-color:var(--prim-dark);}
.bg-prim-light{background-color:var(--prim-light);}
.bg-sec-light{background-color:var(--sec-light);}
.bg-sec-dark{background-color:var(--sec-dark);}
.bg-sec{background-color:var(--sec);}
.bg-accent{background-color:var(--accent);}
.bg-accent-light{background-color:var(--accent-light);}
.bg-accent-dark{background-color:var(--accent-dark);}
.bg-light{background-color:var(--light);}
.bg-dark{background-color:var(--dark);}
.bg-grad{background:var(--gradient);}
.bg-glass{backdrop-filter: blur(50px);}

/* Does hover effect for template background with hover class */
.hover-prim:hover{background-color:var(--prim-dark);}
.hover-sec:hover{background-color:var(--sec-dark);}
.hover-accent:hover{background-color:var(--accent-dark);}
.hover-grad:hover{background: var(--gradient); color: var(--light);}
.hover-glass:hover{backdrop-filter: blur(50px);}
.hover-dark:hover{background-color:var(--dark); color: var(--light);}
.hover-light:hover{background-color:var(--light); color: var(--dark);}
.hover-danger:hover{background-color:var(--danger); color: var(--light);}
.hover-outline-light:hover{border: 1px solid var(--light);}
.hover-outline-dark:hover{border: 1px solid var(--dark); }
.hover-fx1:hover{}
.hover-fx2:hover{}
.hover-fx3:hover{}

/* For custom font sizes */
.font-s1{font-size: var(--xsmall);}
.font-s2{font-size: var(--small);}
.font-s3{font-size: var(--normal);}
.font-s4{font-size: var(--large);}
.font-s5{font-size: var(--xlarge);}

.main-font{font-family: var(--main-font); text-transform: uppercase;}

/* Quick boxes */
.box-x1{height: 30px; width: 30px; display: grid; place-items: center;}
.box-x2{height: 50px; width: 50px; display: grid; place-items: center;}
.box-x3{height: 80px; width: 80px; display: grid; place-items: center;}
.box-x4{height: 100px; width: 100px; display: grid; place-items: center;}
.box-x5{height: 200px; width: 200px; display: grid; place-items: center;}


/* Border radius variations */
.outlined-light{border: 1px solid var(--light);}
.outlined-dark{border: 1px solid var(--dark);}

.rounded-x1{border-radius: 2px;}
.rounded-x2{border-radius: 5px;}
.rounded-x3{border-radius: 10px;}
.rounded-x4{border-radius: 20px;}
.rounded-x5{border-radius: 50px;}
.circular{border-radius: 50%;}

/* Colours  */
.col-prim{color:var(--prim);}
.col-sec{color:var(--sec);}
.col-accent{color:var(--accent);}
.col-light{color:var(--light); }
.col-dark{color:var(--dark);}

.clip-content{overflow: hidden;}

/* Images */
.fit-cover{width: 100%; height: 100%; object-fit: cover;}
.fit-contain{width: 100%; height: 100%; object-fit: contain;}

/* Cards */
.card-rounded-large{height: 300px; width: 300px; display: grid; place-items: center;
border-radius: 50%;}

.hidden{display: none;}


/*Normal tablet screens */
@media screen and (max-width: 1315px) {

    .font-s1{font-size: calc(var(--xsmall) - 2px);}
    .font-s2{font-size: calc(var(--small) - 2px);}
    .font-s3{font-size: calc(var(--normal) - 2px);}
    .font-s4{font-size: calc(var(--large) - 5px);}
    .font-s5{font-size: calc(var(--xlarge) - 6px);}

}

/* Desktop screens */
@media  screen and (min-width:1315px) {
    
}