body{ font-family: "Lucida Console", Monaco, monospace; overflow: hidden; background-color: black; color: white;} p { font-size: 20px; } a{ text-decoration: none; } #space-time{ z-index: 101; position: relative; width: 600px; height: 500px; top: 1158px; left: 853px; } #ilinx{ position: absolute; width: 106px; left: 250px; top: 420px; } .ilinx { font-size: 35px; margin-top: -2px; float:left; cursor: grab; } #spiral { width: 300px; position: absolute; margin-top: -150px; margin-left: -150px; top: 250px; left: 300px; } .rotating { -webkit-animation: rotating 3s linear infinite; -moz-animation: rotating 3s linear infinite; -ms-animation: rotating 3s linear infinite; -o-animation: rotating 3s linear infinite; animation: rotating 3s linear infinite; } #islands{ } a.island:link{color:white;} a.island:hover{color: red; -webkit-animation: breathe 3s linear infinite; -moz-animation: breathe 3s linear infinite; -ms-animation: breathe 3s linear infinite; -o-animation: breathe 3s linear infinite; animation: breathe 3s linear infinite; } a.island:visited{color: white;} #lemuria { position: absolute; left: 68px; top:269px; } #mu { position: absolute; left: 189px; top:76px; } #hyperborea { position: absolute; left: 444px; top: 151px; } #thule{ position: absolute; left: 421px; top:322px; } #sea { position: relative; width: 2500px; height: 2500px; /* border-style: dotted; border-width: 2px;*/ top: -990px; left: -145px; /* background-image: url('./img/grid3.png'); background-repeat: repeat;*/ } #iper{ position: relative; left: -27px; top: -47px; } #m { position: relative; left: -632px; top: -48px; } #thl{ position: relative; left: -30px; top: -38px; } #lmr{ position: relative; left: -532px; top: -28px; } /* SVG */ text { font-family: "Lucida Console", Monaco, monospace; color: black; stroke: white; stroke-width: 6; stroke-linejoin: round; paint-order: stroke; } text.region { stroke-width:6; font-variant: small-caps; } svg { float: right; } path, line { fill: none; stroke: white; stroke-linecap: round; } .field { stroke: none; fill-opacity: 1.0; } .slope { stroke-width: 1; } .river { stroke-width: 2; } .coast { stroke-width: 4; } .border { stroke-width: 5; stroke-dasharray: 4,4; stroke-linecap: butt; } /* Rotate loop */ @-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /* Breathing text */ @-webkit-keyframes breathe /* Safari and Chrome */ { 0% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;} 50% {font-size:21px; color: red; letter-spacing: 1px; margin-left: -6px;} 100% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;} } @keyframes breathe { 0% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;} 50% {font-size:21px; color: red; letter-spacing: 1px; margin-left: -6px;} 100% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;} }