Troubles with Fullpage / please help

[thfab]

Hi so im a student and i need to create a portfolio but my coding sucks a little bit. It's probably very simple so please help me understand!..

basically I used Fullpage.js but on my first page, there's a part of my title that disappears. I used the console to understand and there is a <div class="fp-overflow"> that takes like 1/3 of the whole screen and the part of my title that goes over the limit disappear but I don't know how to change it. I tried putting the width to 100vh and to put overflow : visible but it's not working. can anyone help me please ?
my HTML :
<div class="section home" id="accueil">
<h1 id="titre">Thomas<br><span class="fabro">Fabro</span></h1>
<h1 id="etudiant">étudiant en communication <br>digitale et design d'expérience</h1>
<div id="scroll">
<img src="img/fleche1.png" alt="scroll" width="3">
<p>scroll pour découvrir mon travail</p>
<img src="img/fleche2.png" alt="scroll" width="25%">
</div>
</div>

and my css :
#titre{
font-family: coolvetica;
text-transform: uppercase;
font-size: 8em;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-right: 10%;
}

.fabro {
position: absolute;
margin-top: 15%;
margin-left: 40%;
}

.home {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;

}

#scroll {
display: flex;
flex-direction: column;
align-items: center;
}

and my js :
$(document).ready(function() {
$('#fullpage').fullpage({
//options here
licenseKey: 'gplv3-license',
autoScrolling:true,
scrollHorizontally: true,
scrollOverflow: false
});

//methods
$.fn.fullpage.setAllowScrolling(false);
});

new fullpage('#fullpage', {
//options here
autoScrolling:true,
scrollHorizontally: true
});