* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Montserrat, sans-serif; } #identification { padding: 5px 0; text-align: center; } #schoolid { text-transform: uppercase; font-size: 130%; font-weight: 600; } #userid { font-size: 110%; font-weight: 600; } #navbar { height: 50px; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #46484d; } #navbar li { float: left; height: 45px; } #navbar li a { font-weight: bold; display: block; color: white; text-align: center; line-height: 15px; padding: 17px 10px 13px; text-decoration: none; } #navbar li a:hover { background-color: #ffffff; border-bottom: 5px solid var(--theme-color); color: black; transition: 500ms background-color, 500ms color; } #navbar li a.active { background-color: #ffffff; border-bottom: 10px solid var(--theme-color); color: black; } #navbar a.accueil { font-size: 20px; padding: 13px 10px 12px; } #liste-notes { border: 1px solid gray; width: clamp(300px, 30%, 1200px); } #liste-notes .section { display: block; padding: 5px; border-bottom: 1px solid black; } #liste-notes .section:hover { background-color: var(--theme-color-light); } #liste-notes ul li { padding: 5px; } #liste-notes ul li:hover { background-color: var(--theme-color-light); } main { margin: 10px; } .grade-report td, .grade-report th { padding: 5px; } footer { background-color: #46484d; text-align: center; color: white; padding: 10px 0; }