@charset "UTF-8";
@import "reset.css";

/* CSS Document */

/*
	----------------------------
	HTML SELECTORS
	____________________________
*/

:root {
  --dark: #333;
  --light: #a3a3a3;
  --accent: #7644d3
}
body {
  font: 14px/21px Helvetica, Arial, sans-serif;
  color: var(--dark);
  margin: 0;
  padding: 0;
}
body * {
  display: flex;
  align-items: center;
}
a {
  text-decoration: none;
}
h1,
h2 {
  font-size: 36px;
  font-weight: normal;
  letter-spacing: -1px;
  color: var(--light);
  margin: 40px auto 40px auto;
}
h3 {
  font-size: 22px;
  font-weight: normal;
  margin: 8px 0;
  color: var(--light);
}
h4 {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}
h5 {
  font-size: 12px;
  font-weight: normal;
  margin: 0;
}
ul {
  margin-left: 20px;
}
/* ol {
  margin-left: 36px;
} */
p {
  color: var(--light);
}

/*
	----------------------------
	LAYOUT
	____________________________
*/

header {
  justify-content: flex-end;
  font-size: 1.5em;
  color: var(--light);
  min-height: 50px;
  background-color: var(--dark);
}
header > span,
header > a {
  padding: 0px 20px 0px 20px;
}
header > a > img {
  width: 20px;
  margin-left: auto;
}
#wrapper {
  /*width: 960px;*/
  margin: 0 auto;
  /* padding: 48px 0 72px; */
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
.canoo-back {
  background: var(--dark);
  background-image: url("../media/Canoo/white-green.jpg");
  background-size: cover;
  background-blend-mode: color-burn;
}
.landing-back {
  background: var(--dark);
  background-image: url("../media/landing/black-purple.jpg");
  background-size: cover;
  background-blend-mode: overlay;
}
#main {
  position: absolute;
  right: 5%;
}
#main > p,
#main > div {
  margin-left: 7px;
}
.container {
  width: 80%;
}
#canoo {
  width: 100%;
  border-radius: 75px;
}
.screenshots {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 75px;
}
.screenshots > * {
  width: 30%;
}
.screenshots img {
  border-radius: 30px;
  transition: transform 0.2s;
}
.screenshots img:hover {
  transform: scale(2.5);
  justify-self: flex-start;
  z-index: 100;
}
.project {
  flex-direction: column;
}
.project > h3 {
  text-align: center;
}
.project > p {
  text-align: justify;
}
.project > img {
  width: 100%;
  margin-bottom: 15px;
}
.button-more {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dark);
  color: var(--dark);
  display: inline-block;
  font-size: 15px;
  line-height: 15px;
  padding: 18px 18px 17px;
  text-decoration: none;
  cursor: pointer;
  background: var(--light);
  border-radius: 15px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.button-more span:first-child {
  position: relative;
  transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 10;
}
.button-more span:last-child {
  color: var(--light);
  display: block;
  position: absolute;
  bottom: 0;
  transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 100;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translateY(225%) translateX(-50%);
  height: 14px;
  line-height: 13px;
}
.button-more:after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  transform-origin: bottom center;
  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform: skewY(9.3deg) scaleY(0);
  z-index: 50;
}
.button-more:hover {
  border: solid 1px var(--accent);
}
.button-more:hover:after {
  transform-origin: bottom center;
  transform: skewY(15deg) scaleY(2) scaleX(1.1);
}
.button-more:hover span:last-child {
  transform: translateX(-50%) translateY(-100%);
  opacity: 1;
  transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}
.pill {
  outline: none;
  border: none;
  padding: 0.3rem 0.7rem;
  margin: 0 5px;
  font-family: inherit;
  font-size: inherit;
  position: relative;
  display: inline-block;
  letter-spacing: 0.05rem;
  font-weight: 700;
  font-size: 14px;
  border-radius: 500px;
  overflow: hidden;
  background: var(--accent);
  color: var(--light);
}

.pill span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
}

.pill:hover span {
  color: var(--dark);
}

.pill::before,
.pill::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.pill::before {
  content: "";
  background: var(--dark);
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.pill:hover::before {
  transform: translate3d(100%, 0, 0);
}
#sidebar {
  width: 280px;
  float: left;
  left: 5%;
  position: relative;
}
#sidebar ol {
  margin: 12px 0 12px 22px;
}
/*
	----------------------------
	PAGE/SECTION SPECIFIC
	____________________________
*/

#video-controls {
  width: 333px;
}
#video-controls a {
  color: var(--light);
  text-decoration: underline;
}

/*
	----------------------------
	UTILITY CLASSES
	____________________________
*/

.black-15 {
  background: url(../media/black-15-trans.png);
  color: var(--light);
  padding: 4px 12px;
  margin: 24px 0;
}
.black-35 {
  background: url(../media/black-35-trans.png);
  color: var(--light);
  padding: 4px 12px;
  margin: 24px 0;
}
.black-50 {
  background: url(../media/black-50-trans.png);
  color: var(--light);
  padding: 4px 12px;
  margin: 24px 0;
}
.black-65 {
  background: url(../media/black-65-trans.png);
  color: var(--light)f;
  padding: 4px 12px;
  margin: 24px 0;
}
.black-85 {
  background: url(../media/black-85-trans.png);
  color: var(--light);
  padding: 4px 12px;
  margin: 24px 0;
}

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}