@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');

:root{
    --font-sans:"Roboto", sans-serif;
    --font-display:"Gabarito", sans-serif;

    --black:#262626;
    --white:#FFFFFF;
    --red:#EC0B43;
    --yellow:#FFBC42;
    --blue:#0353A4;
    --light-blue:#3699FC;

    --gutter-l:2rem;
    --gutter-r:4rem;
}

html{
    scroll-behavior: smooth;
}

.top{
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: fixed;
    background-color: var(--blue);
    bottom: 40px;
    right: 40px;
    z-index: 100;
    border-radius: 100%;
}

.top:hover{
    background: var(--red);
    transform: scale(1.2);  
}

.top:active{
    background: var(--yellow);
    color:var(--black);
}

p{
    font-family:var(--font-sans);
    color: #262626;
    font-size: 1.2rem;
    line-height: 2;
    font-weight: 400;
    padding-left: 33%;
    margin-block: 3rem;
}

h1{
    font-family:var(--font-display);
    font-size: 10rem;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1;
}

.stacked-title{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    padding-left:1.8rem;
    border-left:24px solid transparent;
    border-image: linear-gradient(
    to bottom,
    #EC0B43 0 33%,
    #FFBC42 33% 66%,
    #0353A4 66% 100%
  ) 1;
}

/* Wanted to make my header interactive so I just Googled "fun interactions you can add to your website with CSS" */
.stacked-title span:hover {
    cursor: pointer;
    filter: brightness(1.1); 
    transition: all 0.3s ease;
    transform: scale(1.05) translateY(-2px);
}

h2{
    font-family:Gabarito;
    font-size:3rem;
    font-weight:600;
    position:sticky;
    top:2rem;
    z-index: 1;
    inline-size:50%;
    min-inline-size:16rem;
    max-inline-size:22rem;
    background: white; 
}

h3{
    font-family: Gabarito;
    font-size:2.5rem;
    font-weight:800;
}

.bold-text {
    font-family: var(--font-sans);
    font-size: 1.2rem;  
    font-weight: 700;
}

.italicize-text {
    font-family: var(--font-sans);
    font-style: italic;
    line-height: 2;
}

header > p,
header > p.bold-text,
header > p > time {
    margin-block: 1.5rem;
}

.red{
    color:var(--red)
}

.yellow{
    color:var(--yellow)
}

.blue{
    color:var(--blue)
}

.white{
    color:var(--white)
}

.black{
    color:var(--black)
}

a.red, 
a.yellow, 
a.blue {
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a.red{
    text-decoration-color: var(--red); 
    &:hover{
        color: var(--white);
        background: var(--red);
    }
}

a.yellow{
    text-decoration-color: var(--yellow);
    &:hover{
        color: var(--black);
        background: var(--yellow);
    }
}
a.blue{
    text-decoration-color: var(--blue); 
    &:hover{
        color: var(--white);
        background: var(--blue);
    }
}

.outline{
  color: var(--white);
  letter-spacing: 0.05em;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px; 
}

.outline.red    { -webkit-text-stroke-color: var(--red); }
.outline.yellow { -webkit-text-stroke-color: var(--yellow); }
.outline.blue   { -webkit-text-stroke-color: var(--blue); }

blockquote{
    margin-inline: 0rem;
    margin-block: 4rem;
}

blockquote p{
    font-weight: 600;
    font-size:1.8rem;
    font-style: italic;
    max-inline-size: 100ch;
    margin-inline: initial;
    padding-left: 0rem;
    font-style: italic;
    font-weight: 600;
    margin-block:1rem;
}

blockquote footer {
    line-height: 1.8;
    font-size: 1rem; 
    font-family: Roboto;
    font-weight: 600;
    font-size:2rem;
    font-style: italic;
}

.blockquote{
    padding-left: 1.5rem;
    border-left: 6px solid;
    margin-inline-start:50%;
}

.blockquote::before{
    content: "“";
    font-family: Gabarito;
    font-style:normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    position: relative;
    left: -0.75rem;
    right:1rem;
    top: 0.25rem;
}

.grey-bg{
    background-color:#D9D9D9;
    margin-inline:-2rem;
    margin-block-end:-2rem;
    padding-inline: 8rem;
    padding-block-start: 6rem;
    padding-block-end: 2rem;
}

article.black p {
    min-inline-size: 40ch;
    max-inline-size: 80ch;
}

article.black > h1.white {
    padding-block-start: 1rem;
    padding-block-end: 2rem;
}

header{
    margin-top: 60px;
    margin-bottom: 80px; 
    padding-left: 100px;
    padding-right: 120px;
}

header>p{
    padding-left:0px;
    line-height:1;
}

section:not(:first-child){ 
    margin-block: 200px;
    padding-inline-start: 100px;
    padding-inline-end: 150px;
}

section:first-child{ 
    margin-block: 80px; 
    padding-inline-start: 100px;
    padding-inline-end: 150px;
}

h2.subhead{
    text-align:end;
    inline-size: auto;
    min-inline-size: auto;
    max-inline-size: none;
    margin-block-start: 2rem;
    margin-block-end: 2rem;
    position:relative;
}

small {
    max-inline-size: 100ch;
    font-size: 1.2rem;
    line-height: 1.5;
    
}

body>footer{
    margin-inline:-2rem;
    margin-block-end:-2rem;
    padding-inline-start: 8rem;
    padding-inline-end:2rem;
    padding-block:2rem;
    color:white;
    background-color: black;
}

.drop-cap::first-letter{
    font-family:Gabarito;
    font-size:3rem;
    font-weight:600;
    line-height: 1;
}

section > h2.red ~ p.drop-cap::first-letter{
    color: var(--red);
}
section > h2.yellow ~ p.drop-cap::first-letter{
    color: var(--yellow);
}
section > h2.blue ~ p.drop-cap::first-letter{ 
    color: var(--blue); 
}

.response p{
    font-family: var(--font-sans);
    color: var(--black);
    font-weight: 400;
    line-height:2rem;
    padding-left: 0rem;
    margin-block: 3rem;
}

.multicolor-border{
    border-left: 12px solid transparent;
    border-image: linear-gradient(
    to bottom,
    var(--red) 0 33%,
    var(--yellow) 33% 66%,
    var(--blue) 66% 100%
    ) 1;
    padding-left: 1rem;
}

section > p.drop-cap::first-letter{
    color: var(--red);
}

.nowrap {
  white-space: nowrap;
}
/* Got it from my new best friend MDN*/