@font-face {
  font-family: Cambria;
  src:url(../fonts/cambria.woff) format("woff");
}

@font-face {
  font-family: CambriaBold;
  src:url(../fonts/cambriabold.woff) format("woff");
}

@font-face {
  font-family: Corbel;
  src:url(../fonts/corbel.woff) format("woff");
}

@font-face {
  font-family: CorbelBold;
  src:url(../fonts/corbelbold.woff) format("woff");
}

/* Smoot scroll */
html {
  scroll-behavior: smooth;

}
/* End Smooth Scroll */

body{
  font-family:Corbel;
  font-size: 14px;
  overflow-x: hidden;
}

.wrapper{
  width:100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.code{
  font-family: Inconsolata, monospace;
  background: lightgrey;
}

.component-title{
  background:#ff535e;
  color: white;
  margin:4px 0 10px 0;
  text-align: center;
  clear: both;
}

p, a{
  margin:2px;
}

h1, h2, h3, h4{
  font-family:CambriaBold;
  margin:4px;
    overflow-x: auto;
}

section{
  margin-bottom:70px;
  position: relative;
}


section p{
  margin-top:10px;
}

section p.example-use{

  /* margin-left: 20px; */
  /* background: lightgrey; */
  padding:5px;
  border-radius: 5px;
  overflow: auto;
}

.note{
  color:grey;
}

header{
  /* background:#69cbd6;; */
  background:rgba(1,1,1,.1);

  padding:4px;
  text-align: center;
  position: relative;
  margin-bottom: 5px;
}

header h2{
  color:#69cbd6;
}

header img{
  position: absolute;
  right:3px;
  top:3px;
}

/* Additional Nav */

nav {
  width: 100%;
  height: auto;
  text-align: center;
}

ul {
  text-align: center;
  list-style: none;
  padding:0;
}

li {
  display: inline-block;
  padding: 5px 10px;
}

li a {
    color:#69cbd6;
    color:#ff535e;
  text-decoration: none;
  position: relative;
}

li a:visited{
  text-decoration: none;
}

li a:before {
  content: "";
  position: absolute;
  height: 1px;
  background: #ff535e;
  width: 0%;
  left: 50%;
  transform:translateX(-50%);
  right: 0;
  bottom: 0;
  transition: .3s width;
  transform-origin: center;
}

li a:hover:before {
  width: 100%;
}

.arrow-holder {
  width: 100%;
  max-width: 800px;
  height: auto;
  position: fixed;
  bottom: 5%;
  text-align: right;
  box-sizing: border-box;
  padding-right: 15px;
  z-index: 200;
}

.arrow {
  position: relative;
  width: 50px;
  bottom: 5%;
  opacity: 0;
  transition: opacity .3s;
}



/* End Nav */

table {
  margin-top:10px;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

th{
  font-family:CorbelBold;
  text-align: left;
  width:20%;
  padding: 4px;
}

td{
  padding: 4px;
  /* word-break:normal; */
   /* word-break: break-word; */
}

strong{
  font-family:CorbelBold;
  font-style: italic;
}

.only-this-version{
  text-align: left;
font-size: .7rem;
}

.only-this-version span{
  color:#69cbd6;
  font-size: 1rem;

}

.new-addition-text{
  float:right;
  font-size: .7rem;
  margin:5px auto;
}

.new-addition::before{
  content:"*";
  color:#69cbd6;
  top:0;
  left:-5px;
  text-align: right;
  position: absolute;
  /* width:20%;
  height:10%; */
}

.new-addition-star{
  color:#69cbd6;
}

@media (max-width:600px) {
  th{
    width:25%;
  }
}

@media (max-width:500px) {
  th{
    width:30%;
  }
}

@media (max-width:400px) {
  th{
    width:38%;
  }
}