@font-face{
    	font-family: "D-DIN";
    	src: url(fonts/D-DIN.otf);
}

@font-face{
    	font-family: "D-DIN-Bold";
    	src: url(fonts/D-DIN-Bold.otf);
}

/* Set minimal defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  /* outline: 1px solid red !important; */ */
}

html {
  overflow-y:hidden;
	font-size:14px;
}

body {
  height:100vh;
  font-family:"D-DIN";
  background-color:#FFF;
  overflow-y:scroll;
  scroll-snap-type: y mandatory;
}

section {
 height: 100vh;
 display: flex;
 scroll-snap-align: start;
}

/* Sections */
.normal {
  background:#fff;
  color:#000;
}

.inverse {
  background:#000;
  color:#fff;
}

/* Components */
.topbar {
  height: 78px;
  padding: 10px;
  color:#fff;
  z-index:100;
  mix-blend-mode:difference;
  position:sticky;
  top:0;
  display: flex;
  margin-top:10px;
  justify-content: space-between;
  transform: translateZ(0);
  will-change: color, mix-blend-mode;
  isolation: isolate;
  /* border: dotted 1px #000; */
  /* background: #ffcccc; */
}

.logo {
  /* border: dotted 1px #000; */
}

.logo img {
  height:100%;
  filter: invert(100%);
}

.navbar {
  display:flex;
  padding-right:4.0rem;
  font-family: D-DIN-Bold;
  font-size:1.8rem;
  flex-direction: row;
  justify-content: right;
  align-items:center; 
  /* border: dotted 1px #000; */
  /* background: #ccccff; */
}

.button {
  display: flex;
  justify-content: center;
  align-content: center;
  padding:20px 10px;
}

.banner {
  display:flex;
  margin: 0 auto;
  align-content:center;
  align-items:center;
  justify-content: center;
  font-size:3.4rem;
  height:100vh;
  width: 65%;
  /* border: dotted 1px #000; */
  /* background:#ccffff; */
}

.inverse {
  background: #000;
  color:#FFF;
}

.philosophy {
  display: grid;
  width:65%;
  margin: auto auto;
  grid-template-columns: auto 40px auto 40px auto 40px auto; 
  grid-template-rows: repeat(3, max-content) ;
}

.workflow {
  display:grid;
  grid-template-columns: repeat(5, 40px auto 40px) ;
  align-content:center;
  width:65%;
  margin:auto auto;
}

.capabilities {
  display:grid;
  z-index:100;
  mix-blend-mode:difference;
  grid-template-columns: auto 1fr auto 1fr auto ;
  grid-template-rows: repeat(5, auto) ;
  width:65%;
  margin:auto auto;
}

.circle {
  display:flex;
  height: 100%;
  background:#000;
  aspect-ratio:1 / 1;
  border: 3px solid #000;
  border-radius: 50%;
  align-content:center;
  align-items:center;
  justify-content: center;
  color:#fff;
  font-size:40px;
  font-weight:bold;
}

.horizontal-line {
  height: 3px;
  width: 100%;
  background: #000;
  align-self: center;
}

.icon {
  display:flex;
  filter: invert(100%);
  justify-self:center;
  width: 60%;
  align-self:end;
}

h1 {
  display:flex;
  margin:40px 0;
  font-size:2.4rem;
  font-weight:bold;
}

h2 {
  display:flex;
  font-size:1.8rem;
  margin-top:20px;
  margin-bottom:20px;
}

p {
  display:flex;
  font-size:1.4rem;
  margin-top:10px;
  margin-bottom:10px;
}

a {
  color: #fff;
  text-decoration: none;
}