/* ------------------- */
/* Custom Properties   */
/* ------------------- */

:root {
    /*  Fonts ----- */
    --font-josefin: "Josefin Sans", sans-serif;
    --font-voltaire: "Voltaire", sans-serif;

    /* Typography ----*/
    --font-size-big: large;
    /* Colours ----- */
    --clr-orange1: #E7691C;
    --clr-orange2: #F0A170;
    --clr-silverscreen: silver;
    --clr-black-almost: #100101;
    --clr-black-shadow: rgba(0,0,0,0.25);
}




/* ------------------- */
/* Reset               */
/* ------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

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

/* Reset margins */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
    margin: 0;
}

/* set up the body */
body {
    line-height: 1.5;
    min-height: 100vh;
}

/* make images easier to work with */
img,
picutre {
    max-width: 100%;
    display: block;
}

/* make form elements easier to work with */
input,
button,
textarea,
select {
    font: inherit;
}

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================
Typography
================= */

h1, h2, h3 {
    font-family: var(--font-voltaire);
    padding: 1em 0;
}
h1 {
    color: var(--clr-orange1);
    font-size: 6rem;
    padding: 0em 2em;
}

h2 {
    color: var(--clr-silverscreen);
}

body {
    background-color: var(--clr-black-almost);
    color: var(--clr-silverscreen);
    font-family: var(--font-josefin);
}

li {
    color: var(--clr-silverscreen);
}

.uppercase {
    text-transform: uppercase;
}

.text-orange {
    color: var(--clr-orange1);
}

.slogan {
    font-size: 4rem;
}

/* =================
Layout
================= */

/* body {
    display: grid;
    grid-template-columns: repeat(auto, minmax(200px, 300px));
} */

img {
    max-width: 100%;
}

video {
    max-width: 100%;
}
/* utility classes */

.bg-toronto {
    background-image: url(/assets/ashwini-chaudhary-monty-plhV-L829_I-unsplash.jpg);
}

.container {
    padding-inline: 2em;
    margin-inline: auto;
    max-width: 80rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

.services-card {
    box-shadow: 0 0 1em var(--clr-black-shadow);
    padding: 1em;
    background: var(--clr-orange1);
    margin: 1em;
}

.services-card-title {
    font-size: 1.5rem;
    color: var(--clr-black-almost);
    text-shadow: var(--clr-orange2) 1px 0 10px;
}

.portfolio {
    display: grid;
    grid-template-columns: repeat(auto, minmax(200px, 300px));
    padding: 1em;
    grid-gap: 1em;
}

.portfolio-title {
    text-align: center;
    color: var(--clr-orange1);
    grid-column: 1/-1;
}

.portfolio-card {
    box-shadow: 0 0 1em var(--clr-black-shadow);
    padding: 1em;
    background: var(--clr-orange2);
    margin: 1em;
}

.portfolio-card-title {
    font-size: 1.5rem;
    color: var(--clr-black-almost);
}

.portfolio-card-p {
    color: var(--clr-black-almost);
}
/* navigation */


/* @media */

/* Need to set up grid */