/* ==VARIABLES== */
:root {
    --doggo-icon-size: 50px;
    --color-pop-bright: #e77b39;
    --highlight-color: #a4a5a4;
}

/* ==CSS RESET== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

/* ==FONTS== */
@font-face {
    font-family: 'psl_ornanong_pro';
    src: url('../media/fonts/pslornanong1pro-webfont.woff2') format('woff2'),
         url('../media/fonts/pslornanong1pro-webfont.woff') format('woff'),
         url('../media/fonts/pslornanong1pro-webfont.svg#psl_ornanong_prolight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'psl_ornanong_pro';
    src: url('../media/fonts/pslornanong1probold-webfont.woff2') format('woff2'),
         url('../media/fonts/pslornanong1probold-webfont.woff') format('woff'),
         url('../media/fonts/pslornanong1probold-webfont.svg#psl_ornanong_prodemibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gill_sans';
    src: url('../media/fonts/gillsans-light-webfont.woff2') format('woff2'),
         url('../media/fonts/gillsans-light-webfont.woff') format('woff'),
         url('../media/fonts/gillsans-light-webfont.svg#gill_sanslight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gill_sans';
    src: url('../media/fonts/gillsans-semibold-webfont.woff2') format('woff2'),
         url('../media/fonts/gillsans-semibold-webfont.woff') format('woff'),
         url('../media/fonts/gillsans-semibold-webfont.svg#gill_sanssemibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ==STYLE== */
/* --fonts-- */
body {
    font-family: 'psl_ornanong_pro', sans-serif;
    line-height: 0.9;
    font-size: 22px;
    font-weight: 300;
}

/* --general-- */
.clickable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

/* --dog icon-- */
.bottom-left-icon, .bottom-right-icon {
    width: var(--doggo-icon-size);

    position: fixed;
    bottom: 30px;
}


.bottom-left-icon {
    left: 40px;
}

.bottom-right-icon {
    right: 40px;
}

.mirrored {
    transform: scaleX(-1);
}




.credit {
    margin-bottom: 10px;
    margin-top: 100px;

    font-size: 8pt;
    color: var(--color-soft);
    text-align: center;

    a {
        color: var(--color-soft);
    }
}

/* ==TODO== */
.todo {
    margin-top: 500px;
    background-color: var(--highlight-color);
    color: orange;
    font-family: sans-serif;
    font-size: 16px;
}