* {
    margin:0; padding: 0; border: 0;
    box-sizing: border-box;
}
/* default styles for the root/html */
:root {
    font-size: 62.5%; /*16px * .625 = 10px root font size */

    /* css variables for site colors */
    --color-bg1: #EEE5E9;
    --color-bg2: #EFC88B;
    --color-font1: #222222;
    --color-accent1: #CF5C36;
}

body {
    background-color: var(--color-bg1);
    color: var(--color-font1);
    font-size: 1.4rem;
}

.photo, .photo::after {
    width: 300px; height: 400px;
    background-image: url(/images/tree2.png);

    background-size: cover; background-position: center;
}

.photo {
    margin: auto auto; position: relative;
}

.photo::after {
    content: ""; display: block;
    position: absolute; top: 400px; left: 0px;
    border: 0px solid red;
    transform: scaleY(-1);
    filter: blur(0px) hue-rotate(-60deg);
}
.photo h1 {
    background-image: linear-gradient(to bottom,rgb(0, 63, 0), rgb(58, 28, 28));
    background-size: cover; background-position: center;
    position:absolute; bottom: 0px; left: 50%;
    outline: 0px solid red;
    font-size: 7em; white-space: nowrap;
    transform: translate(-50%, 50%); z-index: 2;
    padding: 16px 40px;
    display: flex;
    flex-flow: wrap;
    box-shadow: 0px 3px 8px #000;
    transition: all 300ms ease-in-out;
    border-radius: 50px;
   
}

.photo h1:hover {
    box-shadow: 0px 10px 40px #222;
    font-size: 7.2em; white-space: nowrap;
}

.photo h1 a {
    text-decoration: none;
    color: #fff;
    
}