/* ======================================
   ✦ Font Imports
====================================== */

@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: 'Sour Gummy', sans-serif; */

@font-face {
    font-family: 'adeliaregular';
    src: url('/fonts/adelia/adelia-webfont.woff2') format('woff2'),
         url('/fonts/adelia/adelia-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* ======================================
   ✦ Variables
====================================== */
:root {
    --background-colour: #F0F0F0;

    --text-colour: #a5947f;
    --bold-text-colour: #695b4b;


    --white-colour: #F9F8F6;
    --semi-white-colour: #f8f8f8cc;
    --pink-colour: #ff4986;
    --dark-pink-colour: #c3275b;
    --red-colour: #DD2E44;
    --orange-colour: #F4900C;
    --yellow-colour: #FDCB58;
    --green-colour: #78B159;
    --blue-colour: #55ACEE;
    --beige-colour: #EBE5DF;
    --brown-colour: #A9746E;
    --dark-grey-colour: #333333;
    --purple-colour: #9B51E0;
}

/* ======================================
   ✦ General
====================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--background-colour);
    background-size: 150px;
    font-family: "Sour Gummy", sans-serif;
    padding-top: 20px;
}

/* ======================================
   ✦ Typography
====================================== */
h1 {
    color: var(--red-colour);
    font-family: "Adelia", sans-serif;
}

/* Rainbow Header */
h1 span:nth-child(2), h1 span:nth-child(9) {
    color: var(--red-colour);
}

h1 span:nth-child(3), h1 span:nth-child(10) {
    color: var(--orange-colour);
}

h1 span:nth-child(4), h1 span:nth-child(11) {
    color: var(--yellow-colour);
}

h1 span:nth-child(5), h1 span:nth-child(12) {
    color: var(--green-colour);
}

h1 span:nth-child(6) {
    color: var(--blue-colour);
}

h1 span:nth-child(7) {
    color: var(--purple-colour);
}

h1 span:nth-child(8) {
    color: var(--pink-colour);
}

h2 {
    color: var(--brown-colour)
}

/* ******************** */
.icon {
    color: var(--brown-colour);
    font-weight: bold;
    left: -20px;
    position: absolute;
    width: 85px;
    height: 85px;
    top: -5px;
    transform: rotate(15deg);
    opacity: 0.3;
    z-index: -1;
}

p {
    color: #a5947f;
}

.boldtext {
    color: var(--bold-text-colour);
    font-weight: bold;
}

/* ======================================
    ✦ Colours
====================================== */


/* ======================================
   ✦ Navigation
====================================== */
/* Navigation Bar */
nav {
    padding: 20px 0;
}

nav ul {
    display: flex;
    gap: 20px;
    justify-content: center;
}

nav ul li, .card ul li {
    list-style: none;
}

.card ul {
    color: var(--text-colour);
    padding-left: 0;
}

.card li {
    padding-left: 1em;
    position: relative;
}

.card li::before {
    content: "› ";
    font-weight: bold;
    color: var(--bold-text-colour);
    left: 0;
    position: absolute;
}

.no-bullet::before {
    display: none;
}

nav ul li a {
    align-items: center;
    background-color: var(--background-colour);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 15px;
    text-decoration: none;
    transition: 0.5s;
}

.redbutton {
    color: var(--red-colour);
}

.redbutton:hover {
    background: var(--red-colour);
    color: var(--white-colour)
}

.orangebutton {
    color: var(--orange-colour);
}

.orangebutton:hover {
    background: var(--orange-colour);
    color: var(--white-colour);
}

.yellowbutton {
    color: var(--yellow-colour);
}

.yellowbutton:hover {
    background: var(--yellow-colour);
    color: var(--white-colour);
}

.greenbutton {
    color: var(--green-colour);
}

.greenbutton:hover {
    background: var(--green-colour);
    color: var(--white-colour);
}

.bluebutton {
    color: var(--blue-colour);
}

.bluebutton:hover {
    background: var(--blue-colour);
    color: var(--white-colour);
}

/* ======================================
   ✦ Content
====================================== */

.card {
    background-color: transparent;
    border-color: transparent;
    margin: 0 auto;
    max-width: 800px;
    padding: 1rem;
}


/* ======================================
   ✦ Trinkets
====================================== */
@media screen and (max-width: 380px) {

    h1 {
        text-align: center;
    }
}