@font-face {
  font-family: fluxisch-else;
  src: url("osp/ospfont/fonts/FluxischElse-Light.otf");
}

@font-face {
  font-family: polsku;
  src: url("polsku/polsku/fonts/Polsku.ttf");
}


h1 {
  font-size: 50px;
  text-align: left;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0px;
  text-transform: none;
  line-height: 1.3em;
  font-family: polsku;
  src: url("polsku/polsku/fonts/Polsku.ttf");
  margin-left: 30px;

}

h3 {
  font-size: 14px;
  text-align: left;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0px;
  text-transform: none;
  line-height: 1.3em;
  font-family: fluxisch-else;
  src: url("osp/ospfont/fonts/FluxischElse-Light.otf");
  margin-left: 30px;

}


#paragraph1 .circle-container {
  flex-grow: 0;
  flex-shrink: 0;
  margin-:200px;
}

#paragraph1 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
}

#paragraph1 .hidden {
  visibility: visible;
  margin-right:80px;
  font-family: fluxisch-else-bold;
}

#paragraph1 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}

#paragraph2 .circle-container {
  flex-grow: 0;
  flex-shrink: 0;/*
  margin-right:10%;*/
  margin-top:95px;
}

#paragraph2 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
}

#paragraph2 .hidden {
  visibility: visible;
  margin-right:30%;;
  margin-top:80px;
  font-family: "fluxisch-else";
}

#paragraph2 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}

#paragraph3 .circle-container {
  flex-grow: 0;
  flex-shrink: 0;/*
  margin-right:40px;*/
  margin-top:220px;
}

#paragraph3 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
}

#paragraph3 .hidden {
  visibility: visible;
  margin-right:100px;
  margin-top:210px;
  font-family: fluxisch-else;;
}

#paragraph3 .frame {
  visibility: visible;
  margin-right:20%;
  margin-top:40px;
}

#paragraph3 .print {
  display: none;
  margin-right:20%;
  margin-top:40px;
}

#paragraph3 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}

#paragraph4 .circle-container {
  flex-grow: 0;
  flex-shrink: 0;
  margin-right:40px;
  margin-top:220px;
}

#paragraph4 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
}

#paragraph4 .hidden {
  visibility: visible;
  margin-right:100px;
  margin-top:200px;
  font-family: fluxisch-else;
}


#paragraph4 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}


#paragraph5 .circle-container {
  flex-grow: 0;
  flex-shrink: 0;/*
  margin-right:40px;*/
  margin-top:220px;
}

#paragraph5 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
}

#paragraph5 .hidden {
  visibility: visible;
  margin-right:100px;
  margin-top:210px;
  font-family: fluxisch-else;
}

#paragraph5 .frame {
  visibility: visible;
  margin-right:20%;
  margin-top:40px;
}


#paragraph5 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}


#paragraph6 .circle-container {
  flex-grow: 0;
  flex-shrink: 0;/*
  margin-right:20px;*/
  margin-top:120px;
}

#paragraph6 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
}

#paragraph6 .hidden {
  visibility: visible;
  margin-right:110px;
  margin-top:110px;
  font-family: fluxisch-else;
}

#paragraph6 .frame {
  visibility: visible;
  margin-right:20%;/*
  margin-top:20px;*/
}


#paragraph6 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}


#paragraph7 .circle-container {
  flex-grow: 0;
  flex-shrink: 0;/*
  margin-right:20px;*/
  margin-top:150px;
}

#paragraph7 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
}

#paragraph7 .hidden {
  visibility: visible;
  margin-right:10%;
  margin-top:140px;
  font-family: fluxisch-else;
}

#paragraph7 .frame {
  visibility: visible;
  margin-right:20%;/*
  margin-top:20px;*/
}


#paragraph7 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}

#paragraph8 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}

#paragraph9 .circle-container {
  flex-grow: 0;
  flex-shrink: 0;/*
  margin-right:20px;*/
  margin-top:150px;
}

#paragraph9 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
}

#paragraph9 .hidden {
  visibility: visible;
  margin-right:10%;
  margin-top:140px;
  font-family: fluxisch-else;
}

#paragraph9 .frame {
  visibility: visible;
  margin-right:20%;
  margin-top:20px;
}


#paragraph9 .paragraph {
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  font-family: "fluxisch-else";
  color: black;
  margin-left: 60px;
  margin-top: 10px;
}