@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,500,500i,700,700i);
@import url(https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css);

:root {
    --main-color1: #0084ff;
    --main-color2: #44bec7;
    --main-color3: #ffc300;
    --main-color4: #fa3c4c;
    --main-color5: #d696bb;
    --text-color1: white;
    --text-color2: white;
    --text-color3: white;
    --text-color4: white;
    --text-color5: white;
    --text-opacity: white;
    --link-color: #ee99c5;
    --alert-color: #CF3C18;
    --text-alert: white;
    --code-background: transparent;
    --code-text-color: #FFD740;
    --code-highlight: rgba(251,192,45 ,0.3);
    --color-opacity70: rgba(19,22,26 ,0.7);
    --color-opacity50: rgba(19,22,26 ,0.5);
    --color-opacity30: rgba(19,22,26 ,0.3);
}

.red-code .remark-inline-code {
  color: #ee99c5!important;
}

.float-right {
  float: right;
}
.title-slide {
  width: 60%;
  text-align: left!important;
  height:100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-opacity70);
  color: white;
  padding: 0;
}

.remark-slide {
  background-color: var(--main-color4);
  background-image: var(--logo), var(--title-background);
  background-size:  10%, cover;
  background-position: right bottom, 100%;
  background-repeat: no-repeat;
}

.title-slide .remark-slide-number { display: none; }

.bg-main1 { background-color: var(--main-color1); color: var(--text-color1);}
.bg-main2 { background-color: var(--main-color2); color: var(--text-color2);}
.bg-main3 { background-color: var(--main-color3); color: var(--text-color3);}
.bg-main4 { background-color: var(--main-color4); color: var(--text-color4);}
.bg-main5 { background-color: var(--main-color5); color: var(--text-color5);}
.bgcolor_alert { background-color: var(--alert-color)!important; color: var(--text-alert); }

.font_sm {
  font-size: 0.9em!important;
}

.shade_main  {
    background-color: var(--color-opacity70);
    color: var(--text-opacity);
    width: 100%;
    padding: 0;
}

.shade_navy  {
    background-color: rgba(38,45,105, 0.5);
    color: white;
    width: 100%;
    padding: 0;
}


.numberCircle {
  background: #cccccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

.remark-slide {
  background-image: url("images/ggplot.gif");
  background-position: 100%;
  background-size: cover;
}

.title-slide {
  background-image: url("images/USydLogo-white.svg");
  background-position: 90% 90%;
  background-size: 200px;
}

.roundbox
{
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px 6px 6px 6px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 200px;
  height: 200px;
  border: solid 2px black;
  float: left;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

body {
  font-family: 'Fira Sans'!important,'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
}

.remark-code, .remark-inline-code {
  font-family: 'Fira Code'!important, 'Lucida Console', Monaco, monospace;
  font-size: 140%;
  line-height: 1.25;
}

/* fira-sans-regular - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/fira-sans-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
       url('/fonts/fira-sans-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/fira-sans-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/fira-sans-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/fira-sans-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/fira-sans-v8-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
}

h1 {
  font-size: 50px!important;
}

.mjx-chtml * {
  font-family: "Fira Sans"!important;
}

.MJXc-TeX-main-B, .MJXc-TeX-main-B * {
  font-family: "Fira Sans"!important;
  font-weight: 700!important;
}

.MJXc-TeX-math-BI, .MJXc-TeX-math-BI * {
  font-family: "Fira Sans"!important;
  font-weight: 700!important;
  font-style: italic!important;
}

.remark-slide-content{
    font-size: 24pt!important;
}

.remark-code {
  font-size: 18pt!important;
}

.remark-inline-code {
  font-size: 90%;
}

body {
    font-family: "Fira Sans"!important;
}

.rotate-abit {
  -webkit-animation: rotateabit 4s infinite;
  animation: rotateabit 4s infinite;
}

table {
    border-collapse: collapse;
    width: 100%;
}


@-webkit-keyframes rotateabit {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(-40deg);}
  50% { transform: rotate(0deg);}
  75% { transform: rotate(40deg);}
  100% { transform: rotate(0deg);}
}

@keyframes rotateabit {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(-40deg);}
  50% { transform: rotate(0deg);}
  75% { transform: rotate(40deg);}
  100% { transform: rotate(0deg);}
}


/*************

   animation

****************/

.animateSlideInFromRight {
  /* -webkit-animation: slideInFromRight 3s ease; */
  /* animation: slideInFromRight 3s ease; */
  /* transform-origin: 0% 20%; */
}


@-webkit-keyframes slideInFromRight {
  0% { transform: translateX(100%);}
  50% { transform: translateX(-100%);}
  100% {}
}

@keyframes slideInFromRight {
  0% { transform: translateX(100%);}
  50% { transform: translateX(-100%);}
  100% {}
}

@-webkit-keyframes slideInFromLeft {
  0% {
    /* -webkit-clip-path: polygon(100% 0%,  100% 0%, 100% 100%, 100% 100%); */
    /* clip-path: polygon(100% 0%,  100% 0%, 100% 100%, 100% 100%); */
    /* width: 0%; */
    transform: translateX(100%);
  }
  100% {
    /* -webkit-clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* width: 100%; */
  }
}

@keyframes slideInFromLeft {
  0% {
    /* -webkit-clip-path: polygon(0% 0%,  0% 0%, 0% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%,  0% 0%, 0% 100%, 0% 100%); */
    /* width: 0%; */
    transform: translateX(-100%);
  }
  100% {
    /* -webkit-clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* width: 100%; */
  }
}

.boxtitle1 {
  padding:1em;
    -webkit-animation: slideInFromRight 3s ease;
    animation: slideInFromRight 3s ease;
}

.circle
{
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  width: 150px;
  height: 150px;
  border: solid 4px black;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  -webkit-animation: float 2s linear infinite;
  animation: float 2s linear infinite;
}


@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}