::after ::before a div main p span
https://theforest.link/ The Forest UTF-8 6A2D1E3283348713614E7AC2653B2993 #document html HTML hidden auto visible HEAD #text META charset utf-8 name viewport content width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0 Rediscover the joy of getting lost on the web description TITLE STYLE 
    @font-face{font-family:INT;font-style:normal;font-weight:100 900;src:url(Inter.var.woff2) format("woff2")}*{box-sizing:border-box;padding:0;margin:0;background:0 0;text-decoration:none;outline:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"onum","kern","liga","cv01","cv02","cv03","cv04","cv06","cv09","cv10"}body,html,main{width:100%;font-family: INT, sans-serif}
    
    :root {
        --bg     : hsl(0,0%,9%);
        --button : hsl(0,0%,10%);
        --text   : hsl(0,0%,100%);
        --border : hsl(0,0%,2%);
        --top    : hsl(0,0%,13%);
        --bottom : hsl(0,0%,7%);
        --shadow : hsl(0,0%,5%);
    }

    html {
        background : var(--bg);
    }

    body {
        perspective : 10000px;
        perspective-origin: center center;
    }

    html,body {
        overflow-x : hidden;
        scroll-behavior: smooth;
    }

    main {
        width     : 100%;
        height    : 100vh;
        height    : 100svh;
        display   : flex;
    }

    .buttons {
        margin                : auto;
        display               : grid;
        grid-template-columns : repeat(3,80px);
        grid-template-areas   : "walk walk walk" "plant plant info";
        grid-template-rows    : 60px 60px;
        grid-gap              : 15px;
        transform             : rotateX(30deg) rotateZ(10deg) rotateY(-3deg);
    }

    .walk  { grid-area : walk  }
    .plant { grid-area : plant }
    .info  { grid-area : info  }

    .button {
        background      : var(--button);
        border-radius   : 7px;
        color           : var(--text);
        text-transform  : uppercase;
        text-align      : center;
        font-weight     : 550;
        display         : flex;
        border          : 3px solid var(--border);
        position        : relative;
        box-shadow      : 4px 7px 10px var(--shadow);
        cursor          : pointer;
        appearance      : none;
        align-items     : center;
        justify-content : center;
    }

    .button::before,
    .button::after {
        content  : "";
        position : absolute;
        left     : 0;
        right    : 0;
        height   : 4px;
    }

    .button::before {
        top              : 0;
        background       : var(--top);
        transform-origin : top center;
        border-radius    : 7px 7px 0 0;
    }
    .button::after {
        bottom           : 0;
        background       : var(--bottom);
        transform-origin : bottom center;
        border-radius    : 0 0 7px 7px;
    }

    .button-label {
        font-size     : 14px;
        display       : block;
        margin-bottom : 5px;
    }

    .button:hover::before,
    .button:hover::after {
        transform : scaleY(0);
    }

    .button:hover {
        box-shadow : 0px 3px 5px var(--bg);
        background : var(--bg);
    }

    .button:hover .button-label {
        transform : scale(0.98);
        opacity   : 0.85;
    }

    .button:active .button-label {
        text-shadow : 0px 0px 5px mediumspringgreen;
        color : #d6fdee;
    }

    #info {
        margin      : 0 auto 25vh;
        max-width   : 60ch;
        color       : lightgray;
        font-weight : 550;
        font-size   : 16px;
        line-height : 24px;
        padding     : 2rem;
        text-shadow : 2px 2px 0px black;
    }

    p {
        margin-bottom : 1em;
    }

    p a {
        color : white;
    }

    @media (min-width : 600px) {
        .buttons {
            grid-template-columns : repeat(3,100px);
            grid-template-rows    : 80px 80px;
            grid-gap              : 20px;
        }
        .button-label {
            font-size : 16px;
        }
        .button::before,
        .button::after {
            height : 5px;
        }
    }

    @media (min-width : 1200px) {
        .buttons {
            grid-template-columns : repeat(3,140px);
            grid-template-rows    : 100px 100px;
            grid-gap              : 30px;
        }
        .button-label {
            font-size : 20px;
        }
        .button::before,
        .button::after {
            height : 6px;
        }
    }

     BODY MAIN DIV class buttons A button walk href go-for-a-walk ::before before ::after after SPAN button-label Walk the forest WALK THE FOREST button plant https://airtable.com/shrnXytpihrcWAQAG Plant a tree PLANT A TREE button info #info Info INFO id info P Surfing the web is becoming increasingly boring. What used to be a wild trip through stormy waters has now become a journey on a cruise ship where everything is planned and there's no longer place for craziness. This site is our attempt try bring some of that unpredictability back. The next rabbit hole can be just one click away so click that button, go for a walk and enjoy getting lost on the web. https://manuelmoreale.com target _blank Manu  and  https://carlbarenbrug.com Carl