.roboto {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.roboto.w100 { font-weight: 100; }
.roboto.w200 { font-weight: 200; }
.roboto.w300 { font-weight: 300; }
.roboto.w400 { font-weight: 400; }
.roboto.w500 { font-weight: 500; }
.roboto.w600 { font-weight: 600; }
.roboto.w700 { font-weight: 700; }
.roboto.w800 { font-weight: 800; }
.roboto.w900 { font-weight: 900; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #FBF9F6;
    font-family: "Roboto", sans-serif;
    padding: 30px;
    box-sizing: border-box;
}

h1{
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
}
p{
    font-family: "Roboto", sans-serif;
}