/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>itinerae : greyscale</title>
<link rel="shortcut icon" href="https://files.catbox.moe/rshw42.png"> 
<link href="//fonts.googleapis.com/css?family=Megrim%7CLato" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">


    
<style>
  
body {
background:#444 url(https://files.catbox.moe/95kd3y.gif) fixed;
font-family: 'lato', verdana, arial;
font-size: 20px;
color:#666;
letter-spacing: 1px;
line-height:20px;}
             
  
a:link, a:visited, a:active { 
color:#222;text-decoration:none;}
a:hover {
color:#ddd;}
  

      b {color:#444;font-weight:bold;}
      i {font-style:italic;color:#aaa;}
      u {color:#888;text-decoration:underline;}
  
  img {border:0;}
  textarea {font:9px 'lato', verdana;letter-spacing:1px;}
     


  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;}

  ::-webkit-scrollbar-track {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
    image-rendering: pixelated;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);}

  ::-webkit-scrollbar-track:active {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);}

  ::-webkit-scrollbar-thumb {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
    width: 16px;
    height: 16px;
    background-color: #cccccc;
    z-index: 1;}

  ::-webkit-scrollbar-corner {
    background-color: #cccccc;}

  ::-webkit-resizer {
    width: 16px;
    height: 16px;
    background-color: #cccccc;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
    background-position: bottom right;
    background-repeat: no-repeat;
    image-rendering: pixelated;}

  ::-webkit-scrollbar-button,
  ::-webkit-scrollbar-button {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #cccccc;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-position: center center;}

  ::-webkit-scrollbar-button:active,
  ::-webkit-scrollbar-button:active {
    background-position: 2px 2px;}

  ::-webkit-scrollbar-button:horizontal:decrement,
  ::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");}

  ::-webkit-scrollbar-button:horizontal:increment,
  ::-webkit-scrollbar-button:horizontal:increment {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");}

  ::-webkit-scrollbar-button:vertical:decrement,
  ::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");}

  ::-webkit-scrollbar-button:vertical:increment,
  ::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");}

  ::-webkit-scrollbar-button:horizontal:increment:start,
  ::-webkit-scrollbar-button:horizontal:increment:start {
    display: none;}

  ::-webkit-scrollbar-button:horizontal:decrement:end,
  ::-webkit-scrollbar-button:horizontal:decrement:end {
    display: none;}

  ::-webkit-scrollbar-button:vertical:increment:start,
  ::-webkit-scrollbar-button:vertical:increment:start {
    display: none;}

  ::-webkit-scrollbar-button:vertical:decrement:end,
  ::-webkit-scrollbar-button:vertical:decrement:end {
    display: none;}

  ::-webkit-scrollbar-button:active,
  ::-webkit-scrollbar-button:active {
    border-top: 1px solid #868a8e;
    border-left: 1px solid #868a8e;
    border-bottom: 1px solid #868a8e;
    border-right: 1px solid #868a8e;
    box-shadow: none;}
  
   
.header {background:#aaa url("https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061278-integrez-le-css-dans-la-page-html");color:#BCACCC;text-align:center;border-top-right-radius:30px;border-top-left-radius:30px;border:2px solid #444;border-bottom:0px;}

.header a {font-family: 'silkscreen', monospace;font-size:20px;text-decoration:underline;color:#fff;letter-spacing:3px;text-shadow: 1px 1px 2px black;}

  
.navigation {background:#FFf;margin-top:0px;border-top:1px solid #111;border-bottom:1px solid #111;}

.navigation a {
display:inline-block;
background:transparent;
text-align:center;
margin-bottom:2px;
margin-right:4px;
padding-bottom:2px;
padding-top:2px;
font:normal 9px 'silkscreen',arial;
line-height:10px;
text-transform:uppercase;
letter-spacing:1px;
color:#444;
width:75px;}

.navigation a:hover {
background:#f0f0f0;
color:#000;}
  
.icon {margin-bottom:4px;margin-top:4px;}

.marquee {background:#444;color:#ddd;font:9px 'silkscreen', verdana;padding:2px;}

.leftside {background: #FFF; border-right: 2px solid #444;}
.content {background: #FFF; border-right: 2px solid #444;}
.rightside {background: #FFF;}
.footer {background: #606060;color:#ccc; border-top:1px solid #111;
 border-bottom-left-radius:10px;border-bottom-right-radius:10px;line-height:20px;}
.footer a {color:#fff;}
  
.scrollbox {height:90px;border:1px solid #888;border-right:0px;padding:6px;margin-bottom:3px;overflow:scroll;overflow-x:hidden;}
  
.title {font: 20px 'silkscreen', verdana;color:#1D1E2C;letter-spacing:1px;text-align:left;padding:0px;padding-left:4px;
margin-bottom:4px;text-transform:uppercase;background:#eee;border-bottom:1px solid #ddd;}
  
  
