:root {
  --salmon: #FF8774;
  --pink: #FFC3BA;
  --black: #111111;
  /*--black: #2A3150;*/
  --white: #FFF;
  --grey1: #F7F7F7;
  --grey2: #E5E5E5;
  /* PlayML Colours */
  --green: #6D9680;
  --blue: #12183d;
  /*--blue: #2C3056;*/

  --marginLeft: max(calc(60px + (100vw - 120px)/5), calc(50vw - 378px));
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--white);
  /*background: linear-gradient(76.29deg, #EBEFED 5.62%, #FFFFFF 69.82%);*/
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  /* style text not within tags, which can exist within a notebook cell */
  font-family: "Rethink Sans", sans-serif;
  /*font-family: 'Inter', sans-serif;*/
  font-size: 18px;
  line-height: 1.5;
  color: var(--blue);
}

p, li, output, a {
  font-family: "Rethink Sans", sans-serif !important;
  /*font-family: 'Inter', sans-serif !important;*/
  font-size: 18px !important;
  line-height: 1.5;
  color: var(--blue);
}

text {
  font-family: "Rethink Sans", sans-serif !important;
}

h1, h2, h3 {
  font-family: "Libre Baskerville", serif;
  /*font-family: 'Source Serif Pro', serif;*/
  font-size: 30px;
  line-height: 1.2;
  color: var(--blue);
}
h1 {
  font-size: 60px;
}
h3 {
  font-size: 15px;
}

.App {
  width: calc(100vw - 120px);
  max-width: 1260px;
  padding: 0;
  margin: 20px 60px;
}

.banner {
  /*font-size: 160px;*/
  background: var(--blue);
  /*background-image: url("/static/media/stripe.495c0ad4.png");*/
  background-size: 30%;
  background-position: right;
  background-repeat: no-repeat;
  margin: 0;
  /*height: 30px;*/
  width: 100%;
  padding: 11px;
}
.banner > h3 {
  padding: 0;
  margin: 0;
  margin-left: var(--marginLeft);
}
.banner > h3 > a {
  text-decoration: none;
  color: white;
  font-size: 26px !important;
  font-family: 'Libre Baskerville', serif !important;
  /*font-family: 'Source Serif Pro', serif !important;*/
}

.footer {
  /*font-size: 160px;*/
  background: var(--blue);
  /*background-image: url("/static/media/stripe.495c0ad4.png");*/
  background-size: 30%;
  background-position: right;
  background-repeat: no-repeat;
  margin: 0;
  width: 100%;
  padding: 11px;
}
.footerInner {
  /*margin-left: calc(60px + (100vw - 120px)/5);*/
  margin-left: var(--marginLeft);
  font-size: 26px;
}
.footerInner > p {
  color: white;
}
.footerInner > p > a {
  color: white;
  text-decoration: none;
}

.outline {
  color: var(--blue);
  -webkit-text-fill-color: #0000;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: white;
}

.App #main {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(10, 10%);
}

.App #main .halfWidth {
  grid-column: 1 / span 5;
}
/*TODO: go wider on mobile*/
/*@media(width: 30px)*/

/* this is the default for cells */
.App #main .center {
  grid-column: 3 / span 6;
}

/* make all text cells less wide */
.App #main * * p,.katex-display,ul {
  width: 100%;
  margin-bottom: 20px;
}

.App #main .fullWidth {
  grid-column: 1 / span 10;
  width: 140%
}

/* makes cell as wide as possible without being full width to make svg larger  */
.App #main .wide {
  grid-column: 2 / span 10;
  width: 80vw;
}

/* makes cell as wider than the available space to force svg to be larger - used for svgs with no width defined */
.App #main .wider {
  grid-column: 2 / span 9;
  width: 120%;  /* cells will be 20% wider, therefore this is safe */
}

.afterContent {
  width: 100%;
}

.afterContent-inner {
  margin-left: var(--marginLeft);
  width: 60vw;
  max-width: 756px;
}

/* make grid */ 
.App #main .wrapper{
  display:grid;
  width: 100vw;
  max-width: 100%;
  grid-template-columns: 1fr 1fr;
}

/* left column */
.App #main .left{
  grid-column-start:1;
  grid-column-end:6;
}

/* right column */
.App #main .right{
  grid-column-start:6;
  grid-column-end:11;
}

.left video, .right svg {
  transform-origin: center center;
  max-width: 100%;
  max-height: 100%;
  transform: scale(1);
}