body.oc #container {
  padding:50px 5% !important;
  padding-right:5% !important;
background: color-mix(in srgb, #fde8e5 60%, var(--white))
}
body.oc {
  background:var(--black)
}
aside.left {
  flex:1 4 100px !important
}
body.oc main {
  align-items: stretch
}
.gallery img {
  width:100%
}

.vibes.gallery {
  max-width:500px;
  margin:20px auto;
  columns:4 !important
}
.big.vibes.gallery {
  max-width:800px;
}
.vibes.gallery.three {
  columns:3
}
.bonus {
  font-size:.9em
}
.bonus b {
  margin-top:5px;
  margin-bottom:3px;
}

.full {
  width:100%;
  display:block;
  align-self:stretch;
}

#ocnav {
  text-align:center;
}
aside #ocnav {
  font-size:.9em
}
main #ocnav {
  flex:1 1 auto
}
.stats i {
  display:inline-block;
  background:var(--dark);
  color:var(--white);
  font-size:.9em;
  width:20%;
  text-align:center;
  font-weight:normal;
  text-transform:none;
}

.info i {
  width:60% 
}

#ocnav b, main b {
  display:block;
  align-self:stretch;
  width:100%;
  background:var(--black);
  color:var(--white);
  padding:1px 10px;
  margin-top:25px;
  margin-bottom:10px;
  text-align:left;
	text-transform:none;
}
#ocnav b:first-of-type {
  margin-top:5px;
}
#ocnav a, a.rel {
  padding:1px 5px;
  display:inline-block;
  background:var(--white);
  color:var(--black);
  border:1px var(--dark) solid;
  text-decoration:none;
  text-align:center;
  border-radius:3px;
  margin:2px;
  margin-bottom:0px
}
a.rel::before {
  content:;
  margin:0px 5px
}
#ocnav a:hover {
  background:var(--dark);
  color:var(--light);
}
.colors {
  width:100%;
}
.colors div {
  width:20px;
  margin-right:10%;
  height:20px;
  display:inline-block;
  border-radius:5px
}
.colors div:first-of-type {
  background:var(--white)
}
.colors div:nth-of-type(2) {
  background:var(--light)
}
.colors div:nth-of-type(3) {
  background:var(--med)
}
.colors div:nth-of-type(4) {
  background:var(--dark)
}
.colors div:nth-of-type(5) {
  background:var(--black)
}



/* colors */

.teddy {
  --black: #3E2A35;
  --dark: #334642;
  --med: #64919B;
  --light: #82AE9B;
  --white: #A7C6C3;
 --icon: "*";
}
.fyn {
  --black: #110514;
  --dark: #412035;
  --med: #BD4865;
  --light: #D49B9B;
  --white: #F5DCAA;
 --icon: "*";
}
.serena {
  --black: #312341;
  --dark: #513C61;
  --med: #973965;
  --light: #B8A3C9;
  --white: #D9BFE5;
 --icon: "*";
}
.rake {
  --black: #241F21;
  --dark: #4B2B30;
  --med: #712639;
  --light: #AE9591;
  --white: #E4D4D1;
 --icon: "*";
}
.sophia {
  --black: #2C2A4A;
  --dark: #877FDE;
  --med: #A86FAA;
  --light: #C49EE0;
  --white: #EEC1DA;
 --icon: "*";
}
.abby {
  --black: #5E0711;
  --dark: #90323D;
  --med: #CDB199;
  --light: #B67474;
  --white: #EEC1C1;
 --icon: "*";
}
.adrian {
  --black: #301B13;
  --dark: #8A2415;
  --med: #A66A29;
  --light: #AA766D;
  --white: #CB9F92;
 --icon: "*";
}
.craig {
  --black: #4F4930;
  --dark: #BD6C26;
  --med: #D19F66;
  --light: #DEC3A9;
  --white: #FCEBDF;
 --icon: "*";
}