right css stylesheet

static/css/style.css

@@ -0,0 +1,551 @@
+*, *:after, *:before {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+@font-face {
+    font-family: 'Compagnon Bold';
+    src: url('webfonts/Compagnon-Bold.woff2') format('woff2'),
+         url('webfonts/Compagnon-Bold.woff') format('woff') ;
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+font-family: 'Compagnon Italic';
+src: url('webfonts/Compagnon-Italic.woff2') format('woff2'),
+     url('webfonts/Compagnon-Italic.woff') format('woff');
+font-weight: normal;
+font-style: italic;
+}
+
+@font-face {
+font-family: 'Compagnon';
+src: url('webfonts/Compagnon-Medium.woff2') format('woff2'),
+    url('webfonts/Compagnon-Medium.woff') format('woff');
+font-weight: medium;
+font-style: normal;
+}
+
+@font-face {
+font-family: 'Compagnon Light';
+src: url('webfonts/Compagnon-Light.woff2') format('woff2'),
+     url('webfonts/Compagnon-Light.woff') format('woff');
+font-weight: light;
+font-style: normal;
+}
+
+@font-face {
+font-family: 'Compagnon Roman';
+src: url('webfonts/Compagnon-Roman.woff') format('woff');
+font-weight: normal;
+font-style: roman;
+}
+
+@font-face {
+font-family: 'Steps Thin Mono';
+src: url('webfonts/steps-mono-thin-webfont.woff2') format('woff2'),
+     url('webfonts/steps-mono-thin-webfont.woff') format('woff');
+font-weight: normal;
+font-style: roman;
+}
+
+
+
+@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
+
+
+
+body{
+	/* background: #ffffff; */
+	color:black;
+	font-family: 'Montserrat', sans-serif;
+	top:0;
+	left: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+
+}
+
+h2,h3{
+  font-family: 'Steps Thin Mono';
+}
+a{
+  color: black;
+}
+
+div.home > a{
+  border-bottom: 1px dashed black;
+  padding: 0.1em;
+  margin: 0.5em;
+  line-height: 1.5em;
+}
+
+.text a:visited{
+  color: red;
+}
+.text a:hover{
+  background: : red;
+  color: white;
+}
+
+div#wrapper{
+   width: 100%;
+}
+div#top{
+  position: relative;
+  background: white;
+}
+
+div#bottom{
+  padding-top: 4em;
+  position: absolute;
+  width: 100%;
+}
+
+
+/********************************************************/
+/* SELECTION */
+/********************************************************/
+
+::selection {
+  background: magenta; /* WebKit/Blink Browsers */
+}
+::-moz-selection {
+  background: magenta; /* Gecko Browsers */
+}
+
+
+/********************************************************/
+/* FIRST PAGE */
+/********************************************************/
+
+div.homecontent{
+  /* padding-top: 4em; */
+}
+
+div.home{
+  /* padding: 1em 5em 1em 7.5em; */
+	padding-left: 15em;
+	padding-top: 2em;
+	padding-bottom: 3em;
+	padding-right: 5em;
+  text-align: justify;
+  font-size: 0.8em;
+}
+
+div.home a:hover{
+	background: red;
+  color: white;
+  }
+
+
+div.explanation{
+	font-size: 0.75em;
+	float: right;
+  padding-right: 0.75em;
+  font-style: italic;
+
+}
+
+
+/********************************************************/
+/* NAVIGATION */
+/********************************************************/
+header{
+  margin-top: 7em;
+  margin-right: 10em;
+  position: fixed;
+  top:17em;
+  -webkit-transform-origin: 0 50%;
+		 -moz-transform-origin: 0 50%;
+			-ms-transform-origin: 0 50%;
+			 -o-transform-origin: 0 50%;
+					transform-origin: 0 50%;
+	-webkit-transform: rotate(-90deg) translate(-50%, 50%);
+		 -moz-transform: rotate(-90deg) translate(-50%, 50%);
+			-ms-transform: rotate(-90deg) translate(-50%, 50%);
+			 -o-transform: rotate(-90deg) translate(-50%, 50%);
+					transform: rotate(-90deg) translate(-50%, 50%);
+}
+
+#logobox{
+  display: inline-block;
+  background: none;
+  padding-top: 0.5em;
+}
+#logobox a, #logobox a:visited{
+  color: black;
+}
+#logobox a:hover{
+  animation: blinker 0.05s linear infinite;
+}
+
+@keyframes blinker {
+  50% { opacity: 0; }
+}
+
+#logobox h1{
+  font-size: 5em;
+  font-family: 'Steps Thin Mono';
+  margin-top: 0;
+}
+
+nav{
+  float: right;
+  text-transform: lowercase;
+  /* font-family: 'Montserrat', sans-serif; */
+  font-family: 'Steps Thin Mono';
+  /* font-family: 'Victorianna Thin'; */
+}
+
+nav ul.menu {
+  /* font-weight: bold; */
+  float: left;
+  display: inline-block;
+	text-align: right;
+  margin-top: 0.6em;
+}
+
+
+
+/* here we are testing the button*/
+
+
+div.generate-button {
+  position: fixed;
+  width: 5rem;
+  height: 5rem;
+  bottom:5%;
+  right:5%;
+  margin: auto;
+  border-radius: 50%;
+  animation: giro 24s infinite linear;
+  background:red;
+}
+
+div.generate-button > span:first-child {
+  transform: translatex(2.5rem);
+}
+
+div.generate-button span {
+  width: 0;
+  height: 5rem;
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  font-size: 0.75rem;
+  color: black;
+  text-align: center;
+  line-height: 1;
+  transform: rotate(17.5deg);
+  vertical-align: top;
+  transform-style: preserve-3d;
+  text-transform: uppercase;
+}
+
+/*index*/
+div.generate-button-index {
+  position: fixed;
+  width: 5rem;
+  height: 5rem;
+  bottom:0;
+  right:0;
+  margin: auto;
+  border-radius: 50%;
+  animation: giro 7.5s infinite linear;
+  background: magenta;
+}
+
+div.generate-button-index > span:first-child {
+  transform: translatex(2.5rem);
+}
+div.generate-button-index span {
+  width: 0;
+  height: 5rem;
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  font-size: 0.75rem;
+  color: black;
+  text-align: center;
+  line-height: 1;
+  transform: rotate(17.5deg);
+  vertical-align: top;
+  transform-style: preserve-3d;
+  text-transform: uppercase;
+}
+
+
+/*about*/
+
+div.generate-button-about {
+  position: fixed;
+  width: 5rem;
+  height: 5rem;
+  left: 5%;
+  top: 50%;
+  margin: auto;
+  border-radius: 50%;
+  animation: girominus 10s infinite linear;
+  background:yellow;
+
+}
+div.generate-button-about > span:first-child {
+  transform: translatex(2.5rem);
+}
+div.generate-button-about span {
+  width: 0;
+  height: 5rem;
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  font-size: 0.75rem;
+  color: black;
+  text-align: left;
+  line-height: 1;
+  transform: rotate(17.5deg);
+  vertical-align: top;
+  transform-style: preserve-3d;
+  text-transform:uppercase;
+}
+
+@keyframes girominus {
+  100% {transform: rotate(-1turn)}
+}
+
+
+
+
+
+
+@keyframes giro {
+  100% {transform: rotate(1turn)}
+}
+
+
+
+
+
+/********************************************************/
+/* TEXT */
+/********************************************************/
+
+a{
+	text-decoration: none;
+}
+
+a:visited {
+    color:red;
+}
+
+ul{
+	list-style: none;
+}
+li a{
+	text-decoration: none;
+	color: #0000FF
+}
+
+li:hover a{
+	color: white;
+  background-color: red;
+}
+
+li{
+  padding-left: 5px;
+  padding-right: 5px;
+}
+li:hover {
+  background-color: red;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+img{
+	max-width: 90%;
+	margin-bottom: 15px;
+}
+video{
+	max-width: 90%;
+}
+
+
+/********************************************************/
+/* THE CLICKED WORDS DISPLAYED */
+/********************************************************/
+
+#thewordpath{
+	font-family: 'Compagnon Light';
+	/* font-style: roman; */
+	display: block;
+	width: 100%;
+	top:0;
+	right: 0;
+	left: 0;
+	padding: 0;
+	margin: 0;
+	padding: 10px;
+	width: auto;
+}
+.word{
+	color:black;
+
+}
+
+/********************************************************/
+/* THE CONTENT IN TWO COLUMNS */
+/********************************************************/
+
+.description{
+	width: 80%;
+}
+.text{
+	float: right;
+	width: 50%;
+ }
+.item{
+	float: left;
+	width: 50%;
+  padding-top: 7.8%;
+ }
+
+.column h2{
+  /* color: pink;
+  border:1px solid pink; */
+}
+
+.column a:hover{
+  color: white;
+  background-color: red;
+}
+
+.h3-titles {
+  font-family: 'Steps Thin Mono';
+  font-size: 1.2em;
+  background-color: magenta;
+  display: inline;
+}
+
+/********************************************************/
+/* NAVIGATION BAR AT THE BOTTOM OF DESCRIPTION*/
+/********************************************************/
+.index {
+	display: block;
+}
+
+nav.nav_bottom {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  height: auto;
+  bottom: 0px;
+  text-transform: uppercase;
+  font-size: 15px;
+  line-height: 18px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  list-style-type: none;
+  overflow: hidden;
+  position: fixed;
+  background: white;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+nav.nav_bottom div li {
+  margin-right: 2em;
+}
+nav.nav_bottom div li a{
+  color: black
+}
+nav.nav_bottom div li a:hover{
+  color: red;
+  background-color: black;
+}
+
+nav.nav_bottom div li:first-child {
+  margin-right: 0;
+}
+
+li.index, li.about {
+	float: left;
+  margin-left: 10px;
+}
+
+li.prev_item, li.next_item, li.no_here {
+	float: right;
+}
+
+
+/********************************************************/
+/* DIVERGE */
+/********************************************************/
+
+div.diverge_all{
+  padding: 1em 6.3em 1em;
+}
+div.diverge_all p{
+  font-weight: bold;
+  font-size: 1.3em;
+  font-family: 'Steps Thin Mono';
+}
+div.diverge_list {
+  /* width: 40%; */
+}
+div.diverge_list a{
+}
+span.folder-corner {
+
+	font-size: 0.8em;
+	font-style: italic;
+}
+
+/********************************************************/
+/* ABOUT PAGE */
+/********************************************************/
+div.about {
+  padding: 0 0 5em 0;
+  width: 70%;
+  margin: 0 auto;
+}
+
+
+
+/********************************************************/
+/* INDEX OF FOLDERS */
+/********************************************************/
+div.allcontentindex{
+  padding: 0 0 5em 0;
+  width: 70%;
+  margin: 0 auto;
+}
+.foldersindex{
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  font-family: 'Steps Thin Mono';
+}
+.foldersindex a{
+  color: black;
+  width: 80%;
+  height: 98%;
+  display: inline-block;
+}
+.foldersindex a:hover{
+  background-color: red;
+  color: white;
+  width: 100%;
+  display: inline-block;
+}
+h1.logo a {
+  text-transform: uppercase;
+}
+a.li-index span:hover {
+    background: red;
+    color: white;
+}
+a.li-index:hover {
+    background: transparent;
+    color: black;
+}