/*:root {
  --button: #b3b3b3;
  --button-color: #0a0a0a;
  --shadow: #000;
  --bg: #404040;
  --header: #7a7a7a;
  --color: #fafafa;
  --lit-header: #e6e6e6;
  --speed: 2s;
}*/
* {
  box-sizing: border-box;
  transform-style: preserve-3d;
  text-align:center;
}
@property --swing-x {
  initial-value: 0;
  inherits: false;
  syntax: '<integer>';
}
@property --swing-y {
  initial-value: 0;
  inherits: false;
  syntax: '<integer>';
}
html {
min-height: 100vh;
background:var(--bg);
}
body {
  min-height: 100%;
  display: flex;
  /*font-family: 'Roboto', sans-serif;*/
  font-family: 'Open Sans', sans-serif;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--color);
  perspective: 1200px;
  padding-bottom:30px;
}
a.button, .nav a, .home a, .back a {
  text-transform: uppercase;
}
a.button, .nav a, .home a, .back a, dialog {
  text-decoration: none;
  background: var(--button);
  color: var(--button-color);
  padding: 1rem 4rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.05rem;
}
p {
  /*font-weight: 100;*/
}
img {
max-width:100%;
  border-radius: 10px;
}
.modal-content img {
object-fit: contain;
max-height: 100vh;	/* 100% view height */
max-width: 100vw;	/* 100% view width */
}
li {
	display: flex;
    justify-content: space-around;
}
h1 {
  -webkit-animation: swing var(--speed) infinite alternate ease-in-out;
          animation: swing var(--speed) infinite alternate ease-in-out;
  font-size: clamp(4rem, 26vmin, 13rem);
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  margin-bottom: 1rem;
  letter-spacing: 1rem;
  transform: translate3d(0, 0, 0vmin);
  --x: calc(50% + (var(--swing-x) * 0.5) * 1%);
  /*background: radial-gradient(var(--lit-header), var(--header) 45%) var(--x) 100%/200% 200%;*/
  -webkit-background-clip: text;
  /*color: transparent;*/
  /*overflow:hidden;*/
}
h1:after {
  -webkit-animation: swing var(--speed) infinite alternate ease-in-out;
          animation: swing var(--speed) infinite alternate ease-in-out;
  content: "Bikes";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--shadow);
  filter: blur(1.5vmin);
  transform: scale(1.05) translate3d(0, 12%, -10vmin) translate(calc((var(--swing-x, 0) * 0.05) * 1%), calc((var(--swing-y) * 0.05) * 1%));
}
h1 {
  font-size: clamp(4rem, 13vmin, 7rem);
}
h3.img {
 background-position:center;
 background-repeat:no-repeat;
 background-size: cover;
}
.info {
  text-align: center;
  line-height: 1.5;
  max-width: clamp(16rem, 90vmin, 25rem);
  margin-bottom:30px;
}
.info > p {
  margin-bottom: 3rem;
}
@-webkit-keyframes swing {
  0% {
    --swing-x: -100;
    --swing-y: -100;
  }
  50% {
    --swing-y: 0;
  }
  100% {
    --swing-y: -100;
    --swing-x: 100;
  }
}
@keyframes swing {
  0% {
    --swing-x: -100;
    --swing-y: -100;
  }
  50% {
    --swing-y: 0;
  }
  100% {
    --swing-y: -100;
    --swing-x: 100;
  }
}

.indexes, .ind {
text-align:center;
}
.indexes ul, .ind ul {
 margin:0;
 padding: 0;
}
.indexes ul li, .ind ul li {
display:inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}
.indexes ul li a, .ind ul li a {
 margin:4px;
 padding: 0;
 display:block;
 width:300px;
 height:190px;
 text-indent:-9999px;
  background-position: center top;
background-size: contain;
}

.strava-widget {
   float: left;
   width: 90%;
   max-width:304px;
}
   .strava-stats {
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
   }
      .strava-stats .caption {
         background: #dbdada;
         font-weight: bold;
      }
         .strava-stats th,
         .strava-stats td {
            padding: 15px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            width: calc(100% / 6)
         }
         .strava-stats .heading {
            background: #dbdadac7;
            font-weight: bold;
            text-align: center;
         }

h2.title {
margin:50px auto 20px;
font-size:2.5em;
text-align:center;
}
table {
margin:0 auto;
max-width:912px;
}
th {
text-align:right;
width:140px;
padding:0 8px 0 0;
color:#999;
}
td {
text-align:left;
max-width:400px;
}
 ul {
 margin:0;
 padding: 0;
}
 ul li {
display:inline-block;
  list-style: none;
  padding: 0;
  margin: 5px;
  /*width:150px;*/
  text-align:center;
}

h3.img {
 margin:4px auto;
 padding: 0;
 display:block;
 width:100%;
 padding-top: 60%;
 /*height:180px;*/
 text-indent:-9999px;
  background-position: center;
}


.home {
margin:8px 0 0;
position:fixed;
top:10px;
right:5px;
float:right;
}
.back {
margin:8px 0 0;
position:fixed;
bottom:20px;
right:5px;
float:right;
}
.home a, .nav a, .back a {
padding:8px;
color:#666;
border:1px solid #999;
text-transform: uppercase;
text-decoration: none;
}
.nav {
text-align:center;
line-height:1.75em;
}
.grey {
color:#333;
}
.uped {
color:var(--highlight);
}
/*.indexes, .box640 {
width:100%;
max-width:640px;
}*/
.indexes, .ind, .box800 {
width:100%;
max-width:800px;
}
@media (min-width:768px){

}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}