@font-face { font-family: "work-sans"; src: url('../fonts/work-sans/WorkSans-Regular.otf'); } :root{ --footer-font-family : 'work-sans'; --pretty-margin: 0.5rem; --main-color: red; --secondary-color: rgb(0,42,255); } *{ margin: 0; padding: 0; } body{ font-family: var(--footer-font-family); font-size: 2rem; letter-spacing: 0.1rem; } .point { margin: 0px var(--pretty-margin); } .pipe { margin: 0px calc(3 * var(--pretty-margin)); } section{ height: 100vh; } section h2 { font-size: 2rem; } section:nth-of-type(odd){ background-color: white; color: var(--secondary-color); } section:nth-of-type(even){ background-color: var(--secondary-color); color: white; } section.cover{ background : url(../images/cover.png) no-repeat center center; background-color: var(--main-color); } section.albums{ background-color: black; color:white; display: flex; flex-direction: column; justify-content: center; line-height: 200%; } section.albums > * { padding-left: 10vw; } section.albums h2 { padding-left: 20vw; font-weight: normal; } section.albums ul { list-style-type: none; } section.contact{ display : flex; flex-direction: column; justify-content: center; align-items: center; position :relative; background : url(../images/contact.png) no-repeat center center; background-color: var(--secondary-color); color:white; } footer{ font-size: 0.92rem; position: absolute; width: 100%; bottom: 0; text-align: center; } .hidden{ display: none; }