styles.css

/* =================
    ROOT: 
    CSS VARIABLES HERE
================= */

/* Typography variables */

/* Colour Variables */
:root {

/* Typography variables */


/* Colour Variables */
    --main-bg-colour: hsl(222, 87%, 6%);
    --secondary-bg-colour: hsl(187, 91%, 18%);
    --main-accent-colour:  hsl(150, 17%, 68%);
    --secondary-accent-colour: hsl(48, 41%, 83%);
    --alice-blue-colour: hsl(202, 50%, 59%);
   
}

/* HTML defaults */
html {
    scroll-behavior: smooth;
}

/* =================
    BODY
================= */
@font-face {
    font-family: 'Alice in Wonderland';
    src: url('assets/fonts/Alice_in_Wonderland_3.ttf');
}
/* elements */
body {
    background-color: var(--main-bg-colour);
    color: var(--secondary-accent-colour);
    font-family: 'Alice in Wonderland';
}

header {
    overflow: hidden;
}

/* ids */

/* classes */
a.skip-to-main {
    position: absolute;
    color: rgb(94, 94, 245);
    border-radius: 0 0 0.1rem 0.1rem;
    background-color: white;
    padding: .25rem .5rem;
    left: 0.5rem;
    transform: translateY(-200%);
    transition: transform 200ms ease-in;
}

a.skip-to-main:focus {
    transform: translateY(0%);
}


/* =================
    TYPOGRAPHY 
================= */

/* elements */

/* ids */

/* classes */

/* ================= 
    LAYOUT 
================= */
/* elements */

/* ids */

/* classes */

/* Navigation */

/* Media Queries */