@font-face { font-family: 'AvaraBold'; src: url('Avara-Bold.otf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvaraBold'; src: url('Avara-BoldItalic.otf'); font-weight: normal; font-style: italic; } @font-face { font-family: 'AvaraBold'; src: url('Avara-Black.otf'); font-weight: bold; font-style: normal; } body{ position: relative; margin:0; padding:0; font-size: 120%; line-height: 1.4; color:purple; background-color:#ff4d4d33; font-family: 'AvaraBold'; } hr{ border:0; border-bottom:1px dotted; } h1{ z-index: 10; } h3 { font-size: 1em; margin: 0; } dl { column-count: 2; } dt { /*text-decoration: underline;*/ } sup { line-height: 0; } select { font-size: 1em; } /* --- slider --- */ div#sliders{ position: fixed; width: 500px; top:60px; right:100px; bottom: 0; } div#slider{ float: left; margin:0.5em 1em 1em 0.5em; z-index: 1; position: absolute; top:0; left:0; width : 100%; height : 400px; background: transparent; } #slider2 { position: absolute; top:0; left:0; width : 100%; height : 400px; background: transparent; } #warped { position: absolute; top: 220px; left: -40px; } div#relearn-infos { position: absolute; bottom: 0; right: 0; } div#relearn-infos ul { margin: 0; } /* --- control points ---*/ #curve { width: 55%; padding : 0 1em; height: 100vh; overflow: auto; } #curve::-webkit-scrollbar { width: 6px; border-radius: 5px; } #curve::-webkit-scrollbar-track { background-color: black; } #curve::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); background-color: lightgray; border-radius: 5px; } div.controlpoint{ max-width: 800px; float: left; border-top: 1px solid black; border-bottom: 1px solid black; } div.controlpoint ul { column-count: 2; } .practical { column-count: 2; margin-top: 1em; } .practical p { display: inline-block; margin: 0; } #rotterdam{ color:#0054ff; } #rotterdam li{ list-style: none; } /*--- MOBILE ---*/ @media only screen and (max-width : 1024px) { div#sliders { position: absolute; top: -50px; left: -50px; transform: scale(0.5); } #curve { padding-top: 200px; } }