Set a link in child theme style.css to jump to #main

I have created a 2013 child theme by creating these 2 files -

/wp-content/themes/twentythirteen-child/style.css:

@import url("../twentythirteen/style.css");

.site-header .home-link {
    min-height: 800px;
}

/wp-content/themes/twentythirteen-child/functions.php:

?php

function my_custom_header_setup() {
        $args = array('height' = 800);
        add_theme_support('custom-header', $args);
}

add_action('after_setup_theme', 'my_custom_header_setup');

?

Now the website has a large image at the top and looks as I wanted it.

However, when users click at the large image, then "nothing happens" for them.

I would like to change it, so that the click at the large image causes scroll down to the #main anchor:

Is such a change please possible through the style.css? I have searched and couldn't find a CSS solution (or hack) for that.

If not, then how to achieve this in the most simple way? (I am trying to keep the child theme small for easier site updates).

My workaround for now is to disable the link with CSS, but I am still interested in a better solution:

.site-header .home-link {
       pointer-events: none;
       cursor: default;
}