darkfi/script/research/blockchain-explorer/site/static/style.css

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-files/Inter-Regular.woff2?v=3.19") format("woff2"),
       url("font-files/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url("font-files/Inter-Italic.woff2?v=3.19") format("woff2"),
       url("font-files/Inter-Italic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("font-files/Inter-Bold.woff2?v=3.19") format("woff2"),
       url("font-files/Inter-Bold.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url("font-files/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
       url("font-files/Inter-BoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'InterDisplay';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url("font-files/InterDisplay-Black.woff2?v=3.19") format("woff2"),
       url("font-files/InterDisplay-Black.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'InterDisplay';
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: url("font-files/InterDisplay-BlackItalic.woff2?v=3.19") format("woff2"),
       url("font-files/InterDisplay-BlackItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'InterDisplay';
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: url("font-files/InterDisplay-ExtraLight.woff2?v=3.19") format("woff2"),
       url("font-files/InterDisplay-ExtraLight.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Chomsky';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src:  url("font-files/Chomsky.woff2?v=3.19") format("woff2"),
        url("font-files/Chomsky.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-files/IBMPlexMono-Light.woff2") format("woff2"),
	   url("font-files/IBMPlexMono-Light.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'WeissRundgotisch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-files/weissrundgotisch.regular.woff2") format("woff2"),
     url("font-files/weissrundgotisch.regular.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'IBMPlexSansArabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-files/IBMPlexSansArabic-Regular.woff2") format("woff2"),
     url("font-files/IBMPlexSansArabic-Regular.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'ReemKufi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("font-files/ReemKufi-Bold.woff2") format("woff2"),
     url("font-files/ReemKufi-Bold.woff?v=3.19") format("woff");
}

/* */

body{
	font-family: 'Inter', sans-serif;
	font-style:normal;
	font-weight:700;
	background:#090909;
  text-align:inherit;
}

.description{
  margin-top:30px;
}

p{
  font-family: 'IBMPlexMono', monospace;
	font-style:normal;
	font-weight:400;
}

h1{
	font-family: 'InterDisplay', sans-serif;
	font-style:normal;
	font-weight:900;
}

h3 a{
  color:#00ffff;
  text-decoration:none;
}

h3 a:hover{
  color:#4c9fb5;
}

.main-text{
  padding-bottom:70px;
  background-color:#001111;
  background-image:url('img/sunset.png');
  background-position:bottom;
  background-repeat:no-repeat;
}

.border-st{
	border-radius:0;
}

.border-l1{
  font-size:56px;
  text-align:center;
	text-shadow: 0px 0px 5px #0ff;
	line-height:1.3em;
  padding-left:100px;
  padding-right:100px;
}

.border-l{
  font-size:36px;
  text-align:center;
  font-weight:100;
  letter-spacing:1px;
  color:#005b60;
	/* text-shadow: 0px 0px 2px #0ff; */
	line-height:1.3em;
  padding-top:70px;
  padding-left:180px;
  padding-right:180px;
}

.border-f{
border-left-width:1px;
border-left-style:solid;
border-left-color:#0ff;
text-shadow: 0px 0px 5px #0ff;
line-height:1.1em;
padding-left:48px;
}

.border-l2{
	border-left-width:1px;
	border-left-style:solid;
	border-left-color:#0ff;
	font-family: 'WeissRundgotisch', blackletter;
	font-style:normal;
	font-weight:400;
  font-size:2em;
  line-height:.85em;
}

.border-l3{
	/* text-shadow: 0px 0px 5px #0ff; */
	line-height:1.1em;
	/*filter:blur(20px);*/
	/*transition: ease-in-out 10s;*/
}

a:hover{
	text-decoration:none;
}

.mobile{
  display:none;
}

.news{
	padding-top:48px;
	padding-bottom:48px;
}

.info{
	font-family: 'IBMPlexMono', monospace;
	font-style:  normal;
	font-weight: 400;
	font-size:12px;
	letter-spacing:0.12em;
	border-left:1px solid #0ff;
}

.dl-bt{
  display:inline-block;
  background-color:#000;
	transition:ease-in-out 0.15s;
  border:1px solid #00282e;
  color:#fff;
  font-family:'IBMPlexMono',monospace;
  font-weight:400;
}

.dl-bt:hover{
	background-color:#000c0d;
  border:1px solid #00282e;
  color:#82b2b5;
}

.button-insights,.button-insights span{
  transition:ease .2s;
  color:#80ffff;

}

.button-insights:hover{
  background:#180606;
}

.button-insights:hover span{
    color:#0ff;
}

.title-block{
  background-image:url('img/sunset.png');
  background-position:bottom;
  background-repeat:no-repeat;
}

footer{
  background-color:#090909;
  background-image:url('img/sunset2.png');
  background-position:bottom;
  background-repeat:no-repeat;
	height:10vw;
    bottom: 0;
    width: 100%;
}

.navbar-toggler{
	border-radius:0px;
	border-color:#6c757d;
	opacity:1;
}

.navbar{
  padding-left:10px;
  padding-right:10px;
  padding-top:0;
  padding-bottom:0;
  background:#000;
}

.nav-item a{
  margin-left:10px;
  font-family:'IBMPlexMono', monospace;
  font-weight:400;
  font-size:.8em;
  color:#fff;
}

.nav-link{
  font-size:.6em;
  color:#fff;
}

.nav-item a:hover{
  color:red;
}

.a{
	background-color:rgba(0, 0, 0, 0);
	transition: ease-in-out 0.2s;
}

.b{
	background-color:#000;
	border-bottom:1px solid #6c757d;
	padding-top:0px;
	padding-bottom:0px;
}

.b 	.nav-link{
	border:0;
}

.b .navbar-brand img{
	max-height:30px;
	padding:0;
}

.b .border-st{
	padding-bottom:0;
	padding-top:0;
}

.quote{
	border-left:1px solid #0ff;
  background-color:#001615;
  padding-top:15px;
  padding-bottom:15px;
  padding-right:15px;
}

.quote-src{
  font-family: 'IBMPlexMono', monospace;
  font-size:.8em;
  color:#fff;
  display:inline-block;
  border-left:1px solid #0ff;
  padding-top:10px;
}

.btn:hover{
	color:#000;
	background-color:#000;
}

a:hover .btn {
	color:#000;
}

.icon-sm{
		vertical-align:middle;
    width:30px;
	}

/* Manifesto */

.p-text{
	font-family: 'Inter';
	font-style:  normal;
	font-weight: 400;
	padding:48px;
}

h4{
	font-size:2em;
	padding-left:0.5em;
	border-left-width:1px;
	border-left-style:solid;
	border-left-color:#0ff;

	font-family: 'InterDisplay', sans-serif;
	font-style:normal;
	font-weight:800;
}

.p-text a{
	color:#0ff;
	border-bottom:1px solid #0ff;
	padding-bottom:2px;
	transition:ease-in-out 0.3s;
}

.p-text a:hover{
	color:#00ffa3;
	border-bottom:1px solid #00ffa3;
}

.l-ph{
	background:url("img/manifesto.jpg") fixed;
  background-position:right;
}

.l-ph-ar{
	background:url("img/manifesto.jpg") fixed;
  background-position:left;
}

#manifesto{
  max-width:700px;
}

.quote-code{
  font-family: 'IBMPlexMono', monospace;
  font-style:  normal;
  font-weight: 400;
  display:block;
  padding:10px;
}

code{
  color:#fff;
  background:#001615;
  padding:2px;
  font-size:1.1em;
  color:#D8E8E2;
}

#language{
  font-family: 'IBMPlexMono', monospace;
  font-style:  normal;
  font-weight: 400;
  color:#a0a0a0;
  margin-bottom:30px;
}

#language a{
  color:#a0a0a0;
  border-bottom:1px solid #a0a0a0;
}

#language a:hover{
  color:#fff;
  border-bottom:1px solid #fff;
}

/* Manifesto Arabic */

.p-text-ar{
  font-family: 'IBMPlexSansArabic';
  font-style: normal;
  font-weight: 400;
  font-size:1.1em;
	padding:48px;
}

.quote-ar{
	border-right:1px solid #0ff;
  background-color:#001615;
  padding-top:15px;
  padding-bottom:15px;
  padding-right:15px;
}

.quote-src-ar{
  font-family: 'IBMPlexMono', monospace;
  font-size:1em;
  color:#fff;
  display:inline-block;
  border-right:1px solid #0ff;
  padding-top:10px;
}

.h4-ar{
	font-size:2em;
	padding-right:0.5em;
	border-right-width:1px;
	border-right-style:solid;
	border-right-color:#0ff;
  border-left-width:0;
  border-left-style:none;
	font-family: 'InterDisplay', sans-serif;
	font-style:normal;
	font-weight:black;
}

/* Overview */

.lead-text{
  padding:48px;
}

.source-list{
  border-left: 1px solid #00ffff;
}

/* Community */

.comm{
  padding-left:48px;
}

h5{
	font-size:2em;
	padding-left:0.5em;
	border-left-width:1px;
	border-left-style:solid;
	border-left-color:#0ff;

	font-family: 'InterDisplay', sans-serif;
	font-style:normal;
	font-weight:800;
}

h5 a{
	color:#fff;
	border-bottom:1px solid #0ff;
	transition:ease-in-out 0.3s;
}

h5 a:hover{
	color:#f00;
	border-bottom:1px solid #f00;
}

/* Media */

.media-text{
  font-family:Weissrundgotisch;
  color:#005458;
  text-shadow: 0 0 5px #002e4a;
  -webkit-text-stroke: .5px #001f1f;
}

/* Download */

.dl-info{
	font-family: 'IBMPlexMono', monospace;
	font-style:  normal;
	font-weight: 400;
	font-size:15px;
	letter-spacing:0.12em;
	border-left:1px solid #0ff;
}

.navbarb{
  display:none;
}

/* Responsive */

@media (max-width: 400px) {
  .comm{
    padding-left:30px;
  }
}

@media (max-width: 590px) {
	.navbar-brand img
	{
		max-height:40px;
	}

	.about
	{
		font-size:4.5vw;
	}

	footer{
		height:60vw;
	}

	.icon-sm{
		max-width:20px;
		vertical-align:middle;
	}

	.p-text{
		font-size:14px;
		padding:24px;
	}
}

.mail{
	display:inline-block;
}

@media (max-width: 991px) {

  .border-l1{
    padding-left:60px;
    padding-right:60px;
  }

  .news{
	padding-top:0px;
	padding-bottom:48px;
}

.border-l{
  padding-left:100px;
  padding-right:100px;
}

}

@media (max-width: 767px) {
	.border-st{
	background-color:#000;
}

.border-l{
  padding-left:70px;
  padding-right:70px;
}

.navbarb{
  display:block;
  margin:0;
  padding:0;
}

	.img-dl{
		display:none;
	}

	.dl-info-v{
		display:none;
	}

	.navbar-nav{
	margin:auto;
}

}

@media (max-width: 730px) {

  .lead-text{
    padding:24px;
  }

		.display-1
	{
		font-size:10vw;
	}

  .space{
    display:none;
  }

  .desktop{
    display:none;
  }

  .mobile{
    display:block;
  }

		.border-l
	{
      padding-left:20px;
      padding-right:20px;
  		font-size:7vw;
	}

  .border-f,.border-l3{
  border-left-width:1px;
}

.media-text{
  font-size:1.7em;
}
}


@media (max-width: 350px) {
	.navbar-brand img
	{
		max-height:30px;
	}

  .border-l1{
    padding-left:20px;
    padding-right:20px;
  }

  .border-l
{
    padding-left:10px;
    padding-right:10px;
}
}

/* ___________________ */


.container2 {
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.navbar2 {
  width: 100%;
}

.nav-container2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}

.navbar2 .menu-items {
  display: flex;
}

.navbar2 .nav-container2 li {
  list-style: none;
}

.navbar2 .nav-container2 a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

/*.navbar2 .nav-container2 a:hover{
}*/

.nav-container2 {
  display: block;
  position: relative;
}

.nav-container2 .checkbox {
  position: absolute;
  display: block;
  height: 40px;
  width: 40px;
  top: 0px;
  right: 0px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container2 .hamburger-lines {
  display: block;
  height: 15px;
  width: 20px;
  position: absolute;
  top: 12px;
  right: 0px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container2 .hamburger-lines .line {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 0;
  background: #fff;
}

.nav-container2 .hamburger-lines .line1 {
  transform-origin: 0% 0%;
/*  transition: transform 0.4s ease-in-out;*/
}

.nav-container2 .hamburger-lines .line2 {
/*  transition: transform 0.2s ease-in-out;*/
}

.nav-container2 .hamburger-lines .line3 {
  transform-origin: 0% 100%;
/*  transition: transform 0.4s ease-in-out;*/
}

.menu-items {
  background:#000;
  margin-top:-10px;
  /*height: 100vh;*/
  width: 150px;
  transform: translate(150%);
  display: flex;
  flex-direction: column;
  margin-left:0;
  margin-right:0;
  padding-top:50px;
  transition: transform 0.5s ease-in-out;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
}

.navbar2 .menu-items li {
  display:inline-block;
  width:100%;
  padding:5px;
  margin-left:auto;
  margin-right:auto;
  border-bottom:1px solid #fff;
}

.navbar2 .menu-items li a{
    color:#fff;
    font-size:1rem;
}

.nav-container2 input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container2 input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container2 input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container2 input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container2 input[type="checkbox"]:checked ~ .logo{
  display: none;
}

/* Container holding an image with text on top */
.background-container {
  position: relative;
  text-align: center;
  color: white;
}

/* Top centered text inside a background-container */
.top-centered {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -25%);
}