@font-face {
    font-family: 'Aeonik Bold';
    src: url('/fonts/AeonikTRIAL-Bold.otf') format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: 'Aeonik Bold Italic';
    src: url('/fonts/AeonikTRIAL-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Aeonik Light';
    src: url('/fonts/AeonikTRIAL-Light.otf') format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'Aeonik Light Italic';
    src: url('/fonts/AeonikTRIAL-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Aeonik Regular';
    src: url('/fonts/AeonikTRIAL-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Aeonik Regular Italic';
    src: url('/fonts/AeonikTRIAL-RegularItalic.otf') format('opentype');
    font-style: italic;
}

:root {
    /* ===== Colors ===== */
    --body-color: #000000;
    --primary-color: #c549fa;
    --text-color: #fff;
    --background-color: linear-gradient(to bottom, rgba(120, 0, 94, 0.5) 0%, rgba(6, 0, 73, 0.5) 80%);

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;

    /* ====== spacing ====== */
    --overal-padding: 2em 0 0 5.5em;
}

/* general ejs styling */

::selection {
    background-color: var(--primary-color);
    color: #fff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family: 'Aeonik Regular', sans-serif;
    text-shadow:
			-2px 0 var(--primary-color),
			2px 0 var(--primary-color),
			0 2px var(--primary-color),
			0 -2px var(--primary-color);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

body {
    background-color: var(--body-color);
    transition: var(--tran-05);
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    overflow: hidden;
}

body.alter{
    --body-color: #000000;
    --primary-color: #b400ab;
}

h1{
    font-size: 2em;
    line-height: 1;
}

h2{
    line-height: 1;
}

/* main +page.svelte */

.profile-card.alter-image {
    background-image: url("https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExbDBlZDVwcTZmNmx5dHo0b242YzlpNGlraDlhZTdtbHZyZGx2aHY2dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/iI4vhciiVh2b3j9sgo/giphy-downsized-large.gif") !important;
}