adding tumblr controls on wandering

/** head part of the code. please do not include this comment. **/

<!-- Tumblr Controls Script --->

<script>
$(document).ready(function(){
$('.controls-button').click(function(){
$('body').toggleClass('controls-click');
});
});
</script>

/** css part of the code. look for the original .subtitle class. delete it. and replace it with this new one. please do not include this comment. **/

.controls-button {
background: {color:Post Background};
border: 1px solid {color:Border};
border-radius: 100px;
color: {color:Link};
font-size: 0.9rem;
font-variant: normal;
height: 0.9rem;
line-height: 1;
padding: 10px;
position: fixed;
right: 20px;
text-rendering: auto;
top: 10.305px;
width: 0.9rem;
z-index: 2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

.controls-button:hover {
color: {color:Link Hover};
}

.tmblr-iframe-compact .tmblr-iframe {
right: 10px;
top: 59px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.controls-click .tmblr-iframe {
opacity: 1.0;
visibility: visible;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

/** in this part: @media only screen and (max-width: 1000px) { of the code, add the line below. this is to make sure that the tumblr controls won't appear on mobile. please do not include this comment. **/

.controls-button {
display: none;
}

/** html part of the code. look for <div class="subtitle">...</div> and replace it with this one. please do not include this comment. **/

<a class="controls-button" title="Tumblr Controls"><i class="fas fa-cog"></i></a>