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

:root {
    --max-width:76.25rem;
    --header-height:5.25rem;


    --grey:#232428;
    --white:white;
    --gold:linear-gradient(90deg, #fec519 0%, #fde770 24%, #fcec77 34%, #fddd3a 100%);
    --gold-acnt:#fec519;
    --gold-glow:0px 0px 1rem rgba(254, 197, 25, 0.6);
    --gold-glow-2:0px 0px 0.5rem rgba(254, 297, 25, 1);
    --shadow:0px 0px 4px rgba(0,0,0,0.3);
    --shadow-2:0px 2px 4px rgba(0,0,0,0.3);
}

/* Generic Styles */

*, *::before, *::after {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Montserrat';
}

html {
    scroll-behavior: smooth;
}

body {
    background:#232428;
    overflow-x:hidden;
}

main {
    padding-top:var(--header-height);
    color:white;
    text-shadow:0px 0px 2px rgba(0,0,0,0.3);
}

strong {
    font-weight:500;
    text-shadow: var(--gold-glow);
}

em {
    font-style: italic;
    text-shadow: var(--gold-glow);
}

h2 {
    text-align: center;
    text-wrap: balance;
    padding:2rem 1rem 0.5rem 1rem;
}
h3 {
    text-align: center;
    text-wrap: balance;
    padding:1.5rem 1rem 0.3rem 1rem;
}
h2:first-child,
h3:first-child {
    padding-top:0;
}

p {
    padding-inline:2rem;
    max-width:40rem;
    max-width:65ch;
    margin-inline:auto;
    text-wrap:pretty;
}

img {
    pointer-events: none;
}






/* Specific Styles */

button.cta {
    margin:2rem auto;

    background-image:var(--gold);
    padding:.4rem .6rem 0.4rem 0.75rem;
    border:none;
    border-radius:0.5rem;
    color:#232428;
    box-shadow: var(--shadow);
    text-shadow: none;

    font-weight:500;
    font-size:1.1rem;

    display:flex;
    align-items:center;
    gap:0.5rem;

    transition:box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

button.cta svg {
    fill:var(--grey);
    width:1.5rem;
}

button.cta:hover,
button.cta:focus {
    cursor:pointer;
    box-shadow: var(--gold-glow);
    transform:translateY(-.125rem) scale(102%);
}

button.a {
    background:transparent;
    border:none;
    font-size:inherit;
    color:inherit;
    cursor:pointer;
}

a.cta {
    text-decoration: none;
}


.link.insta,
.link.link.linked-in,
.link.x {
    text-decoration: none;
}

.link.insta svg,
.link.linked-in svg,
.link.x svg {
    height:1.75rem;
    fill:white;
    filter: drop-shadow( var(--shadow));
    -webkit-filter: drop-shadow( var(--shadow));
    transition:fill 0.3s ease-in-out;
}


.link.insta:hover svg,
.link.insta:focus svg {
    fill:#dd2a7b;
    filter: drop-shadow( 0px 0px 4px rgba(221, 42, 123,0.3));
    -webkit-filter: drop-shadow( 0px 0px 4px rgba(221, 42, 123,0.3));
}

.link.linked-in:hover svg,
.link.linked-in:focus svg {
    fill:#0077b5;
    filter: drop-shadow( 0px 0px 4px rgba(0, 119, 181,0.3));
    -webkit-filter: drop-shadow( 0px 0px 4px rgba(0, 119, 181,0.3));
}

.link.x:hover svg,
.link.x:focus svg {
    fill:#1d9bf0;
    filter: drop-shadow( 0px 0px 4px rgba(29, 155, 240,0.3));
    -webkit-filter: drop-shadow( 0px 0px 4px rgba(29, 155, 240,0.3));
}