:root {
  --violet-main-color: #ad76d4;
  --violet-accent-color: #cd90db;
  --violet-dark-color: #a758c8; 
  --violet-darker-color: #390747;
  --wr-black:#0c1625;
  --wr-blue:#0e92e2;
  --wr-dark-blue:#14253d;
  --wr-orange:#ff6600;
  --wr-pink:#ff0060;
  --wr-red:#d52311;
  --wr-white:#ffffff;
  --wr-yellow:#e8d55d;
  --wr-border-radius: 1em;
}
@font-face {
  font-family: abelRegular; /* set name */
  src: url(/static/font/Abel-Regular.woff); /* url of the font */
}

html{
    transition: all cubic-bezier(0.075, 0.82, 0.165, 1);
    font-family: abelRegular;
    font-size: 1.25em;
}
body{
    background-color: var(--violet-main-color);
    background-image: url("./img/pattern.svg");
    background-size: 12em;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}
.ccwr_url{
    background-color: #390747;
}
.row{
    display: flex;
    flex-direction: row;
}
.ride_date{
    display: block;
    padding: .5em;
}
.next_ride_date{
    color:var(--wr-yellow);
}   
.ride_date.active{
    color: #390747;
    background-color: #ffffff;
    padding: .5em;
    border-radius: .25em;
}
h1,h3{
    color: var(--wr-yellow);
}
/* h1{
     font-size: 3em;
}
h2{
     font-size: 2.5em;
}
h3{
     font-size: 2em;
}
h4{
     font-size: 1.5em;
}
h5{
     font-size: 1.25em;
} */
img{
    max-width: 100%;
}
img.icon{
    max-width: 100%;
    max-height: 3em;
    float: left;
    border-radius: 0em;
}
img.emwrlogo{
    max-width: 100%;
    max-height: 8em;
}
img.map{
    max-width: 100%;
    max-height: 50em;
    border-radius: var(--wr-border-radius);
    
}

img.photo{
    padding: .25em;
    height: 12em;
    object-fit: cover;
    border-radius: var(--wr-border-radius);
}
img.photo.A{
    width: 12em;
}
img.photo.B{
    width: 18em;
}
img.photo.C{
    width: 8em;
}

div.page{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}
div.container{
    display: flex;
    flex-direction: column;
    max-width: 50em;
    align-items:center;
}
div.next_ride_reminder{
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    bottom: 1em;
    right: 1em;
}

.widget{
    background-color: #14253d;
    height: 1em;
}
.widget:before {
    content: url('./img/wr_clock.svg');
    max-height: 1em;
    max-width: 1em;
}
.widget:after {
    content: url('./img/wr_clock.svg');
    max-height: 1em;
    max-width: 1em;
}