Problems with css in custom character sheets

Hello there, I tried to add custom CSS following all the step from the 'building a character sheets' guide, but it doesn't seems to work, Can anyone help me and see what's wrong please? @import url('<a href="https://fonts.googleapis.com/css?family=Amatic+SC:700|Arvo|Open+Sans:600" rel="nofollow">https://fonts.googleapis.com/css?family=Amatic+SC:700|Arvo|Open+Sans:600</a>'); *{ &nbsp; &nbsp; margin: 0; &nbsp; &nbsp; padding: 0; &nbsp; &nbsp; font-size: 62.5%; &nbsp; &nbsp; box-sizing: border-box; } body, th, td{ &nbsp; &nbsp; font-size: 1.5rem; } body{ &nbsp; &nbsp; background-image: url('<a href="http://www.secretvibes.eu/crbst_vieux-papier_20sv_20site.jpg?v=1w7fdch9fi6ern" rel="nofollow">http://www.secretvibes.eu/crbst_vieux-papier_20sv_20site.jpg?v=1w7fdch9fi6ern</a>'); &nbsp; &nbsp; background-size: cover; &nbsp; &nbsp;&nbsp; } input, td{ &nbsp; &nbsp; font-family: 'Arvo'; &nbsp; &nbsp; font-weight: 400; &nbsp; &nbsp; font-size: 1.5rem; } article{ &nbsp; &nbsp; margin: 1rem; } /* titre */ &nbsp; &nbsp; h1{ &nbsp; &nbsp; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; } &nbsp; &nbsp; h1 img{ &nbsp; &nbsp; &nbsp; &nbsp; width: 20rem; &nbsp; &nbsp; } &nbsp; &nbsp;&nbsp; th{ &nbsp; &nbsp; font-family: 'Open Sans'; &nbsp; &nbsp; font-weight: 600; &nbsp; &nbsp; font-size: 2rem; &nbsp; &nbsp; color: white; &nbsp; &nbsp; background: #333; } div{ &nbsp; &nbsp; display: flex; &nbsp; &nbsp; align-items: flex-start; &nbsp; &nbsp; justify-content: center; } /* colone de gauche */ &nbsp; &nbsp; section{ &nbsp; &nbsp; &nbsp; &nbsp; display: flex; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center; &nbsp; &nbsp; } section:first-child th{ &nbsp; &nbsp; width: 33rem; } section:last-child th{ &nbsp; &nbsp; width: 40rem; } /* Etat civil */ &nbsp; &nbsp; .etatcivil input{ &nbsp; &nbsp; &nbsp; &nbsp; width: 23rem; &nbsp; &nbsp; } &nbsp; &nbsp; .age td input{ &nbsp; &nbsp; &nbsp; &nbsp; width: 9.5rem; &nbsp; &nbsp; } /* caracteristiques */ &nbsp; &nbsp; .carac input{ &nbsp; &nbsp; &nbsp; &nbsp; width: 8rem; &nbsp; &nbsp; } /* Etat */ &nbsp; &nbsp; .etat input{ &nbsp; &nbsp; &nbsp; &nbsp; width: 8rem; &nbsp; &nbsp; } /* bio */ &nbsp; &nbsp; textarea{ &nbsp; &nbsp; &nbsp; &nbsp; width: 33rem; &nbsp; &nbsp; &nbsp; &nbsp; height: 10rem; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Avro'; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 400; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 1.7rem; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0.5rem 1rem; &nbsp; &nbsp; } &nbsp; &nbsp; .bio textarea{ &nbsp; &nbsp; &nbsp; &nbsp; width: 40rem; &nbsp; &nbsp; &nbsp; &nbsp; height: 20rem; &nbsp; &nbsp; } /* armes */ &nbsp; &nbsp; .armes input{ &nbsp; &nbsp; &nbsp; &nbsp; width: 21rem; &nbsp; &nbsp; } /* blessures */ &nbsp; &nbsp; .blessure input{ &nbsp; &nbsp; &nbsp; &nbsp; width: 19.9rem; &nbsp; &nbsp; } /* notes */ &nbsp; &nbsp; .notes textarea{ &nbsp; &nbsp; &nbsp; &nbsp; width: 40rem; &nbsp; &nbsp; &nbsp; &nbsp; height: 15rem; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 2rem; &nbsp; &nbsp; } &nbsp; &nbsp; .notes textarea{ &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Amatic SC'; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 700; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 2rem; &nbsp; &nbsp; } /* relations */ &nbsp; &nbsp; .relations input{ &nbsp; &nbsp; &nbsp; &nbsp; width: 7.8rem; &nbsp; &nbsp; }

According to the guide: Don't use body. You're looking for ".charsheet". Prefix all classes with "sheet-".

Thanks for the answer.

FYI: under roll20's Building Character Sheets wiki, it has been requested that sheets no longer use tables for layout. <a href="https://wiki.roll20.net/Building_Character_Sheets#2._Good_Code" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#2._Good_Code</a> Just mentioning in case you get into a new sheet too far and find out the repo manager wants div's and spans vs tables, th, td's, etc.