@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%); }