@font-face {
  font-family: "Inconsolata";
  src: url('./Inconsolata-Regular.ttf');
}

html, body{  
  background-color: #9C9C9C; 
  height: 230px;
  width: 600px;
  cursor: default;
}

#titulo {
  margin-left: 96px;
  margin-top: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  width: 700px;
  font-weight: bold;
}

#capa {
  font-family: 'Montserrat', sans-serif;
  margin-top: 40px;
  margin-left: 100px;
  font-size: 14px;
  display: inline-block;
  padding: 2.7px 8px;
  color: black;
  border: 0.1px solid black;
}

#capa7 {
  font-family: 'Montserrat', sans-serif;
  margin-top: 50px;
  margin-left: 100px;
  font-size: 14px;
  display: inline-block;
  padding: 2.7px 8px;
  color: black;
  border: 0.1px solid black;
}

#capa1 {
 font-family: 'Montserrat', sans-serif;
  margin-top: 35px;
  margin-left: 50px;
  font-size: 13px;
  cursor: pointer;
  font-weight: bolder;
  color: white;
}

#capa2 {
 font-family: 'Montserrat', sans-serif;
  margin-top: 30px;
  margin-left: 50px;
  font-size: 13px;
  width: 590px;
  line-height: 180%;
  font-weight: bolder;
  cursor: pointer;
  color: white;
}

#capa3 {
  font-family: 'Montserrat', sans-serif;
  margin-top: 30px;
  margin-left: 50px;
  font-size: 13px;
  width: 590px;
  line-height: 180%;
  font-weight: bolder;
  cursor: pointer;
  color: white;
}


#capa4 {
  font-family: 'Montserrat', sans-serif;
  margin-top: 30px;
  margin-left: 50px;
  font-size: 13px;
  width: 590px;
  line-height: 180%;
  font-weight: bold;
  cursor: pointer;
  color: white;

}

#capa5 {
  font-family: 'Montserrat', sans-serif;
  margin-top: 30px;
  margin-left: 50px;
  font-size: 13px;
  width: 590px;
  line-height: 180%;
  font-weight: bold;
  cursor: pointer;
  color: white;
}

#capa6 {
  font-family: 'Montserrat', sans-serif;
  margin-top: 30px;
  margin-left: 50px;
  font-size: 13px;
  width: 590px;
  line-height: 180%;
  font-weight: bold;
  cursor: pointer;
  color: white;
}


body {
  cursor: default;
}

#seta {
  margin-left: 80px;
  margin-top: 50px;
}

#about {
   position: absolute;
   left: 14px;
   transform: translate(-70px, 25vh); 
   font-family: 'Montserrat', sans-serif;
   font-weight: lighter; 
   color: black;
   padding: 5px;
   cursor: pointer;
   font-size: 13px;
   background-color: #fff;
   font-weight: bold;
}

#drawer {
  position: absolute;
  top: 30vh;
  right: 0;
  transition-property: right;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 11.5px;
  width: 387px;
  height: 50vh;
  font-weight: bold;
  line-height: 21px;
  background-color: #696969;
  padding: 5px 8px;
  height: 363px;
}

#drawer.collapsed {
  right: -420px;
}


#drawer1 {
  position: absolute;
  top: 30vh;
  right: 0;
  width: 369px;
  transition-property: right;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 11.5px;
  height: 50vh;
  font-weight: bold;
  line-height: 20px;
  background-color: #696969;
  padding: 5px 8px;
  height: 206px;
}

#drawer1.collapsed1 {
  right: -420px;
}

#drawer2 {
  position: absolute;
  top: 30vh;
  right: 0;
  width: 328px;
  transition-property: right;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 11.5px;
  width: 328px;
  font-weight: bold;
  line-height: 20px;
  background-color: #696969;
  padding: 5px 8px;
  height: 229px;
}

#drawer2.collapsed2 {
  right: -420px;
}

#drawer3 {
  position: absolute;
  top: 70vh;
  right: 0;
  width: 328px;
  height: 50vh;
  transition-property: right;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 11.5px;
  width: 421px;
  height: 50vh;
  font-weight: bold;
  line-height: 23px;
  background-color: #696969;
  padding: 5px 8px;
  height: 352px;
}

#drawer3.collapsed3 {
  right: -437px;
}

#drawer4 {
  position: absolute;
  top: 70vh;
  right: 0;
  width: 349px;
  transition-property: right;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 11.5px;
  width: 349px;
  font-weight: bold;
  line-height: 20px;
  background-color: #696969;
  padding: 5px 8px;
  height: 307px;
}

#drawer4.collapsed4 {
  right: -420px;
}

#drawer5 {
  position: absolute;
  top: 70vh;
  right: 0;
  width: 394px;
  transition-property: right;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 11.5px;
  width: 355px;
  font-weight: bold;
  line-height: 20px;
  background-color: #696969;
  padding: 5px 8px;
  height: 329px;
}

#drawer5.collapsed5 {
  right: -420px;
}