@font-face {
  font-family: "OCRAStd";
  src: url("font/OCR_A.ttf");
  font-weight: 300;
  font-style: normal;}


  @font-face {
  font-family: "Roboto";
  src: url("font/Roboto-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;}

  @font-face {
  font-family: "Roboto";
  src: url("font/Roboto-Regular.ttf") format("truetype");
  font-weight: regular;
  font-style: normal;}

  @font-face {
  font-family: "Roboto";
  src: url("font/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;}

  @font-face {
  font-family: "Roboto";
  src: url("font/Roboto-Italic.ttf") format("truetype");
  font-weight: regular;
  font-style: italic;}


/* style edits */
a{
  text-decoration: none;
  color: black;
  display: inline;
  clear: none;
}

a:hover{
  text-decoration: none;
  color: #21632c;
}

a:active {
  color: #21632c;
}

a:visited{
  text-decoration: none;
  color: black;
}

.name_T{
  padding-top: 5vh;
}

/* style edits */


body
  {
<<<<<<< HEAD
  width:100%;
  background-color: #21632c;
  font-family: "Roboto", sans-serif;
  width:100%;
  font-size: calc(8px + 0.7vw);
  scrollbar-width: 0px;
  border: none;
  margin-top: 0px;
   margin-bottom: 0px;
   margin-right: 0px;
   margin-left: 0px;

   }

div#left {
  border: 1px solid white;
  color: black;
  width:49%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  height:700px;
  overflow: scroll;
  padding-bottom: 200px;
  background-color: white;
}

div#right {
  border: none;
  width:49%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  height:700px;
  overflow: scroll;
  padding-bottom: 200px;
  background-color: #21632c;
}

.p-style{
letter-spacing: 1px;
margin-left: 5px;
margin-right: 5px;
}


#SPIX {
  max-width: 90%;
  text-align: center;
  display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10%;
    font-family: "OCRAStd";
    font-size: 2vw;
    color: white;
    padding-bottom: 2%;

  }

div#maintitle {
  max-width: 95%;
  text-align: center;
  display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
    font-family: "Roboto";
    font-size: 10vw;
    color: black;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

  .student{
  padding-top: 0vh;
  font-family: "OCRAStd";
    font-style: "light";
    font-size: 1.2vw;
}

.tfam {
  max-width: 90%;
  text-align: center;
  display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-bottom: 2%;
    font-family: "OCRAStd";
    font-size: 2vw;
    color: white;

  }

  .plusminus {
  max-width: 90%;
  text-align: center;
  display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top:0px;
    padding-top: 0px;
    padding-bottom: 30%;
    font-family: "OCRAStd";
    font-size: 1.8vw;
    color: white;

  }

div#subtitle {
    font-size: 1.5vw;
    margin-top: 0;
    color: black;

  }
div #maingif{
  max-width: 120%;
  display: block;
    margin-top: 0px;
    margin-bottom: 10%;
    margin-right: 0px;
    margin-left: 0px;
}

.maingif{
  width: 100%;
  display: block;
  margin-top: 0px;
  margin-bottom: 10%;
  margin-right: 0px;
  margin-left: -20px;
}

div#define {
  max-width: 90%;
  /*! text-align: justify; */
  display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: "OCRAStd";
    font-size: 1.5vw;
    padding-top: 5%;
    color:#fff;
}

div#pzi {
  max-width: 90%;
  /*! text-align: justify; */
  display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: "OCRAStd";
    font-size: 1.5vw;
    color:white;
}

div#names {
  max-width: 90%;
  /*! text-align: justify; */
  display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: "OCRAStd";
    font-style: "light";
    color: white;
    font-size: 1.2vw;
}

div#intro {
  max-width: 90%;
  /*! text-align: justify; */
  display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: "OCRAStd";
    font-size: 1.2vw;
    color: white;
}

/* div.moduleimg{
  margin-top:50px;
  margin-bottom: 100px;
} */

div.moduleimg img{
  max-width: 100%;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
}


div#bigpcb{
  max-width: 90%;
  display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
    padding-bottom: 0px;
}

.bigpcb{
  width: 90%;
  height: auto;
    margin-left: auto;
    margin-right: auto;

}



.output{
  max-width: 90%;
  display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
}

.code {
  max-width: 90%;
  display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border: 0.1em solid grey;
    margin-bottom: white;
    color: white;
    font-family: "OCRAStd";
    font-style:;
    font-weight: 0.1%;
    font-size: 13px;
    padding-top: 1%;
    }



.collapsible {
background-color: white;
color: black;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
border:solid black 1px;
}

.active, .collapsible:hover {
background-color:black;
color:white;
}

.extended {
padding: 0 18px;
display: none;
overflow: hidden;
}

.moduletext{
font-family:  "OCRAStd";
text-transform: uppercase;
}

div.links{
border-bottom:solid black 1px;
font-family: "Helvetica";
font-color: green;
padding: 15px;
}

a.link_title{
color: green;
text-decoration: none;
}

.link_title{
padding-right: 70px;

}

::-webkit-scrollbar {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  width: 0px;
  /* background-color: #21632c; */
}