@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{
  margin-top: 10vh;
  margin-left: 1vw;
  font-family:  "OCRAStd";
  text-transform: uppercase;
}

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

/* style edits */


body
  {
  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:100vh;
  overflow-y: scroll;
  /*! padding-bottom: 200px; */
  background-color: white;
  /*! padding-left: 5px; */
  /*! padding-right: 5px; */
}

div#right {
  border: none;
  width:50%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  height:100vh;
  overflow-y: scroll;
  /*! padding-bottom: 200px; */
  background-color: #21632c;
}

.p-style{
/* letter-spacing: 1px; */
margin-left: 1vw;
margin-right: 2vw;
margin-top: 1vh;
margin-bottom:1vh;
font-size: 13pt;
text-align: justify;
}

.collapsible {
background-color: white;
color: black;
cursor: pointer;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 0vw;
padding-left:1vw;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 13pt;
font-weight: bold;
}

.active, .collapsible:hover {
color:#21632c;
}


#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{
  margin-top: 0vh;
  margin-bottom: 0vh;
  font-family: "OCRAStd";
    font-style: "light";
    font-size: 1.2vw;
    margin-left: 1vw;
}

.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: 1vw;
    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: 100%;
  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%;
    }


.extended {
display: none;
overflow: hidden;
}

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

div.links{
max-width: 100%;
background-color: black;
padding: 10px;
padding-left: 1vw;
margin-top: 3vh;
}

a.link_title{
font-size: 13pt;
color: white;
text-decoration: none;
padding-right: 50px;
}

.link_title:hover {
color:#21632c;
}

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