* { box-sizing: border-box; }

body {
    font: 16px/1.6 "Avenir", "Helvetica", Arial, sans-serif;
    padding: 0;
    margin: 0;
}
main, .container {
    padding: 1rem;
    margin: 0 auto;
    max-width: 75ch;
}
header, footer {
    background-color: #f9f9f9;
    padding: 2rem 0;
}
footer {
    padding-bottom: 6rem;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: 900;
}
h1 {
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="lightgrey" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') no-repeat calc(100% - 1.5rem) center;
    border: 1px solid lightgrey;
    padding: 0.5rem 1.5rem;
    font-size: 3rem;
}
h2 {
    margin: 3rem 0 2rem;
}
p.multi {
    column-count: 2;
    column-gap: 2rem;
}
.center { text-align: center; }
a,a:visited {
    color: #002CFC;
}
a:hover {
    color: rebeccapurple;
}
img {
    border: 1px solid lightgrey;
    width: 100%;
}
.img {
    left: -25%;
    margin: 2rem 0 4rem;
    position: relative;
    width: 150%;
}
.img:before {
    bottom: -10px;
    background: black;
    opacity: 0.2;
    content:'';
    filter: blur(10px);
    height: 50%;
    left: 1%;
    position: absolute;
    width: 98%;
    z-index: -1;
}

/* Blinking Cursor */
.blinking-cursor {
font-weight: 100;
line-height: 0.5;
color: #2E3D48;
position: relative;
top: -5px;
user-select: none;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}

@keyframes "blink" {
from, to {
    color: transparent;
}
50% {
    color: black;
}
}

@-moz-keyframes blink {
from, to {
    color: transparent;
}
50% {
    color: black;
}
}

@-webkit-keyframes "blink" {
from, to {
    color: transparent;
}
50% {
    color: black;
}
}

@-ms-keyframes "blink" {
from, to {
    color: transparent;
}
50% {
    color: black;
}
}

@-o-keyframes "blink" {
from, to {
    color: transparent;
}
50% {
    color: black;
}
}

@media(max-width:1000px) {
    h1 {
        font-size: 2rem;
        line-height: 3rem;
        padding: 0.5rem 1rem;
    }
    .blinking-cursor {
        top: -3px;
    }
    .img {
        left: 0;
        width: 100%;
    }
}
@media(max-width:500px) {
    h1 {
        background-size: 20px;
        font-size: 1.4rem;
        padding: 0.5rem 3rem 0.5rem 1rem;
    }
    p.multi {
        column-count: 1;
        column-gap: 0;
    }
}
@media(max-width:320px) {
    h1 {
        background-size: 20px;
        font-size: 1.2rem;
        padding: 0.5rem 3rem 0.5rem 1rem;
    }
}