@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Archivo:ital,wght@0,100..900;1,100..900&family=Audiowide&family=Comfortaa:wght@300..700&family=Manufacturing+Consent&family=Michroma&family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&family=Quicksand:wght@300..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
padding: 0;
margin: 0;
}
.mySlides {
display: none;
}
.passing3{
animation: changeopacity 0.5s linear 1;
}
@keyframes changeopacity {
0% {opacity: 0.3;filter:blur(5px)}
100% {opacity: 1;filter:blur(0px)}
}
.b1 {
background-image: url("ngcsub.jpg");
background-position: center;
background-size: cover;
}
.bb3 {
background-image: url("plaster3dz.jpg");
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.indexbody {
/* background-size: cover;
background-attachment: fixed;
overflow-x:hidden;
background-position: center center;
padding: 0;
margin: 0 0 0 0;
box-sizing: border-box;
background-image: url("data:image/svg+xml,"), url("ddfg8.png"); */
background-color:rgb(30,30,30);
}
/* width */
::-webkit-scrollbar {
width: 17px;
}
.download-container{
position: fixed;
top: 14px;
left: 100px;
background-color: rgb(30, 30, 30);
width: 260px;
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: center;
color:white;
z-index:11;
overflow:hidden;
clip-path:path("M 0 20 L 15 0 L 70 0 L 80 5 L 180 5 L 190 0 L 245 0 L 260 20 L 230 20 L 230 30 L 260 30 L 245 50 L 190 50 L 180 45 L 80 45 L 70 50 L 15 50 L 0 30 L 30 30 L 30 20 L 0 20 Z");
}
.download-container:hover{
color: #000000;
}
.download-container::before{
content:'';
position: absolute;
left: var(--xPos);
top: var(--yPos);
transform: translate(-50%, -50%);
width: 0;
height: 0;
background-image: linear-gradient(45deg, #14ffe7, #ffeb3b, #ff00e0);
border-radius: 50%;
transition:width 0.5s, height 0.5s;
z-index:-1;
}
.download-container:hover::before{
width:600px;
height:600px;
color:#000000;
}
@media screen and (max-width: 1024px){
.download-container a{
position:absolute;
top:5px;
left:95px;
position: fixed;
}
.download-container span{
left:150px;
}
.download-container i:first-child{
left:10px;
}
.download-container i:last-child{
left:30px;
}
}
.vidnew-3 {
float: right;
border-radius: 30px;
border: 3px solid #ff8000;
margin: 30px;
}
.archi {
background-image: url("lasipustyniabl8.png");
background-position: left center;
}
.center-50 {
display: flex;
justify-content: center;
z-index: 2;
}
.center-51 {
display: flex;
justify-content: center;
z-index: 2;
}
.circle {
position: relative;
width: 300px;
height: 300px;
background: #ff8000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
position: absolute;
background: url(simm.jpg);
width: 250px;
height: 250px;
background-size: cover;
border-radius: 50%;
}
.imginwindowff{
position:fixed;
cursor: pointer;
top:50%;
left:50%;
transform: translate(-50%, -50%) scale(0.7);
z-index: 100;
box-shadow: 0px 0px 20px 10px black;
border-radius: 50%;
max-width: 90vw;
max-height: 80vh;
}
.imginwindowff img{
width:100%;
height:100%;
object-fit:cover;
max-width: 90vw;
max-height: 80vh;
border-radius:50%;
border: 5px solid rgb(200,200,200);
}
.text {
position: absolute;
width: 100%;
height: 100%;
animation: animation97 10s linear infinite;
}
@keyframes animation97 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.text span {
position: absolute;
left: 50%;
font-size: 0.9em;
transform-origin: 0 150px;
}
.adjust {
position: relative;
float: right;
z-index: 1;
shape-outside: circle(50%);
shape-margin: 0;
margin: 25px 5px 5px 5px;
user-select: none;
}
@media screen and (max-width: 425px){
.pierw .adjust{
display:flex;
float:none;
justify-content:center;
transform:scale(0.8);
width:fit-content;
float:none;
margin:0;
}
::-webkit-scrollbar {
width: 0px;
display:none;
}
::-webkit-scrollbar-track {
background:none;
display:none;
}
::-webkit-scrollbar-thumb {
background:none;
display: none;
}
}
.orang {
color: rgb(0, 0, 0);
text-shadow: none;
}
.ex5 {
width: 26%;
user-select: none;
margin: 30px 15px 15px 0px;
}
html {
scroll-behavior: smooth;
}
@media screen and (max-width: 425px){
body {
overflow-x: hidden;
width: 100vw;
}
.indexbody{
overflow-x: hidden;
width: 100vw;
background-attachment: fixed;
background-position-x: center;
}
html {
overflow-x: hidden;
width:100vw;
}
}
.sidebar {
position: fixed;
transform-origin: left top;
user-select: none;
width: 440px;
height: 360px;
display: none;
padding-top: 130px;
padding-bottom: 100px;
z-index: 12;
top: 0;
left: 0;
background: url("moon.jpg");
background-size: 700px 700px;
text-wrap: nowrap;
text-align: center;
font-size: 13px;
border-radius:35px;
border: 5px solid orangered;
text-transform: uppercase;
transition:0.5s;
overflow:hidden;
}
.sidebar::before {
position: absolute;
content: "";
width: 300px;
transform: translate(-50%, -50%);
top: -10px;
left: 0;
background: orangered;
aspect-ratio: 1;
clip-path: shape(from 96.07% 43.2%,curve to 96.07% 56.8% with 100% 50%,line to 78.93% 86.5%,curve to 67.14% 93.3% with 75% 93.3%,line to 32.86% 93.3%,curve to 21.07% 86.5% with 25% 93.3%,line to 3.93% 56.8%,curve to 3.93% 43.2% with 0% 50%,line to 21.07% 13.5%,curve to 32.86% 6.7% with 25% 6.7%,line to 67.14% 6.7%,curve to 78.93% 13.5% with 75% 6.7%);
}
.sidebar::after {
position: absolute;
content: "";
width: 300px;
transform: translate(-50%, -50%);
top: 115%;
left: 100%;
background: orangered;
aspect-ratio: 1;
clip-path: shape(from 96.07% 43.2%,curve to 96.07% 56.8% with 100% 50%,line to 78.93% 86.5%,curve to 67.14% 93.3% with 75% 93.3%,line to 32.86% 93.3%,curve to 21.07% 86.5% with 25% 93.3%,line to 3.93% 56.8%,curve to 3.93% 43.2% with 0% 50%,line to 21.07% 13.5%,curve to 32.86% 6.7% with 25% 6.7%,line to 67.14% 6.7%,curve to 78.93% 13.5% with 75% 6.7%);
}
.ex5 {
width: 100%;
margin: 0px 0px 0px 0px;
}
.topnav-new{
display:flex;
justify-content:space-between;
align-items:center;
position:fixed;
width:370px;
top:5px;
left:5px;
background-color:rgba(0, 0, 0, 0.3);
z-index:14;
height:70px;
border-radius:40px;
}
@media screen and (max-width:1024px){
.topnav-new{
position:absolute;
top:5px;
left:5px;
}
}
.hidethis {
overflow: hidden;
}
#logg {
width: 23%;
top:10px;
left:50%;
transform: translateX(-50%);
position: absolute;
transform-origin: center center;
padding: 7px;
filter: drop-shadow(0px 0px 2px rgb(255, 255, 255));
}
#logg:hover {
background-color:rgb(70, 70, 70);
left:50%;
top:10px;
position:absolute;
transform-origin:center center;
transform: translateX(-50%);
border-radius: 50%;
animation:logospin 0.5s linear 1 both;
aspect-ratio: 1;
width:23%;
padding: 7px;
clip-path: shape(from 96.07% 43.2%,curve to 96.07% 56.8% with 100% 50%,line to 78.93% 86.5%,curve to 67.14% 93.3% with 75% 93.3%,line to 32.86% 93.3%,curve to 21.07% 86.5% with 25% 93.3%,line to 3.93% 56.8%,curve to 3.93% 43.2% with 0% 50%,line to 21.07% 13.5%,curve to 32.86% 6.7% with 25% 6.7%,line to 67.14% 6.7%,curve to 78.93% 13.5% with 75% 6.7%);
}
@keyframes logospin{
from{transform:translateX(-50%) rotateZ(0deg);}
to{transform:translateX(-50%) rotateZ(-45deg);}
}
#logg:not(:hover) {
background-color:transparent;
border-radius: 50%;
animation:backwardspin 0.5s linear 1;
}
@keyframes backwardspin{
from{transform:translateX(-50%)rotateZ(-45deg);}
to{transform:translateX(-50%) rotateZ(0deg);}
}
@media screen and (max-width: 425px) {
#logg {
width:15%;
left:50%;
position:absolute;
transform-origin:center center;
transform: translateX(-50%);
}
#logg:not(:hover) {
transform-origin:center center;
left:50%;
position:absolute;
background-color:transparent;
border-radius: 50%;
animation:backwardspin 0.5s linear 1;
}
}
.hamburger {
transform-origin: center center;
border-radius: 50%;
position: fixed;
border: 15px solid rgb(255, 94, 0);
top: 0;
left: 0;
background-color: rgb(30, 30, 30);
width: 50px;
height: 50px;
justify-content: center;
display: flex;
align-items: center;
gap: 7px;
flex-direction: column;
z-index: 13;
cursor: pointer;
aspect-ratio: 1;
clip-path: shape(from 93.43% 62.37%,curve to 83.08% 80.74% with 93.56% 74.55%,line to 61% 93.8%,curve to 39.92% 94.02% with 50.52% 100%,line to 17.57% 81.43%,curve to 6.84% 63.28% with 6.96% 75.45%,line to 6.57% 37.63%,curve to 16.92% 19.26% with 6.44% 25.45%,line to 39% 6.2%,curve to 60.08% 5.98% with 49.48% 0%,line to 82.43% 18.57%,curve to 93.16% 36.72% with 93.04% 24.55%);
}
.hamburger.active:hover{
top: 11.5px;
left: 12.5px;
position:fixed;
border-radius:50%;
background-color: rgb(70, 70, 70);
width:25px;
background-image:none;
height:25px;
}
.hamburger:hover{
border-color: rgb(255,0,0);
background-image: linear-gradient(45deg, #14ffe7, #ffeb3b, #ff00e0);
}
.hamburger:hover .cross-line {
background-color: rgb(0, 0, 0);
}
.hamburger.active {
border-color: transparent;
background-color: transparent;
animation:hamburgerrotate 0.5s ease-in-out forwards;
}
@keyframes hamburgerrotate{
from{transform:rotateZ(0deg);}
to{transform:rotateZ(90deg);}
}
.hamburger.active .cross-line:nth-child(2) {
opacity: 0;
}
.hamburger.active .cross-line:nth-child(1) {
transform: translateY(10px) rotateZ(45deg);
}
.hamburger.active .cross-line:nth-child(3) {
transform: translateY(-10px) rotateZ(-45deg);
}
.cross-line {
width: 25px;
height: 3px;
background-color: white;
z-index: 12;
}
.expanded {
display: block;
}
.hidden {
display: none;
}
@media screen and (max-width: 1440px){
div.ex1 {
width:70%;
}
.sidebar {
position:fixed;
}
.menu {
font-size: 14px;
padding: 15px 15px 15px 55px;
margin-left: 14px;
}
.item a{
font-size:10px;
}
}
@media screen and (max-width: 1024px) {
.sidebar {
position:absolute;
height:fit-content;
transition:0.5s;
top:0;
left:0;
}
.hamburger{
position:absolute;
top:0;
left:0;
}
.menu:nth-of-type(1) .item.show,
.menu:nth-of-type(2) .item.show,
.menu:nth-of-type(3) .item.show,
.menu:nth-of-type(4) .item.show,
.menu:nth-of-type(5) .item.show,
.menu:nth-of-type(6) .item.show,
.menu:nth-of-type(7) .item.show,
.menu:nth-of-type(8) .item.show {
max-width: 320px;
text-wrap: wrap;
}
.hamburger.active .cross-line:nth-child(2) {
opacity: 0;
}
.hamburger.active .cross-line:nth-child(1) {
transform: translateY(8px) rotateZ(45deg);
}
.hamburger.active .cross-line:nth-child(3) {
transform: translateY(-8px) rotateZ(-45deg);
}
.cross-line {
width: 12px;
height: 1px;
}
}
/* @media screen and (max-width: 425px) {
.sidebar {
position: fixed;
transform: scale(0.5);
height:fit-content;
transition:0.5s;
top:0;
left:0;
}
.menu:nth-of-type(1) .item.show,
.menu:nth-of-type(2) .item.show,
.menu:nth-of-type(3) .item.show,
.menu:nth-of-type(4) .item.show,
.menu:nth-of-type(5) .item.show,
.menu:nth-of-type(6) .item.show,
.menu:nth-of-type(7) .item.show,
.menu:nth-of-type(8) .item.show {
max-width: 250px;
text-wrap: wrap;
}
.hamburger{
position:fixed;
top:0;
left:0;
}
} */
/* new content */
body.menu-open {
overflow: hidden;
}
@media screen and (max-width: 1280px) {
.download-container a {
width: min(240px, calc(100vw - 108px));
}
.sidebar {
top:0;
left:0;
width: min(450px, calc(100vw - 20px));
max-width: calc(100vw - 20px);
height: calc(100dvh - 200px);
padding-top: 100px;
padding-bottom: 24px;
border-radius: 26px;
transform: none;
background-size: cover;
}
.sidebar::after {
width: 310px;
}
.sidebar::before{
width: 250px;
}
#logg {
width: 52px;
top: 18px;
}
.menu {
position: relative;
margin: 0 0 0 0;
padding: 0px 0px 0px 0px;
min-height: 30px;
font-size: 12px;
line-height: 1.2;
}
.menu.darkgrey {
border-radius: 40px 0px 0px 40px;
}
.menu .fas {
margin-left:-10px;
left: 14px;
font-size: 18px;
}
.menu .item.show,
.menu:nth-of-type(1) .item.show,
.menu:nth-of-type(2) .item.show,
.menu:nth-of-type(3) .item.show,
.menu:nth-of-type(4) .item.show,
.menu:nth-of-type(5) .item.show,
.menu:nth-of-type(6) .item.show,
.menu:nth-of-type(7) .item.show,
.menu:nth-of-type(8) .item.show {
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%);
display: flex;
width: auto;
max-width: none;
margin: 12px 0 0;
padding: 8px 0;
border-radius: 18px;
box-shadow: none;
background-image: linear-gradient(180deg, rgba(255, 69, 0, 0.95), rgba(120, 18, 0, 0.96));
}
.menu .item.show::before,
.menu .item.show::after,
.menu:nth-of-type(1) .item.show::before,
.menu:nth-of-type(1) .item.show::after,
.menu:nth-of-type(2) .item.show::before,
.menu:nth-of-type(2) .item.show::after,
.menu:nth-of-type(3) .item.show::before,
.menu:nth-of-type(3) .item.show::after,
.menu:nth-of-type(4) .item.show::before,
.menu:nth-of-type(4) .item.show::after,
.menu:nth-of-type(5) .item.show::before,
.menu:nth-of-type(5) .item.show::after,
.menu:nth-of-type(6) .item.show::before,
.menu:nth-of-type(6) .item.show::after,
.menu:nth-of-type(7) .item.show::before,
.menu:nth-of-type(7) .item.show::after,
.menu:nth-of-type(8) .item.show::before,
.menu:nth-of-type(8) .item.show::after {
content: none;
display: none;
}
.item a {
display: block;
padding: 9px 16px;
white-space: normal;
word-break: break-word;
}
}
@media screen and (max-width: 768px) {
.topnav-new {
width: calc(100vw - 10px);
left: 5px;
right: 5px;
height:100vh;
}
.download-container a {
left: 82px;
width: calc(100vw - 172px);
min-width: 150px;
max-width: none;
height: 44px;
font-size: 13px;
}
.download-container a:hover {
left: 82px;
top: 10px;
}
.hamburger {
width: 46px;
height: 46px;
border-width: 10px;
}
.cross-line {
width: 22px;
}
.sidebar {
position:fixed;
width: 100vw;
max-width: 100vw;
left: 0;
top: 0;
height: calc(100dvh - 62px);
border-radius: 0 0 22px 22px;
padding-inline: 8px;
}
.sidebar::before,
.sidebar::after {
width: 180px;
}
.menu {
margin-inline: 0;
padding-left: 48px;
padding-right: 12px;
font-size: 11px;
}
.menu .item.show,
.menu:nth-of-type(1) .item.show,
.menu:nth-of-type(2) .item.show,
.menu:nth-of-type(3) .item.show,
.menu:nth-of-type(4) .item.show,
.menu:nth-of-type(5) .item.show,
.menu:nth-of-type(6) .item.show,
.menu:nth-of-type(7) .item.show,
.menu:nth-of-type(8) .item.show {
position: static !important;
transform: none !important;
top: auto !important;
left: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 0;
border-radius: 14px;
animation: none !important;
}
}
@media screen and (max-width: 390px) {
.sidebar {
top:0;
left:0;
height: calc(100dvh - 58px);
padding-top: 90px;
padding-inline: 4px;
border-radius: 0 0 18px 18px;
}
.menu {
font-size: 10px;
min-height: 44px;
padding: 10px 10px 10px 42px;
}
.menu .fas {
left: 10px;
font-size: 14px;
}
.menu .item.show,
.menu:nth-of-type(1) .item.show,
.menu:nth-of-type(2) .item.show,
.menu:nth-of-type(3) .item.show,
.menu:nth-of-type(4) .item.show,
.menu:nth-of-type(5) .item.show,
.menu:nth-of-type(6) .item.show,
.menu:nth-of-type(7) .item.show,
.menu:nth-of-type(8) .item.show {
margin-top: 8px;
border-radius: 12px;
}
.item a {
font-size: 11px;
padding: 8px 12px;
}
}
@media screen and (max-width: 480px) {
.download-container a {
width: calc(100vw - 160px);
left: 76px;
padding-inline: 10px;
}
.download-container a span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu {
margin-inline: 6px;
padding: 12px 12px 12px 46px;
}
.menu .fas {
left: 12px;
font-size: 16px;
}
.item a {
padding: 8px 12px;
font-size: 12px;
}
}
.menu {
padding: 15px 15px 15px 55px;
color: rgb(255, 255, 255);
display: flex;
justify-content: flex-start;
margin-left: 14px;
align-items: center;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
}
.item {
display: none;
}
.menu:hover {
background-color: rgba(70, 70, 70, 0.8);
color: #04b404;
}
.black {
color: #04b404;
}
.menu .fas {
display:flex;
justify-content: center;
align-items: center;
position:absolute;
padding: 10px;
left:17px;
width: 25px; /* adjust to control the size */
aspect-ratio: 1;
color:white;
font-size:20px;
}
.menu .fas::after{
content: "";
position: absolute;
padding:10px;
width: 25px;
height: 25px;
background-color:rgb(255,255,255);
clip-path: shape(from 93.45% 64.37%,curve to 84.8% 79.72% with 93.56% 74.55%,line to 59.28% 94.82%,curve to 41.66% 95% with 50.52% 100%,line to 15.83% 80.45%,curve to 6.86% 65.28% with 6.96% 75.45%,line to 6.55% 35.63%,curve to 15.2% 20.28% with 6.44% 25.45%,line to 40.72% 5.18%,curve to 58.34% 5% with 49.48% 0%,line to 84.17% 19.55%,curve to 93.14% 34.72% with 93.04% 24.55%,line to 93.45% 64.37%,line to calc(93.14% - 1.73px) calc(34.72% - -0.61px),curve to calc(84.17% - 1.37px) calc(19.55% - -1.22px) with calc(93.04% - 1.72px) calc(24.55% - -1.02px),line to calc(58.34% - 0.33px) calc(5% - -1.8px),curve to calc(40.72% - -0.37px) calc(5.18% - -1.79px) with calc(49.48% - -0.02px) calc(0% - -2px),line to calc(15.2% - -1.39px) calc(20.28% - -1.19px),curve to calc(6.55% - -1.74px) calc(35.63% - -0.57px) with calc(6.44% - -1.74px) calc(25.45% - -0.98px),line to calc(6.86% - -1.73px) calc(65.28% - 0.61px),curve to calc(15.83% - -1.37px) calc(80.45% - 1.22px) with calc(6.96% - -1.72px) calc(75.45% - 1.02px),line to calc(41.66% - -0.33px) calc(95% - 1.8px),curve to calc(59.28% - 0.37px) calc(94.82% - 1.79px) with calc(50.52% - 0.02px) calc(100% - 2px),line to calc(84.8% - 1.39px) calc(79.72% - 1.19px),curve to calc(93.45% - 1.74px) calc(64.37% - 0.57px) with calc(93.56% - 1.74px) calc(74.55% - 0.98px),line to calc(93.14% - 1.73px) calc(34.72% - -0.61px));
}
.menu:hover .fas {
animation: dashrotate 0.4s linear 1;
color:#04b404;
}
@keyframes dashrotate {
0% {
transform: rotate(15deg) scale(0.9);
}
33% {
transform: rotate(-15deg) scale(1.1);
}
66% {
transform: rotate(15deg) scale(1.1);
}
100% {
transform: rotate(0deg) scale(0.9);
}
}
.item a {
color: rgba(255, 255, 255, 0.8);
padding: 5px;
}
.item a:hover {
background-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0.1),
rgb(0, 0, 0),
rgba(0, 0, 0, 0.1)
);
z-index: 13;
color: #04b404;
}
.item a:last-child {
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0px;
}
.item a:first-child {
border-top-right-radius: 30px;
border-top-left-radius: 0px;
}
.present {
display: block;
}
.menu.green .fas{
color:#04b404;
border-color:#04b404;
}
.menu:hover .fas::after{
color:#04b404;
border-color:#04b404;
background-color:#04b404;
}
.menu.darkgrey {
background-color: orangered;
color: black;
text-shadow:none;
/* border-top-right-radius: 20px;
border-bottom-right-radius: 20px; */
}
.menu.darkgrey .fas {
color:black;
background-color: transparent;
border-color: black;
}
.menu.darkgrey .fas::after {
color:black;
background-color: #000;
}
/* .menu:nth-child(1).darkgrey{
transform:translateY(calc(45px * 0));
}
.menu:nth-child(2).darkgrey{
transform:translateY(calc(45px * 1));
}
.menu:nth-child(3).darkgrey{
transform:translateY(calc(45px * 2));
} */
.menu .item.show {
box-shadow: 10px 10px 12px rgb(0, 0, 0);
color:white;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.closeback{
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
top: 70px;
left: 100%;
z-index:-4;
border-radius: 0px 20px 20px 0px;
animation: closeback 0.3s linear 1 both;
width: 550px;
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
}
@keyframes closeback{
from {
left: 550px;
}
to {
left: 0px;
}
}
.menu:nth-of-type(1) .item.show {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
z-index: 11;
top:var(--start-top, 0px);
left:var(--start-left, 500px);
border-radius: 0px 30px 30px 0px;
animation: showing 0.3s linear 1 both;
transform: translateY(-65px);
width: var(--start-width, 600px);
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
box-shadow:inset 0px 0px 0px 3px orangered;
}
.menu:nth-of-type(1) .item.show::after {
position: fixed;
content: "";
width: 40px;
height: 40px;
top: 115px;
left: -43px;
background-color: transparent;
box-shadow: 15px -15px 0px orangered;
border-radius: 20px;
z-index: 11;
}
.menu:nth-of-type(1) .item.show::before {
position: fixed;
content: "";
width: 40px;
height: 40px;
top: 25px;
left:-43px;
background-color: transparent;
box-shadow: -15px -15px 0px orangered;
border-radius: 20px;
z-index: 11;
transform:rotateZ(-180deg);
}
.menu:nth-of-type(2) .item.show {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
z-index: 11;
border-radius: 0px 30px 30px 0px;
top:var(--start-top, 0px);
left:var(--start-left, 100%);
width: var(--start-width, 600px);
animation: showing 0.3s linear 1 both;
transform: translateY(-180px);
box-shadow:inset 0px 0px 0px 3px orangered;
}
.menu:nth-of-type(2) .item.show::after {
position: fixed;
content: "";
width: 40px;
height: 40px;
top: 230px;
left: -43px;
background-color: transparent;
box-shadow: 15px -15px 0px orangered;
border-radius: 30px;
z-index: 11;
}
.menu:nth-of-type(2) .item.show::before {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:140px;
left:-43px;
background-color: transparent;
box-shadow: -15px -15px 0px orangered;
border-radius: 30px;
transform:rotateZ(-180deg);
z-index: 11;
}
.menu:nth-of-type(3) .item.show {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
z-index: 11;
top:var(--start-top, 0px);
left:var(--start-left, 500px);
border-radius: 0px 30px 30px 0px;
width: var(--start-width, 600px);
animation: showing 0.3s linear 1 both;
transform: translateY(-200px);
box-shadow:inset 0px 0px 0px 3px orangered;
}
.menu:nth-of-type(3) .item.show::after {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:250px;
left:-43px;
background-color: transparent;
box-shadow: 15px -15px 0px orangered;
border-radius: 30px;
z-index: 11;
}
.menu:nth-of-type(3) .item.show::before {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:160px;
left:-43px;
background-color: transparent;
box-shadow: -15px -15px 0px orangered;
border-radius: 30px;
z-index: 11;
transform:rotateZ(-180deg);
}
.menu:nth-of-type(4) .item.show {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
top:var(--start-top, 0px);
left:var(--start-left, 100%);
z-index: 11;
transform: translateY(-180px);
border-radius: 0px 30px 30px 0px;
width: var(--start-width, 600px);
animation: showing 0.3s linear 1 both;
box-shadow:inset 0px 0px 0px 3px orangered;
}
.menu:nth-of-type(4) .item.show::after {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:230px;
left:-43px;
border-radius:30px;
background-color: transparent;
box-shadow: 15px -15px 0px orangered;
z-index: 11;
}
.menu:nth-of-type(4) .item.show::before {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:140px;
left:-43px;
background-color: transparent;
box-shadow: -15px -15px 0px orangered;
border-radius: 30px;
transform:rotateZ(-180deg);
z-index: 11;
}
.menu:nth-of-type(5) .item.show {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
z-index: 11;
transform: translateY(-270px);
top:var(--start-top, 0px);
left:var(--start-left, 100%);
border-radius: 0px 30px 30px 0px;
width: var(--start-width, 600px);
animation: showing 0.3s linear 1 both;
box-shadow:inset 0px 0px 0px 3px orangered;
}
.menu:nth-of-type(5) .item.show::after {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:320px;
left:-43px;
background-color: transparent;
box-shadow: 15px -15px 0px orangered;
border-radius: 30px;
z-index: 11;
}
.menu:nth-of-type(5) .item.show::before {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:230px;
left:-43px;
background-color: transparent;
box-shadow: -15px -15px 0px orangered;
border-radius: 30px;
transform: rotateZ(180deg);
z-index: 11;
}
.menu:nth-of-type(6) .item.show {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
z-index: 11;
top:var(--start-top, 0px);
left:var(--start-left, 100%);
border-radius: 0px 30px 30px 0px;
width: var(--start-width, 600px);
transform: translateY(-380px);
animation: showing 0.3s linear 1 both;
box-shadow:inset 0px 0px 0px 3px orangered;
}
.menu:nth-of-type(6) .item.show::after {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:340px;
left:-43px;
background-color: transparent;
box-shadow: 15px -15px 0px orangered;
border-radius: 30px;
transform: rotateZ(90deg);
z-index: 11;
}
.menu:nth-of-type(6) .item.show::before {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:430px;
left:-43px;
background-color: transparent;
box-shadow: -15px -15px 0px orangered;
border-radius: 30px;
transform: rotateZ(-270deg);
z-index: 11;
}
.menu:nth-of-type(7) .item.show {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
z-index: 11;
top:var(--start-top, 390px);
left:var(--start-left, 100%);
border-radius: 0px 30px 30px 0px;
transform: translateY(-30px);
width: var(--start-width, 600px);
animation: showing 0.3s linear 1 both;
box-shadow:inset 0px 0px 0px 3px orangered;
}
.menu:nth-of-type(7) .item.show::after {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:-10px;
left:-43px;
background-color: transparent;
box-shadow: 15px -15px 0px orangered;
border-radius: 30px;
transform: rotateZ(90deg);
z-index: 11;
}
.menu:nth-of-type(7) .item.show::before {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:80px;
left:-43px;
background-color: transparent;
box-shadow: -15px -15px 0px orangered;
border-radius: 30px;
transform: rotateZ(-270deg);
z-index: 11;
}
.menu:nth-of-type(8) .item.show {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(
90deg,
orangered,
orangered,
rgb(100, 0, 0)
);
z-index: 11;
top:var(--start-top, 390px);
left:var(--start-left, 100%);
border-radius:0px 30px 30px 0px;
transform: translateY(-100px);
width: var(--start-width, 600px);
animation: showing 0.3s linear 1 both;
box-shadow:inset 0px 0px 0px 3px orangered;
}
.menu:nth-of-type(8) .item.show::after {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:60px;
left:-43px;
background-color: transparent;
box-shadow: 15px -15px 0px orangered;
border-radius: 30px;
transform: rotateZ(90deg);
z-index: 11;
}
.menu:nth-of-type(8) .item.show::before {
position: fixed;
content: "";
width: 40px;
height: 40px;
top:150px;
left:-43px;
background-color: transparent;
box-shadow: -15px -15px 0px orangered;
border-radius: 30px;
transform: rotateZ(-270deg);
z-index: 11;
}
/* .menu:nth-of-type(1) .item.show,
.menu:nth-of-type(2) .item.show,
.menu:nth-of-type(3) .item.show,
.menu:nth-of-type(4) .item.show,
.menu:nth-of-type(5) .item.show,
.menu:nth-of-type(6) .item.show,
.menu:nth-of-type(7) .item.show,
.menu:nth-of-type(8) .item.show {
top: var(--start-top, 0px);
left: var(--start-left, 100%);
border-radius: 0px 30px 30px 0px;
}
.menu:nth-of-type(1) .item.show::after,
.menu:nth-of-type(2) .item.show::after,
.menu:nth-of-type(3) .item.show::after,
.menu:nth-of-type(4) .item.show::after,
.menu:nth-of-type(5) .item.show::after,
.menu:nth-of-type(6) .item.show::after,
.menu:nth-of-type(7) .item.show::after,
.menu:nth-of-type(8) .item.show::after,
.menu:nth-of-type(1) .item.show::before,
.menu:nth-of-type(2) .item.show::before,
.menu:nth-of-type(3) .item.show::before,
.menu:nth-of-type(4) .item.show::before,
.menu:nth-of-type(5) .item.show::before,
.menu:nth-of-type(6) .item.show::before,
.menu:nth-of-type(7) .item.show::before,
.menu:nth-of-type(8) .item.show::before {
width: 30px;
height: 30px;
transform:translate(-490px,-30px) rotateZ(90deg);
border-radius: 30px;
z-index: 12;
}
.menu:nth-of-type(1) .item.show::after,
.menu:nth-of-type(2) .item.show::after,
.menu:nth-of-type(3) .item.show::after,
.menu:nth-of-type(4) .item.show::after,
.menu:nth-of-type(5) .item.show::after,
.menu:nth-of-type(6) .item.show::after,
.menu:nth-of-type(7) .item.show::after,
.menu:nth-of-type(8) .item.show::after {
top: var(--start-top-for-after, 0px);
left: var(--start-left-for-after, -30px);
box-shadow: 10px -10px 0px orangered;
transform:translate(-490px,-30px) rotateZ(90deg);
}
.menu:nth-of-type(1) .item.show::before,
.menu:nth-of-type(2) .item.show::before,
.menu:nth-of-type(3) .item.show::before,
.menu:nth-of-type(4) .item.show::before,
.menu:nth-of-type(5) .item.show::before,
.menu:nth-of-type(6) .item.show::before,
.menu:nth-of-type(7) .item.show::before,
.menu:nth-of-type(8) .item.show::before {
top: var(--start-top-for-before, 0px);
left: var(--start-left-for-before, -30px);
box-shadow: 10px 10px 0px orangered;
transform:translate(-490px,-30px) rotateZ(-270deg);
} */
@keyframes showing {
from {
left: 0px;
opacity: 0;
}
to {
left: 448px;
opacity: 1;
}
}
@font-face {
font-family: myFirstFont;
src: url(Noto-Sans.ttf.woff);
}
@font-face {
font-family: myFirstFont2;
src: url(nasalization.woff);
}
@font-face {
font-family: myThirdFont;
src: url(space_age.woff);
}
table,
td,
button,
li,
h3,
p,
div,
a {
font-family: "Michroma", sans-serif;
font-weight: 100;
font-style: normal;
font-size: 14px;
}
a {
text-decoration: none;
}
a.ex1:hover {
-webkit-animation-name: eexample; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
animation-name: eexample;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease-in-out;
}
@keyframes eexample {
0% {
color: #fa5858;
}
25% {
color: #fe9a2e;
}
50% {
color: #58acfa;
}
75% {
color: #58fa82;
}
100% {
color: orange;
}
}
a.ex1 {
color: #00ff00;
font-size: 14px;
font-weight: 100;
}
@media (max-width: 425px) {
a.ex1 {
font-size: 12px;
}
}
hr {
background-color: transparent;
border: none;
height: 4px;
width: 100%;
-webkit-animation-name: example6;
animation-name: example6;
animation-direction: alternate-reverse;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
z-index: 1;
transform: scale(0.5);
}
@keyframes example6 {
0% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent
);
filter: hue-rotate(0deg);
}
10% {
background-image: linear-gradient(
to right,
transparent,
#58acfa,
#58acfa,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent
);
filter: hue-rotate(36deg);
}
20% {
background-image: linear-gradient(
to right,
transparent,
transparent,
#58acfa,
#58acfa,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent
);
filter: hue-rotate(72deg);
}
30% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
#58acfa,
#58acfa,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent
);
filter: hue-rotate(108deg);
}
40% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
transparent,
#58acfa,
#58acfa,
transparent,
transparent,
transparent,
transparent,
transparent
);
filter: hue-rotate(144deg);
}
50% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
transparent,
transparent,
#58acfa,
#58acfa,
transparent,
transparent,
transparent,
transparent
);
filter: hue-rotate(180deg);
}
60% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
#58acfa,
#58acfa,
transparent,
transparent,
transparent
);
filter: hue-rotate(216deg);
}
70% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
#58acfa,
#58acfa,
transparent,
transparent
);
filter: hue-rotate(252deg);
}
80% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
#58acfa,
#58acfa,
transparent
);
filter: hue-rotate(288deg);
}
90% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
#58acfa,
#58acfa,
transparent
);
filter: hue-rotate(324deg);
}
100% {
background-image: linear-gradient(
to right,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent,
transparent
);
filter: hue-rotate(360deg);
}
}
.center8 {
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
}
.icon-bar {
transform-origin: center center;
transform: scale(0.6);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: absolute;
top: 90%;
width: fit-content;
left: 50%;
transform: translateX(-50%);
z-index: 999;
background-color: transparent;
padding: 0px 0px 0px 0px;
}
.icon-bar a {
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
color: black;
font-size: 18px;
width: 40px;
height: 40px;
border-radius: 50%;
margin: 10px;
transform: scale(0.8);
}
.icon-bar a:hover {
-webkit-animation-name: example7;
animation-name: example7;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: linear;
animation-timing-function: ease-in-out;
color: black;
transform: scale(1);
}
@keyframes example7 {
0% {
box-shadow: inset 0px 0px 2px 22px #04b404;
}
50% {
box-shadow: inset 0px 0px 2px 0px #04b404;
}
100% {
box-shadow: inset 0px 0px 2px 22px #04b404;
}
}
.content {
margin-left: 75px;
font-size: 30px;
}
#myBtn {
width: 80px; /* adjust to control the size */
aspect-ratio: 1;
clip-path: shape(from 93.43% 62.37%,curve to 83.08% 80.74% with 93.56% 74.55%,line to 61% 93.8%,curve to 39.92% 94.02% with 50.52% 100%,line to 17.57% 81.43%,curve to 6.84% 63.28% with 6.96% 75.45%,line to 6.57% 37.63%,curve to 16.92% 19.26% with 6.44% 25.45%,line to 39% 6.2%,curve to 60.08% 5.98% with 49.48% 0%,line to 82.43% 18.57%,curve to 93.16% 36.72% with 93.04% 24.55%);
display: none;
position: fixed;
top:85%;
left:90%;
z-index: 10;
font-size: 18px;
background-image: linear-gradient(45deg, #14ffe7, #ffeb3b, #ff00e0);
cursor: pointer;
padding-bottom: 10px;
transition-duration:0.3s;
color:rgb(0,0,0);
}
#myBtn::before{
content: "TOP";
position: absolute;
display:flex;
color:rgb(0,0,0);
justify-content: center;
align-items:last baseline;
top: 14%;
left: 50%;
background-color: transparent;
transform: translate(-50%, 5%);
}
#myBtn .fas {
color: rgb(0,0,0);
font-size:20px;
padding-top:33px;
}
#myBtn:hover {
background-color: rgb(103, 147, 1);
}
#myBtn:hover .fas {
color: rgb(255, 255, 255);
}
#myBtn:hover::before {
color: rgb(255, 255, 255);
}
.fadeout-75 {
animation: fadeout 0.5s linear 1;
}
@keyframes fadeout {
0%{
opacity: 0;
}
100%{
opacity: 1;
}}
div.ex1::first-letter {
color: #5fb404;
text-shadow: -1px 0 #ffff00, 0 1px #ffff00, 1px 0 #ffff00, 0 -1px #ffff00;
font-size: 50px;
float: left;
line-height: 0.9;
padding-right: 10px;
}
@media (max-width: 768px) {
#myBtn,
#myBtn:active,
#myBtn:hover {
position: fixed;
right: 100%;
transform: translateX(-50%);
bottom: 1%;
}
}
@media (max-width: 425px) {
div.ex1::first-letter {
font-size: 30px;
float: left;
line-height: 0.9;
padding-right: 5px;
}
}
/* div.pierw::first-letter {
color: #ffbf00;
font-weight: lighter;
font-size: 50px;
float: left;
line-height: 0.9;
padding-right: 10px;
text-shadow: -1px 0 #ffff00, 0 1px #ffff00, 1px 0 #ffff00, 0 -1px #ffff00;
} */
div.pierw1 p::first-letter {
color: #ffbf00;
font-weight: lighter;
font-size: 50px;
float: left;
line-height: 0.9;
padding-right: 10px;
text-shadow: -1px 0 #ffff00, 0 1px #ffff00, 1px 0 #ffff00, 0 -1px #ffff00;
}
#ex19::first-letter {
color: #5fb404;
text-shadow: -1px 0 #ffff00, 0 1px #ffff00, 1px 0 #ffff00, 0 -1px #ffff00;
font-size: 50px;
float: left;
line-height: 0.9;
padding-right: 10px;
}
.fas {
color: rgb(255, 255, 255);
}
.forcen {
margin-left: auto;
margin-right: auto;
display: block;
}
div.ex1 {
background: url("rootst.png") left top no-repeat rgb(40, 40, 40);
background-size: 600px 600px;
text-align: justify;
padding: 30px 30px 30px 60px;
line-height: 1.6;
color: #a5a5a5;
border-radius: 40px;
width: 70%;
margin-top: 40px;
margin-bottom: 40px;
margin-left: auto;
margin-right:auto;
display: block;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
font-family: "Michroma", sans-serif;
font-weight: 100;
letter-spacing: 1px;
font-size: 14px;
overflow: hidden;
mask:
radial-gradient(10px at 0 75%,#0000 98%,#000) 10px 50%/100% 40px repeat-y,
radial-gradient(10px at 50% 25%,#000 99%,#0000 101%) left/20px 40px repeat-y;
}
@media screen and (max-width: 768px) {
div.ex1 {
width: 70%;
font-size: 13px;
border-radius: 23px;
padding: 15px 15px 15px 50px;
text-align-last: center;
word-wrap: break-word;
text-indent: 30px;
box-shadow: none;
text-align:justify
}
img {
box-shadow: none;
}
img.ex6lit {
box-shadow: none;
border-width: 1px;
}
img.ex6z {
box-shadow: none;
border-width: 1px;
}
}
#ex19 {
background: url("rozek.png") left top no-repeat,
url("rozekod.png") right bottom no-repeat,
url("tlo.png") right bottom repeat;
background-size: 150px 150px;
padding: 15px;
border-left-width: 30px;
border-left-color: #df0101;
border-left-style: solid;
border-radius: 0px 30px 30px 0px;
padding: 30px;
text-align: justify;
width: 87%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
line-height: 1.6;
text-indent: 50px;
color: #2e2e2e;
font-size: 13px;
font-weight: bold;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
letter-spacing: 1px;
}
table.ex2 {
display: flex;
margin-top: 70px;
margin-bottom: 35px;
text-align: center;
align-self: center;
justify-items: center;
justify-content: center;
}
table.ex3 {
border-radius: 28px;
text-transform: uppercase;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 30px;
margin-bottom:30px;
width: fit-content;
border: 5px solid rgb(70,70,70);
text-align: center;
border-collapse: collapse;
background-image:linear-gradient(45deg, rgb(0, 255, 51), rgb(0, 123, 255))
}
td.ex11 {
letter-spacing: 2px;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
background-color: transparent;
border-bottom: 2px solid rgb(15,15,15);
}
td.ex11:last-child {
border-bottom: none;
}
td.ex11:first-child {
border-top-left-radius: 23px;
border-top-right-radius: 23px;
}
td.ex11:last-child {
border-bottom-left-radius: 23px;
border-bottom-right-radius: 23px;
}
td.ex11:hover {
background-color: rgb(223, 61, 2);
}
td.ex11:active {
background-color: rgb(0, 97, 44);
}
td.ex3 {
padding: 12px;
border-radius: 35px;
font-size: 12px;
background-image: linear-gradient(45deg, #14ffe7, #ffeb3b, #ff00e0);
border: 5px solid rgb(70,70,70);
z-index: 1;
text-align: center;
color: rgb(10,10,10);
text-transform: uppercase;
white-space: wrap;
font-weight: 900;
}
@media screen and (max-width: 768px) {
td.ex3 {
font-size: 10px;
padding: 12px;
border-radius:18px;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
max-width:40%;
}
}
td.ex4 {
border-bottom-left-radius: 30px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 30px;
border-color: #7cfc00;
border-style: solid;
padding: 0.4cm;
color: black;
font-size: 10px;
background-color: #134d00;
letter-spacing: 1px;
font-weight: 900;
text-transform: uppercase;
background: linear-gradient(45deg, #fa8258, #facc2e);
}
td.ex31 {
border-color: red;
border-width: 8px;
border-style: solid;
border-top-left-radius: 17px;
border-top-right-radius: 17px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
letter-spacing: 6px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 7px;
padding-left: 7px;
color: red;
font-size: 16px;
transition-duration: 0.4s;
z-index: 1;
position: relative;
text-transform: uppercase;
font-weight: 900;
background: linear-gradient(-135deg, #001a00, navy, #001a00, navy);
box-shadow: 0px 0px 4px 4px #7cfc00;
bottom: 10px;
}
td.ex31:hover {
transform: scale(1.2);
transition-duration: 0.4s;
z-index: 1;
position: relative;
text-transform: uppercase;
font-weight: 900;
background: linear-gradient(-135deg, #001a00, navy, #001a00, navy);
bottom: 10px;
}
img.ex6 {
width: 40%; /* adjust to control the size */
/* mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px; */
/* clip-path: polygon(4% 4%, 24% 4%, 26% 5%, 74% 5%, 76% 4%, 96% 4%, 96% 23%, 95% 28%, 95% 72%, 96% 77%, 96% 96%, 76% 96%, 74% 95%, 26% 95%, 24% 96%, 4% 96%, 4% 77%, 5% 72%, 5% 28%, 4% 23%); */
z-index: 2;
/* border-radius:20px; */
/* border: 3px solid rgb(200,200,200); */
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
display: block;
transition-duration: 0.3s;
filter: brightness(80%);
/* width: 400px;
height: 400px; */
border: 6px solid transparent;
border-radius: 25px;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(to right, #b9b9b9 0%, #505050 100%) border-box;
}
img.ex6:hover {
transform: scale(1.02);
transition-duration: 0.3s;
filter: brightness(100%);
}
@media screen and (max-width: 768px) {
img.ex6 {
border-radius: 15px;
border-width: 2px;
min-width: 70%;
mask:none;
}
}
.ex4 {
float: right;
border-radius: 50%;
shape-outside: circle();
border: 2px #ff8000 solid;
transition-duration: 1s;
}
.ex4:active {
border-width: 6px;
transition: 1s;
}
@media (max-width: 425px) {
.ex4 {
border-width: 2px;
}
}
.ex4zam {
user-select: none;
float: right;
border-radius: 30px;
margin-top: 30px;
shape-outside: circle(67%);
shape-margin: 0;
margin-left: 10px;
width: 17%;
cursor:pointer;
}
.ex4zam.activational {
width: 60%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
}
@media (max-width: 768px) {
.ex4zam {
border-radius: 15px;
float: right;
width: 50%;
margin: 10px;
}
}
@media (max-width: 425px) {
.ex4zam {
border-radius: 15px;
float: none;
width: 100%;
margin: 10px auto;
}
}
.ex4zam1 {
float: right;
border-radius: 60px;
shape-outside: circle(63%);
shape-margin: 20px;
margin-top: 30px;
margin-bottom: 0;
margin-left: 10px;
margin-right: 10px;
}
@media (max-width: 425px) {
.ex4zam1 {
border-radius: 15px;
float: none;
width: 100%;
margin: 10px auto;
}
}
img.ex5 {
margin-top: 20px;
border-radius: 30px;
float: left;
min-width: 200px;
width: 20%;
shape-margin: 10px;
shape-outside: circle(63%);
margin-right: 10px;
cursor:pointer;
}
img.ex5.actived {
width: 60%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
}
@media (max-width: 768px) {
img.ex5 {
border-radius: 15px;
float: left;
width: 100%;
margin: 10px auto;
}
}
@media (max-width: 425px) {
img.ex5 {
border-radius: 15px;
float: left;
shape-outside: margin-box;
width: 50%;
margin:20px 10px 10px 10px;
}
}
img.ex5:hover, .ex4zam:hover {
box-shadow: 0px 0px 4px 5px limegreen;
}
.imginsidewindow {
position:fixed;
cursor: pointer;
top:50%;
left:50%;
transform: translate(-50%, -50%) scale(0.8);
z-index: 100;
box-shadow: 0px 0px 20px 10px black;
border-radius: 50px;
max-width: 90vw;
max-height: 80vh;
border: 3px solid rgb(200,200,200);
animation: increasedopacity 0.4s linear 1;
}
@keyframes increasedopacity {
0%{
opacity: 0;
}
100%{
opacity: 1;
}}
.ex90 {
box-shadow: 3px 3px 10px red, #fe9a2e -3px 3px 10px, 3px -3px 10px;
border-style: solid;
border-radius: 30px;
border-color: grey;
border-width: 10px;
transition: all 0.6s ease;
z-index: 1;
position: inherit;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
display: block;
filter: brightness(50%);
max-width: 80%;
}
.ex90:hover {
border-color: #7cfc00;
transition: all 0.3s ease;
z-index: 1;
position: inherit;
filter: brightness(100%);
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
display: block;
}
#formatt {
font-size: 30px;
text-align: center;
z-index: -1;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
background: -webkit-linear-gradient(#fe9a2e, #df0174);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/*
.side-button{
position:absolute;
right:0;
width:600px;
height:200px;
top:390px;
background-color:orange;
border:none;
border-bottom-left-radius: 67px;
}
.triangle-3 {
transform:rotateZ(-60deg);
position:absolute;
right:523px;
top:359px;
width: 0;
height: 0;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 140px solid orange;
}
*/
.anim {
position: absolute;
border-radius: 50%;
width: 20%;
border: solid 8px blue;
top: 150px;
left: 74%;
z-index: 2;
}
.anim:hover {
transform: rotateY(360deg);
transition-duration: 3s;
}
.animm {
position: absolute;
border-radius: 50%;
z-index: 2;
width: 20%;
border: solid 8px rgb(240, 171, 24);
top: 150px;
left: 85%;
}
.animm:hover {
transform: rotateY(360deg);
transition-duration: 3s;
}
.form3 {
color: white;
font-size: 15px;
font-family: Arial;
margin-top: 0px;
line-height: 30px;
}
/* .button {
color: white;
border-style: solid;
border-width: 2px;
border-top-left-radius: 60%;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 60%;
border-color: white;
padding: 10px;
background: linear-gradient(90deg, grey, black, grey);
margin: 5px;
user-select: none;
cursor:pointer;
}
.button:hover {
animation: wib 0.9s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
transform-origin: center;
color:#000000;
background-image: linear-gradient(90deg, #00ff08, #00750a, #00ff08);
}
@keyframes wib {
0% {
transform:rotateZ(0deg);
}
10% {
transform:rotateZ(4deg);
}
20% {
transform:rotateZ(-4deg);
}
30% {
transform:rotateZ(4deg);
}
40% {
transform:rotateZ(-4deg);
}
50% {
transform:rotateZ(4deg) scale(1.15);
}
60% {
transform:rotateZ(4deg);
}
70% {
transform:rotateZ(-4deg);
}
80% {
transform:rotateZ(4deg);
}
90% {
transform:rotateZ(-4deg);
}
100% {
transform:rotateZ(0deg);
}
}
.button:active {
background: linear-gradient(90deg, #ff8000, #fe9a2e, #ff8000);
color:#000000;
} */
#mySidenav a {
position: fixed;
z-index: 2;
right: -250px;
transition: 0.3s;
padding: 10px 20px 10px 100px;
width: 160px;
text-decoration: none;
font-size: 10px;
font-family: Arial;
font-weight: 550;
color: black;
text-transform: uppercase;
border-radius: 10px 0 0 10px;
}
#mySidenav a:active {
background-color: #80ff00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
box-shadow: 0px 0px 4px 4px #7cfc00;
}
#mySidenav a:hover {
right: 0;
}
#blog {
top: 407px;
background-color: #2e9afe;
filter: drop-shadow(2px 2px 1px #faac58);
}
#galeria {
top: 440px;
background-color: #23d148;
filter: drop-shadow(2px 2px 1px #faac58);
}
#ppdomsh {
top: 474px;
background-color: #ac58fa;
filter: drop-shadow(2px 2px 1px #faac58);
}
#blender {
top: 507px;
background-color: #dfb601;
filter: drop-shadow(2px 2px 1px #faac58);
}
#css {
top: 541px;
background-color: #01a9db;
filter: drop-shadow(2px 2px 1px #faac58);
}
@media (max-width: 425px) {
.sidenav {
display: none;
}
}
.pierw {
background: url("rootst.png") left top no-repeat rgb(40, 40, 40);
background-size: 600px 600px;
text-align: justify;
padding: 30px 30px 30px 60px;
line-height: 1.6;
color: #a5a5a5;
border-radius: 40px;
width: 70%;
margin-left: auto;
margin-right:auto;
display: block;
font-family: "Michroma", sans-serif;
font-weight: 100;
letter-spacing: 1px;
font-size: 14px;
mask:
radial-gradient(10px at 0 75%,#0000 98%,#000) 10px 50%/100% 40px repeat-y,
radial-gradient(10px at 50% 25%,#000 99%,#0000 101%) left/20px 40px repeat-y;
overflow: hidden;
}
.cavity-rect{
display:flex;
align-items: center;
justify-content: center;
position: sticky;
top:0;
left:100%;
width: fit-content;
padding-left:30px;
padding-right:30px;
height: 81px;
background-color: var(--cavity-color, rgb(0, 0, 0));
border-radius: 0 40px 0 40px;
margin-top:-20px;
margin-right:-30px;
}
.cavity-rect::before{
content:"";
position: absolute;
top:0;
left:-50px;
width: 50px;
height: 50px;
background-color: transparent;
border-radius:50%;
transform:rotateZ(90deg);
box-shadow: -25px -25px 0 var(--cavity-color, rgb(0, 0, 0));
}
.cavity-rect::after{
content:"";
position: absolute;
top:81px;
right:0;
width: 50px;
height: 50px;
background-color: transparent;
border-radius:50%;
transform:rotateZ(90deg);
box-shadow: -25px -25px 0 var(--cavity-color, rgb(0, 0, 0));
}
@media screen and (max-width: 1280px){
.cavity-rect{
display:none;
}
.cavity-rect::before{
display:none;
}
.cavity-rect::after{
display:none;
}
}
.pierw::after {
content: "";
position: absolute;
left: 50%;
top: 4em;
transform:translate(-50%,-50%);
width: 50px;
height: 50px;
padding:5px;
background-image: url("bulbff.png");
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
z-index:3;
filter: drop-shadow(0px 0px 5px rgb(255, 255, 255));
}
@media screen and (max-width: 1440px){
.pierw::after{
display:none;
}
}
@media screen and (max-width: 768px){
.pierw{
width:70%;
display:block;
margin-right:auto;
margin-left: auto;
border-width: 5px 5px 5px 20px;
}
iframe{
width:fit-content;
}
}
.pierw1 {
background: url("podklad.png") left top no-repeat,
url("podklad1.png") right top no-repeat,
url("podkladn.png") right bottom no-repeat,
url("podklad2.png") left bottom no-repeat,
url("podkladnc.png") right bottom repeat;
background-size: 600px 600px;
text-align: justify;
padding: 30px 30px 30px 30px;
font-weight: 100;
line-height: 1.6;
color: #a5a5a5;
border-radius: 40px;
width: 86%;
margin-left: auto;
margin-right: auto;
border-style: double;
border-width: 20px;
border-color: #424242;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
}
#ex1s {
background: linear-gradient(45deg, #04b404, #fe9a2e, #8a084b);
text-align: justify;
font-size: 13px;
padding: 30px;
font-weight: bold;
line-height: 1.6;
color: #2e2e2e;
letter-spacing: 1px;
border-radius: 50px 50px 50px 50px;
width: 90%;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
font-style: italic;
column-count: 2;
column-rule: 3px solid black;
column-gap: 25px;
}
p.ex2 {
font-size: 10px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-color: gold;
border-style: solid;
padding: 0.5cm;
background-image: url(molecules.jpg);
text-align: justify;
width: 91%;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
border-width: 4px;
text-indent: 50px;
color: white;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1px;
}
p.ex2:hover {
box-shadow: 1px -2px 19px 12px #3366ff;
}
.ex14 {
color: black;
padding: 10px 10px;
text-align: center;
text-decoration: none;
font-size: 13px;
transition-duration: 0.3s;
z-index: 2;
cursor: pointer;
text-align: center;
}
.grid-container {
display: grid;
max-width:60%;
margin-right: auto;
margin-left: auto;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
grid-template: 350px / auto auto auto;
grid-gap: 3px;
background-color: red;
border-radius: 15px;
padding: 30px;
}
.grid-container > div {
background-color: #e69940;
padding: 30px;
vertical-align: middle;
text-align: center;
border-radius: 15px;
}
img.ex21 {
transition-duration: 0.4s;
}
img.ex21:hover {
transform: scale(1.4, 1.4);
transition-duration: 0.4s;
}
body {
background-color:rgb(0,0,0);
overflow-x: hidden;
/* padding: 0;
margin: 0 0 0 0;
box-sizing: border-box;
background-image: url("data:image/svg+xml,");
background-attachment: fixed;
z-index: 2;
overflow-x: hidden; */
}
/* width */
::-webkit-scrollbar {
width: 17px;
}
/* Track */
::-webkit-scrollbar-track {
background: linear-gradient(-135deg, #391db5, #2ee2fa);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: linear-gradient(#15c3e6, #30ff00);
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-width: 2px;
border-style: solid;
border-color: black;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#bf00ff, #00c6ff);
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: grey;
color: black;
font-size: 12px;
font-family: Arial;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 10%;
left: 74%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent grey transparent transparent;
}
.stp1 {
border-radius: 40px;
margin-left: auto;
margin-right: auto;
display: block;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
#wyjatek {
color: white;
line-height: 35px;
float: left;
font-size: 40px;
transition-duration: 0.6s;
position: relative;
top: 18px;
margin-bottom:50px;
}
@media (max-width: 768px) {
#wyjatek {
position: absolute;
top: 10px;
left: 10px;
}
}
#wyjatek:hover {
color: grey;
font-size: 40px;
transition-duration: 0.6s;
line-height: 35px;
float: left;
}
#wyjatek1 {
color: #f6d8ce;
border-style: solid;
border-color: #f6d8ce;
border-width: 2px;
border-radius: 7px;
padding: 4px 4px 4px 4px;
margin-top: 4px;
margin-left: 4px;
float: left;
font-size: 15px;
transition-duration: 0.6s;
}
#wyjatek1:hover {
color: #f6d8ce;
font-size: 15px;
transition-duration: 0.6s;
border-style: solid;
border-color: white;
border-width: 2px;
border-radius: 7px;
padding: 4px 4px 4px 4px;
margin-top: 4px;
margin-left: 4px;
box-shadow: 0px 0px 4px 4px #7cfc00;
float: left;
}
.ex70 {
margin-right: auto;
margin-left: auto;
display: block;
}
em {
text-transform: lowercase;
font-style: normal;
}
#ex5 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex5:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
#ex51 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex51:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
#ex52 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex52:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
#ex53 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex53:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
#ex54 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex54:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
#ex55 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex55:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
#ex56 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex56:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
#ex57 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex57:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
#ex58 {
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
margin: 20px;
transition-duration: 0.6s;
cursor: pointer;
width: 20%;
}
#ex58:hover {
transform: scale(1.1);
transition-duration: 0.6s;
width: 20%;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.zm {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
border-radius: 30px;
border-color: gold;
border-width: 4px;
border-style: solid;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
font-family: Arial;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: myFirstFont2;
font-size:20px;
}
.zm,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
@keyframes zoom {
from {
transform: scale(0.1);
}
to {
transform: scale(1);
}
}
/* The Close Button */
#close {
position: absolute;
top: 90px;
right: 50px;
font-size: 30px;
color: white;
transition: 0.3s;
}
#close:hover,
#close:focus {
color: red;
text-decoration: none;
cursor: pointer;
}
.stopka {
border-width: 3px;
border-color: red;
border-style: solid;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-left: auto;
margin-right: auto;
color: red;
padding: 10px;
margin-top: 5px;
font-family: myFirstFont;
src: url(nasalization.woff);
font-size: 13px;
width: 700px;
background: linear-gradient(-135deg, #001a00, navy, #001a00, navy);
}
.lin {
color: #1a8cff;
font-size: 12px;
}
.pow {
font-size: 12px;
font-family: Arial;
}
#left1 {
color: white;
line-height: 35px;
margin-right: 10px;
float: right;
font-size: 15px;
transition-duration: 0.6s;
padding-right: 10px;
position: absolute;
top: 18px;
}
@media (max-width: 768px) {
#left1 {
position: absolute;
top: 0;
right: 0;
}
}
#left1:hover {
color: grey;
font-size: 15px;
transition-duration: 0.6s;
line-height: 35px;
margin-right: 10px;
float: right;
padding-right: 10px;
}
.largepath{
position:relative;
top:0px;
left:50%;
transform:translateX(-50%);
width: 800px;
height: 100px;
background-color: #454545;
display:flex;
justify-content: center;
align-items: center;
color:white;
font-size: 14px;
font-weight: 550;
margin:20px;
text-align: center;
clip-path:path("M 0 40 L 30 0 L 180 0 L 200 10 L 600 10 L 620 0 L 770 0 L 800 40 L 740 40 L 740 60 L 800 60 L 770 100 L 620 100 L 600 90 L 200 90 L 180 100 L 30 100 L 0 60 L 60 60 L 60 40 L 0 40 Z");
}
.nowyformat {
width: 400px;
height: 50px;
display:flex;
justify-content: center;
align-items: center;
color:white;
font-size: 12px;
font-weight: 550;
margin:20px;
text-align: center;
background-color: #454545;
clip-path:path("M 0 20 L 15 0 L 90 0 L 100 5 L 300 5 L 310 0 L 385 0 L 400 20 L 370 20 L 370 30 L 400 30 L 385 50 L 310 50 L 300 45 L 100 45 L 90 50 L 15 50 L 0 30 L 30 30 L 30 20 L 0 20 Z");
}
.bookscontent .nowyformat:nth-of-type(1) {
width: 800px;
height: 100px;
font-size:14px;
clip-path:path("M 0 40 L 30 0 L 180 0 L 200 10 L 600 10 L 620 0 L 770 0 L 800 40 L 740 40 L 740 60 L 800 60 L 770 100 L 620 100 L 600 90 L 200 90 L 180 100 L 30 100 L 0 60 L 60 60 L 60 40 L 0 40 Z");
}
.nowyformat:hover {
color:black;
background-color: #909090;
}
.ex990 {
border-style: solid;
border-radius: 20px;
border-color: white;
padding: 30px;
border-width: 3px;
background-color: #454545;
text-align: center;
color:white;
font-size: 24px;
font-weight: 900;
}
#ba {
width: 100%;
height: 35px;
background-image: url("beige_rough_marble_stone_02_height.jpg");
border-radius: 10px;
}
.far {
font-size: 30px;
color: red;
}
.far:hover {
color: white;
}
.ex6z {
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
border-style: solid;
border-radius: 60px;
border-width: 7px;
z-index: 1;
position: inherit;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
display: block;
border-color: #fa8258;
width: 60%;
}
@media (max-width: 425px) {
.ex6z {
min-width: 70%;
border-radius: 15px;
border-width: 2px;
}
}
.ex6zx {
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
border-style: solid;
border-radius: 60px;
border-width: 7px;
z-index: 1;
position: inherit;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
display: block;
border-color: #fa8258;
width: 70%;
}
.ent2 {
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 30px;
color: red;
text-shadow: -1px 0 lime, 0 1px lime, 1px 0 lime, 0 -1px lime;
display: block;
margin-top: 50px;
position: relative;
line-height: 50px;
z-index: 1;
}
.innef {
background-image: url(biohazard256.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
.center1 {
height: fit-content;
width: 70%;
margin-left: auto;
margin-right: auto;
border: 10px solid transparent;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
padding: 40px;
z-index: 2;
-webkit-border-image: url(border2.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border2.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border2.png) 30 stretch;
border-image-width: 30px;
text-align: center;
}
.shl {
top: 80px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
width: 3%;
position: absolute;
z-index: 2;
box-shadow: 0 0 0 10px hsl(0, 100%, 50%), 0 0 0 15px hsl(60, 100%, 50%),
0 0 0 20px hsl(120, 100%, 50%), 0 0 0 25px hsl(180, 100%, 50%),
0 0 0 30px hsl(240, 100%, 50%), 0 0 0 35px hsl(300, 100%, 50%);
opacity: 0.8;
}
@media (max-width: 425px) {
.shl {
display: none;
}
}
h3 {
z-index: 3;
}
section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 0;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 425px) {
h2,
h3 {
transform: scale(0.75);
}
}
span {
transition: 0.5s;
}
h2:hover span {
transform: scale(4);
filter: blur(1px);
opacity: 0;
}
.frame-1 {
border-radius: 30px;
padding: 20px;
border: 5px solid orange;
width: fit-content;
background-color: rgb(186, 55, 4);
transition-duration: 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.frame-1:hover {
transform: scale(1.1);
transition-duration: 0.2s;
}
h3:hover span {
transform: scale(4);
filter: blur(1px);
opacity: 0;
}
h3 {
font-size: 40px;
color: #41e600;
font-family: myThirdFont;
text-shadow: -1px 0 #b40431, 0 1px #b40431, 1px 0 #b40431, 0 -1px #b40431;
filter: drop-shadow(2px 2px 1px #8000ff);
text-transform: uppercase;
margin-top: 0px;
margin-bottom: 15px;
padding: 10px;
text-align: center;
display: flex;
}
/*
.change-col{animation: animated 2s linear infinite}
@keyframes animated{
0%{filter:hue-rotate(0deg)}
100%{filter:hue-rotate(360deg)}
}
*/
h2 {
font-size: 40px;
color: #41e600;
font-family: myThirdFont;
text-shadow: -1px 0 #b40431, 0 1px #b40431, 1px 0 #b40431, 0 -1px #b40431;
filter: drop-shadow(4px 4px 2px #8000ff);
text-transform: uppercase;
margin-bottom: 0px;
margin-top: 15px;
padding: 40px;
text-align: center;
display: flex;
}
h2 span:nth-child(9n + 1) {
transition-delay: 0s;
}
h2 span:nth-child(9n + 2) {
transition-delay: 0.05s;
}
h2 span:nth-child(9n + 3) {
transition-delay: 0.1s;
}
h2 span:nth-child(9n + 4) {
transition-delay: 0.15s;
}
h2 span:nth-child(9n + 5) {
transition-delay: 0.2s;
}
h2 span:nth-child(9n + 6) {
transition-delay: 0.25s;
}
h2 span:nth-child(9n + 7) {
transition-delay: 0.3s;
}
h2 span:nth-child(9n + 8) {
transition-delay: 0.35s;
}
h2 span:nth-child(9n + 9) {
transition-delay: 0.4s;
}
h3 span:nth-child(66n + 1) {
transition-delay: 0.05s;
}
h3 span:nth-child(66n + 2) {
transition-delay: 0.1s;
}
h3 span:nth-child(66n + 3) {
transition-delay: 0.15s;
}
h3 span:nth-child(66n + 4) {
transition-delay: 0.2s;
}
h3 span:nth-child(66n + 5) {
transition-delay: 0.25s;
}
h3 span:nth-child(66n + 6) {
transition-delay: 0.3s;
}
h3 span:nth-child(66n + 7) {
transition-delay: 0.35s;
}
h3 span:nth-child(66n + 8) {
transition-delay: 0.4s;
}
h3 span:nth-child(66n + 9) {
transition-delay: 0.45s;
}
h3 span:nth-child(66n + 10) {
transition-delay: 0.5s;
}
h3 span:nth-child(66n + 11) {
transition-delay: 0.55s;
}
h3 span:nth-child(66n + 12) {
transition-delay: 0.6s;
}
h3 span:nth-child(66n + 13) {
transition-delay: 0.65s;
}
h3 span:nth-child(66n + 14) {
transition-delay: 0.7s;
}
h3 span:nth-child(66n + 15) {
transition-delay: 0.75s;
}
h3 span:nth-child(66n + 16) {
transition-delay: 0.8s;
}
h3 span:nth-child(66n + 17) {
transition-delay: 0.85s;
}
h3 span:nth-child(66n + 18) {
transition-delay: 0.9s;
}
h3 span:nth-child(66n + 19) {
transition-delay: 0.95s;
}
h3 span:nth-child(66n + 20) {
transition-delay: 1s;
}
h3 span:nth-child(66n + 21) {
transition-delay: 1.05s;
}
h3 span:nth-child(66n + 22) {
transition-delay: 1.1s;
}
h3 span:nth-child(66n + 23) {
transition-delay: 1.15s;
}
h3 span:nth-child(66n + 24) {
transition-delay: 1.2s;
}
h3 span:nth-child(66n + 25) {
transition-delay: 1.25s;
}
h3 span:nth-child(66n + 26) {
transition-delay: 1.3s;
}
h3 span:nth-child(66n + 27) {
transition-delay: 1.35s;
}
h3 span:nth-child(66n + 28) {
transition-delay: 1.4s;
}
h3 span:nth-child(66n + 29) {
transition-delay: 1.45s;
}
h3 span:nth-child(66n + 30) {
transition-delay: 1.5s;
}
h3 span:nth-child(66n + 31) {
transition-delay: 1.55s;
}
h3 span:nth-child(66n + 32) {
transition-delay: 1.6s;
}
h3 span:nth-child(66n + 33) {
transition-delay: 1.65s;
}
h3 span:nth-child(66n + 34) {
transition-delay: 1.7s;
}
h3 span:nth-child(66n + 35) {
transition-delay: 1.75s;
}
h3 span:nth-child(66n + 36) {
transition-delay: 1.8s;
}
h3 span:nth-child(66n + 37) {
transition-delay: 1.85s;
}
h3 span:nth-child(66n + 38) {
transition-delay: 1.9s;
}
h3 span:nth-child(66n + 39) {
transition-delay: 1.95s;
}
h3 span:nth-child(66n + 40) {
transition-delay: 2s;
}
h3 span:nth-child(66n + 41) {
transition-delay: 2.05s;
}
h3 span:nth-child(66n + 42) {
transition-delay: 2.1s;
}
h3 span:nth-child(66n + 43) {
transition-delay: 2.15s;
}
h3 span:nth-child(66n + 44) {
transition-delay: 2.2s;
}
h3 span:nth-child(66n + 45) {
transition-delay: 2.25s;
}
h3 span:nth-child(66n + 46) {
transition-delay: 2.3s;
}
h3 span:nth-child(66n + 47) {
transition-delay: 2.35s;
}
h3 span:nth-child(66n + 48) {
transition-delay: 2.4s;
}
h3 span:nth-child(66n + 49) {
transition-delay: 2.45s;
}
h3 span:nth-child(66n + 50) {
transition-delay: 2.5s;
}
h3 span:nth-child(66n + 51) {
transition-delay: 2.55s;
}
h3 span:nth-child(66n + 52) {
transition-delay: 2.6s;
}
h3 span:nth-child(66n + 53) {
transition-delay: 2.65s;
}
h3 span:nth-child(66n + 54) {
transition-delay: 2.7s;
}
h3 span:nth-child(66n + 55) {
transition-delay: 2.75s;
}
h3 span:nth-child(66n + 56) {
transition-delay: 2.8s;
}
h3 span:nth-child(66n + 57) {
transition-delay: 2.85s;
}
h3 span:nth-child(66n + 58) {
transition-delay: 2.9s;
}
h3 span:nth-child(66n + 59) {
transition-delay: 2.95s;
}
h3 span:nth-child(66n + 60) {
transition-delay: 3s;
}
h3 span:nth-child(66n + 61) {
transition-delay: 3.05s;
}
h3 span:nth-child(66n + 62) {
transition-delay: 3.1s;
}
h3 span:nth-child(66n + 63) {
transition-delay: 3.15s;
}
h3 span:nth-child(66n + 64) {
transition-delay: 3.2s;
}
h3 span:nth-child(66n + 65) {
transition-delay: 3.25s;
}
h3 span:nth-child(66n + 66) {
transition-delay: 3.3s;
}
.ex31x {
border-radius:40px;
letter-spacing: 3px;
padding:30px;
color: black;
font-size: 16px;
position: relative;
text-transform: uppercase;
font-weight: 900;
background-image: url("dsa.png");
background-position-y: 20%;
background-size: 80%;
bottom: 0;
z-index: -1;
text-shadow: -1px 0 #2e9afe, 0 1px #2e9afe, 1px 0 #2e9afe, 0 -1px #2e9afe;
border: 10px solid #2e9afe;
animation: an7 1.5s ease-in-out;
transform:scale(0.8);
}
@keyframes an7 {
0% {
transform: translateY(70px);
}
100% {
transform: translate(0px);
}
}
#ex31xx {
border-top-left-radius: 17px;
border-top-right-radius: 17px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
letter-spacing: 3px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 50px;
padding-left: 50px;
color: white;
font-size: 16px;
position: relative;
text-transform: uppercase;
font-weight: 900;
background: linear-gradient(90deg, grey, black, grey);
bottom: -2px;
z-index: -1;
}
#ex31xx::before {
vertical-align: middle;
padding-right: 40px;
content: url("marker-left.gif");
}
#ex31xx::after {
vertical-align: middle;
padding-left: 40px;
content: url("marker-right.gif");
}
@media (max-width: 425px) {
#ex31xx {
padding-right: 5px;
padding-left: 5px;
font-size: 8px;
}
#ex31xx::before {
padding-right: 5px;
}
#ex31xx::after {
padding-left: 5px;
}
}
.video {
position: fixed;
left: 0px;
top: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
z-index: -1;
}
@media (max-width: 425px) {
.video {
display: none;
}
}
#ex2 {
background-color:rgb(50,50,50);
position: relative;
margin-left: auto;
margin-right: auto;
width: 60%;
text-align: justify;
padding: 30px;
text-align: center;
box-sizing: border-box;
z-index: 1;
clip-path: shape(from 18.82px 18.32px,curve to calc(1.72% + 21.24px) 21.5px with calc(0% + 22px) 21px,smooth to calc(5.17% + 19.72px) 18px,smooth to calc(8.62% + 18.21px) 10px,smooth to calc(12.07% + 16.69px) 6px,smooth to calc(15.52% + 15.17px) 7px,smooth to calc(18.97% + 13.66px) 6.5px,smooth to calc(22.41% + 12.14px) 13.5px,smooth to calc(25.86% + 10.62px) 19.5px,smooth to calc(29.31% + 9.1px) 18.5px,smooth to calc(32.76% + 7.59px) 17px,smooth to calc(36.21% + 6.07px) 9px,smooth to calc(39.66% + 4.55px) 2.5px,smooth to calc(43.1% + 3.03px) 7px,smooth to calc(46.55% + 1.52px) 9px,smooth to calc(50% + 0px) 8.5px,smooth to calc(53.45% + -1.52px) 15.5px,smooth to calc(56.9% + -3.03px) 18.5px,smooth to calc(60.34% + -4.55px) 9.5px,smooth to calc(63.79% + -6.07px) 7px,smooth to calc(67.24% + -7.59px) 14px,smooth to calc(70.69% + -9.1px) 14px,smooth to calc(74.14% + -10.62px) 6.5px,smooth to calc(77.59% + -12.14px) 8px,smooth to calc(81.03% + -13.66px) 14px,smooth to calc(84.48% + -15.17px) 14px,smooth to calc(87.93% + -16.69px) 10.5px,smooth to calc(91.38% + -18.21px) 3.5px,smooth to calc(94.83% + -19.72px) 12px,smooth to calc(98.28% + -21.24px) 15px,smooth to calc(100% - 14.58px) 7.58px,smooth to calc(100% - 5.08px) 14.58px,smooth to calc(100% - 9px) calc(2.63% + 20.84px),smooth to calc(100% - 18px) calc(7.89% + 18.53px),smooth to calc(100% - 12.5px) calc(13.16% + 16.21px),smooth to calc(100% - 7.5px) calc(18.42% + 13.89px),smooth to calc(100% - 6px) calc(23.68% + 11.58px),smooth to calc(100% - 5.5px) calc(28.95% + 9.26px),smooth to calc(100% - 13px) calc(34.21% + 6.95px),smooth to calc(100% - 12.5px) calc(39.47% + 4.63px),smooth to calc(100% - 11px) calc(44.74% + 2.32px),smooth to calc(100% - 8px) calc(50% + 0.00px),smooth to calc(100% - 5px) calc(55.26% + -2.32px),smooth to calc(100% - 6.5px) calc(60.53% + -4.63px),smooth to calc(100% - 8.5px) calc(65.79% + -6.95px),smooth to calc(100% - 12px) calc(71.05% + -9.26px),smooth to calc(100% - 15px) calc(76.32% + -11.58px),smooth to calc(100% - 16px) calc(81.58% + -13.89px),smooth to calc(100% - 9.5px) calc(86.84% + -16.21px),smooth to calc(100% - 10.5px) calc(92.11% + -18.53px),smooth to calc(100% - 12px) calc(97.37% + -20.84px),smooth to calc(100% - 10.96px) calc(100% - 18.46px),smooth to calc(100% - 18.46px) calc(100% - 11.46px),smooth to calc(98.28% - 21.24px) calc(100% - 10px),smooth to calc(94.83% - 19.72px) calc(100% - 7.5px),smooth to calc(91.38% - 18.21px) calc(100% - 7.5px),smooth to calc(87.93% - 16.69px) calc(100% - 13.5px),smooth to calc(84.48% - 15.17px) calc(100% - 13px),smooth to calc(81.03% - 13.66px) calc(100% - 11px),smooth to calc(77.59% - 12.14px) calc(100% - 14px),smooth to calc(74.14% - 10.62px) calc(100% - 19px),smooth to calc(70.69% - 9.1px) calc(100% - 18.5px),smooth to calc(67.24% - 7.59px) calc(100% - 17.5px),smooth to calc(63.79% - 6.07px) calc(100% - 17px),smooth to calc(60.34% - 4.55px) calc(100% - 14.5px),smooth to calc(56.9% - 3.03px) calc(100% - 15.5px),smooth to calc(53.45% - 1.52px) calc(100% - 18px),smooth to calc(50% - 0px) calc(100% - 11px),smooth to calc(46.55% - -1.52px) calc(100% - 9px),smooth to calc(43.1% - -3.03px) calc(100% - 9px),smooth to calc(39.66% - -4.55px) calc(100% - 7.5px),smooth to calc(36.21% - -6.07px) calc(100% - 11.5px),smooth to calc(32.76% - -7.59px) calc(100% - 6.5px),smooth to calc(29.31% - -9.1px) calc(100% - 11px),smooth to calc(25.86% - -10.62px) calc(100% - 15.5px),smooth to calc(22.41% - -12.14px) calc(100% - 10px),smooth to calc(18.97% - -13.66px) calc(100% - 11px),smooth to calc(15.52% - -15.17px) calc(100% - 14.5px),smooth to calc(12.07% - -16.69px) calc(100% - 14px),smooth to calc(8.62% - -18.21px) calc(100% - 16.5px),smooth to calc(5.17% - -19.72px) calc(100% - 15.5px),smooth to calc(1.72% - -21.24px) calc(100% - 14.5px),smooth to 15.28px calc(100% - 13.78px),smooth to 10.78px calc(100% - 15.28px),smooth to 13px calc(97.37% - 20.84px),smooth to 7.5px calc(92.11% - 18.53px),smooth to 12px calc(86.84% - 16.21px),smooth to 19px calc(81.58% - 13.89px),smooth to 11px calc(76.32% - 11.58px),smooth to 11px calc(71.05% - 9.26px),smooth to 13.5px calc(65.79% - 6.95px),smooth to 13.5px calc(60.53% - 4.63px),smooth to 10.5px calc(55.26% - 2.32px),smooth to 12.5px calc(50% - 0px),smooth to 16.5px calc(44.74% - -2.32px),smooth to 16px calc(39.47% - -4.63px),smooth to 19px calc(34.21% - -6.95px),smooth to 18.5px calc(28.95% - -9.26px),smooth to 13.5px calc(23.68% - -11.58px),smooth to 11.5px calc(18.42% - -13.89px),smooth to 7px calc(13.16% - -16.21px),smooth to 4.5px calc(7.89% - -18.53px),smooth to 5.5px calc(2.63% - -20.84px),smooth to 8.82px 18.82px,smooth to 18.82px 18.32px);
}
@media screen and (max-width: 768px) {
#ex2 {
width: 90%;
border-radius: 20px;
padding: 15px;
}
}
.header-carousel{
width:100%;
display:flex;
overflow-x: auto;
overflow-y: hidden;
border-bottom: solid 60px #ff8000;
gap:0;
mask:
radial-gradient(11px at 50% calc(100% - 11px),#000 99%,#0000 101%) calc(50% - 22px) 0/44px 100%,
radial-gradient(11px at 50% calc(100% + 0px),#0000 99%,#000 101%) 50% calc(100% - 11px)/44px 100% repeat-x;
}
.header-carousel::-webkit-scrollbar {
display: none;
}
.group {
display:flex;
justify-content: center;
align-items: center;
z-index: 3;
animation:spin var(--speed, 300s) linear infinite;
}
.group.switchdirection {
animation-direction: reverse;
}
.card {
flex: 0 0 30em;
height: 25em;
align-content:center;
gap:0;
margin-bottom:-2px;
}
.card img{
width:fit-content;
height:100%;
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
margin-left:-32px;
margin-right:-32px;
}
@keyframes spin{
from{translate:0}
to{translate:-100%}
}
@media (max-width: 1440px) {
.header-carousel{
display: none;
}
.card{
display:none;
}
.group{
display:none;
}
.roundl {
display: none;
}
}
.form-3 {
margin-top: 40px;
}
.bottom-baner {
display: block;
padding-top: 70px;
letter-spacing: 2px;
margin-left: auto;
margin-right: auto;
width: 100%;
bottom: 0;
height: 120px;
padding-bottom:20px;
background-image: linear-gradient(to left, rgba(30,30,30,0.66), rgba(100, 100, 100, 0.66));
font-size: 11px;
color: white;
clip-path: shape(from 0 100%,vline to 25px,curve to 21.43% 16.5px with 14.29% 11px,smooth to 35.71% 33px,smooth to 50% 44.5px,smooth to 64.29% 35.5px,smooth to 78.57% 28.5px,smooth to 100% 25px,vline to 100%, hline to 0);
}
.bottom-baner a {
display: flex;
justify-content: center;
flex-direction: row;
margin-left: 10px;
margin-right: 10px;
margin-bottom: -20px;
font-size: 11px;
}
.bottom-baner i {
display: flex;
justify-content: center;
flex-direction: row;
margin-right: 10px;
font-size: 11px;
}
@media (max-width: 768px) {
.bottom-baner {
display: none;
}
}
.bottom-change {
display: none;
}
@media (max-width: 768px) {
.bottom-change {
display: flex;
padding-top: 10px;
padding-bottom: 10px;
justify-content: center;
align-items: center;
width: 100%;
bottom: 0;
height: 90px;
background-image: linear-gradient(to left, black, rgb(100, 100, 100));
font-size: 16px;
color: white;
}
}
.shlabs-bottom {
position: absolute;
font-size: 40px;
display: flex;
justify-content: flex-start;
margin-left: 50px;
color: white;
text-shadow: -2px 0 #000000, 0 2px #040404, 2px 0 #000000, 0 -2px #000000;
animation: change-col 0.9s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
transform-origin: center;
}
@keyframes change-col {
0% {
transform:rotateZ(0deg);
}
10% {
transform:rotateZ(4deg);
}
20% {
transform:rotateZ(-4deg);
}
30% {
transform:rotateZ(4deg);
}
40% {
transform:rotateZ(-4deg);
}
50% {
transform:rotateZ(4deg) scale(1.4);
}
60% {
transform:rotateZ(4deg);
}
70% {
transform:rotateZ(-4deg);
}
80% {
transform:rotateZ(4deg);
}
90% {
transform:rotateZ(-4deg);
}
100% {
transform:rotateZ(0deg);
}
}
#ex3xx {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 17px;
border-bottom-right-radius: 17px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 20px;
padding-left: 20px;
color: white;
font-size: 12px;
position: relative;
font-weight: 900;
background: linear-gradient(90deg, grey, black, grey);
top: -40px;
z-index: 0;
margin-bottom: 50px;
box-shadow: 0 0 0 10px hsl(329, 89%, 29%), 0 0 0 15px hsl(329, 89%, 39%),
0 0 0 20px hsl(329, 89%, 49%), 0 0 0 25px hsl(329, 89%, 59%),
0 0 0 30px hsl(329, 89%, 69%);
}
@media (max-width: 425px) {
#ex3xx {
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
text-align: center;
}
}
.ex6lit {
width: 20%;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
border-style: solid;
border-radius: 60px;
border-width: 7px;
z-index: 1;
position: inherit;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0;
display: block;
border-color: #fa8258;
}
@media (max-width: 425px) {
.ex6lit {
width: 70%;
border-radius: 15px;
border-width: 2px;
margin: 0 auto;
}
}
.container7747 {
display: flex;
width: 1200px;
justify-content: space-evenly;
margin: auto;
align-items: center;
background: transparent;
padding: 60px 40px 60px 40px;
border-radius: 60px;
/* border: 10px solid orange; */
}
.inside-cavity{
top:0;
left:50%;
position:absolute;
transform:translateX(-50%);
width:100px;
height:100px;
background-color: var(--inside-cavity-color, rgb(0,0,0));
border-radius:0 0 50px 50px;
z-index:10;
}
.inside-cavity::before{
content:"";
position:absolute;
top:0;
left:-50px;
width:50px;
height:50px;
background-color:transparent;
border-radius:50%;
transform:rotateZ(90deg);
box-shadow: -25px -25px 0 var(--inside-cavity-color, rgb(0,0,0));
z-index:10;
}
.inside-cavity::after{
content:"";
position:absolute;
top:0;
right:-50px;
width:50px;
height:50px;
background-color:transparent;
border-radius:50%;
transform:rotateZ(270deg);
box-shadow: 25px -25px 0 var(--inside-cavity-color, rgb(0,0,0));
z-index:10;
}
.dot-inside {
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
width: 85px;
height: 85px;
background-color: #14ffe7;
border-radius: 50%;
z-index: 10;
}
.dot-inside .fa-earth-europe{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateZ(270deg);
font-size: 40px;
color: black;
}
.dot-inside .fa-brain{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: black;
}
.dot-inside .fa-lightbulb{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: black;
}
.inside {
position:relative;
background-image: linear-gradient(#14ffe7, #ffeb3b, #ff00e0);
width: 270px;
height: 350px;
padding: 25px 10px 10px 10px;
font-size: 12px;
text-align: center;
border-radius: 30px;
border-bottom-right-radius: 160px;
border-bottom-left-radius: 160px;
display: flex;
justify-content: center;
align-items: flex-start;
color: black;
font-size: 23px;
overflow: hidden;
box-shadow: 0 15px 0 rgb(0, 174, 255, 0.5),
inset 0 -15px 0 rgba(100, 100, 100, 0.5), 0 30px 0 rgba(0, 0, 0, 0.15);
transition-duration: 0.3s;
}
.inside::before{
content:url("rootst.png");
position: absolute;
top:0px;
left:0px;
transform:scale(0.5);
transform-origin: top left;
z-index:1;
}
.element-in {
position: absolute;
top: 150px;
left: 10px;
width: 270px;
height: 210px;
background: rgba(0, 0, 0, 0.25);
border-radius: 15px;
border: 1px solid rgb(0, 0, 0);
border-bottom-right-radius: 160px;
border-bottom-left-radius: 160px;
font-size: 13px;
color: black;
display: flex;
justify-content: center;
align-items: center;
}
.element-in:hover {
background: rgba(0, 0, 0, 0.5);
transition-duration: 0.3s;
}
.inside-2 {
background-image: linear-gradient(#14ffe7, #ffeb3b, #ff00e0);
color: black;
width: 270px;
height: 350px;
padding: 10px 10px 10px 10px;
font-size: 12px;
text-align: center;
border-radius: 30px;
border-bottom-right-radius: 160px;
border-bottom-left-radius: 160px;
border:1px solid rgb(0, 0, 0);
display: flex;
justify-content: center;
align-items: flex-start;
box-shadow: 0 15px 0 rgb(0, 174, 255, 0.5),
inset 0 -15px 0 rgba(100, 100, 100, 0.5), 0 30px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.inside-2::before{
content:url("rootst.png");
position: absolute;
top:0px;
left:0px;
transform:scale(0.5);
transform-origin: top left;
}
.shine::before {
content: "";
position: absolute;
top: -140px;
left: -40%;
width: 100%;
height: 120%;
background-image: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3)
);
transform: rotateZ(35deg);
filter: blur(3px);
z-index: -1;
}
.shine-2::before {
content: "";
position: absolute;
top: -140px;
left: -40%;
width: 100%;
height: 120%;
background-image: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3)
);
transform: rotateZ(35deg);
filter: blur(3px);
z-index: -1;
}
.element-in2 {
position: absolute;
top: 10px;
left: 10px;
width: 270px;
height: 335px;
background: rgba(0, 0, 0, 0.25);
border-radius: 20px;
border: 3px solid rgb(0, 0, 0);
border-bottom-right-radius: 160px;
border-bottom-left-radius: 160px;
font-size: 20px;
color: black;
display: flex;
justify-content: center;
align-items: center;
z-index: 11;
}
.element-in2 span{
z-index:6;
color:white;
}
@media (max-width: 1440px) {
.container7747 {
position: relative;
display: flex;
margin-left: auto;
margin-right: auto;
gap: 60px;
width: fit-content;
flex-direction: column;
}
}
@media (max-width: 425px) {
.container7747 {
position: relative;
display: flex;
margin-left: auto;
margin-right: auto;
width: fit-content;
flex-direction: column;
}
}
.shine p{
position:absolute;
left:50%;
transform:translateX(-50%);
background-color: rgba(255,255,255,0.66);
padding:10px;
border-radius:15px;
border:1px solid rgb(0, 0, 0);
z-index:10;
}
.bb2 {
background-image: url("twoshipsready.png");
background-attachment: fixed;
background-position: center;
background-size: cover;
overflow-x: hidden;
}
.myvision {
font-size: 23px;
font-weight: 900;
font-family: myFirstFont2;
text-align: justify;
line-height: 1.8;
width: 70%;
margin-left: auto;
margin-right: auto;
display: block;
border-color: red;
border-style: solid;
border-width: 5px;
border-radius: 70px;
padding: 90px;
background: radial-gradient(circle, red, yellow, red);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
box-shadow: 0px 0px 5px 5px yellow;
font-style: italic;
background-clip: text;
}
@media (max-width: 768px) {
.myvision {
padding: 30px;
font-size: 16px;
border-radius: 30px;
width: 70%;
}
}
.inertiallab{
font-size: 23px;
font-weight: 900;
font-family: myFirstFont2;
text-align: justify;
line-height: 1.8;
display: block;
background: radial-gradient(circle, blue, cyan, blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
background-clip: text;
}
.stat1 {
border-radius: 50%;
float: right;
shape-outside: circle();
margin: 25px;
box-shadow: 0 0 0 6px #01df01, 0 0 0 12px #0080ff;
width: 20%;
}
.stat11 {
border-radius: 50%;
float: left;
shape-outside: circle();
margin: 25px;
box-shadow: 0 0 0 6px #01df01, 0 0 0 12px #0080ff;
width: 20%;
}
.free {
width: 20%;
border-radius: 20px;
float: right;
margin: 10px;
}
.ex4zamm {
border-radius: 30px;
margin-top: 20px;
shape-outside: circle(65%);
shape-margin: 10px;
width: 30%;
float: right;
}
@media (max-width: 425px) {
.ex4zamm {
width: 100%;
border-radius: 15px;
border-width: 2px;
margin: 10px auto;
shape-outside: none;
}
}
.bb5 {
background-image: url("squers.png");
background-size: cover;
}
.tun {
background-image: url("gateru2.png");
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.csro {
background-image: url("beige_rough_marble_stone_02_height.jpg");
color: orange;
font-size: 14px;
border-color: orange;
border-radius: 60px;
border-width: 15px;
margin: 30px;
border-style: solid;
padding: 40px;
text-align: justify;
letter-spacing: 1px;
line-height: 1.6;
}
.topnav {
overflow: hidden;
text-align: center;
background-color: #848484;
}
.topnav a {
float: none;
display: inline-block;
color: black;
text-align: center;
padding: 15px 9px 10px 0;
border-radius: 15px;
text-decoration: none;
font-size: 11px;
margin-top: 3px;
margin-bottom: 3px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
transition-duration: 0.5s;
}
.topnav a.active {
background-color: #4caf50;
border-radius: 0;
margin: 0 0 0 0;
color: black;
float: left;
padding-left: 6px;
padding-right: 10px;
padding-bottom: 15px;
padding-top: 15px;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 1440px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
padding-right: 20px;
padding-left: 20px;
display: block;
}
}
@media screen and (max-width: 1440px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown-content1 {
visibility: hidden;
position: absolute;
background-color: #627605;
min-width: 300px;
padding: 12px 16px;
border-radius: 15px;
box-shadow: 5px 5px 8px black;
border-width: 3px;
border-style: solid;
border-color: black;
z-index: 1;
opacity: 0;
transition: opacity 0.6s;
}
.dropdown-content1::after {
bottom: 100%;
left: 30px;
position: absolute;
border-color: transparent transparent #627605 transparent;
border-style: solid;
margin-left: -5px;
border-width: 15px;
content: " ";
}
.dropdown1:hover .dropdown-content1 {
opacity: 1;
visibility: visible;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
visibility: hidden;
position: absolute;
background-color: #627605;
min-width: 300px;
bottom: 100%;
padding: 12px 16px;
border-radius: 15px;
box-shadow: 5px 5px 8px black;
border-width: 3px;
border-style: solid;
border-color: black;
z-index: 1;
opacity: 0;
transition: opacity 0.6s;
}
.dropdown-content2::after {
content: " ";
position: absolute;
top: 100%;
left: 30px;
margin-left: -5px;
border-width: 15px;
border-style: solid;
border-color: #627605 transparent transparent transparent;
}
.dropdown2:hover .dropdown-content2 {
bottom: 100%;
opacity: 1;
visibility: visible;
}
.wyroz {
border-style: solid;
border-bottom-width: 15px;
border-color: orange;
color: orange;
font-size: 50px;
border-radius: 15px;
padding-left: 20px;
width: 5%;
min-width: 120px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 110px;
background-color: blue;
margin-top: 100px;
margin-bottom: 100px;
font-family: myFirstFont2;
box-shadow: 0px 0px 1px 4px yellow, 0px 0px 1px 8px red,
0px 0px 1px 12px green;
animation-name: nowaa;
animation-duration: 2s;
animation-iteration-count: 1;
animation-direction: forward;
animation-timing-function: linear;
animation-delay: 3s;
}
@keyframes nowaa {
0% {
margin-left: 80px;
border-color: orange;
transform: rotateZ(0deg);
}
50% {
margin-left: 1000px;
border-color: orange;
transform: rotateZ(720deg);
}
100% {
margin-left: 80px;
border-color: orange;
transform: translateX(-820px);
}
}
.t1 {
display:grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(4, 1fr);
gap:20px;
border-color: orange;
border-width: 5px;
border-style: solid;
padding: 10px;
background-color: #2e2e2e;
max-width:60%;
margin-left:auto;
margin-right:auto;
border-radius:30px;
}
.t2 {
background-color:transparent;
border-radius:20px;
}
.imags {
width: 100%;
height: auto;
border-radius: 15px;
}
@media (max-width: 768px) {
.t1 {
display: grid;
grid-template-rows: repeat(10, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 10px;
border-color: orange;
border-width: 3px;
border-style: solid;
padding: 5px;
background-color: #2e2e2e;
max-width: 90%;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
}
}
.center-1 {
height: 200px;
position: relative;
}
.center-2 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.small-button {
height: 300px;
width: 700px;
border-top-left-radius: 70%;
border-top-right-radius: 40px;
border-bottom-right-radius: 70%;
border-bottom-left-radius: 40px;
background-image: linear-gradient(#14ffe7, #ffeb3b, #ff00e0);
border: none;
box-shadow: 0 0 20px 12px red;
outline: none;
}
.outer {
background: #111;
color: #f2f2f2;
border-top-left-radius: 70%;
border-top-right-radius: 25px;
border-bottom-right-radius: 70%;
border-bottom-left-radius: 25px;
height: 270px;
width: 670px;
text-align: center;
position: absolute;
top: 50%;
line-height: 270px;
font-size: 16px;
font-family: myFirstFont2;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.small-button:hover {
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@media (max-width: 425px) {
iframe {
width: 60%;
}
}
.center7 {
font-size: 12px;
background-image: linear-gradient(45deg, #14ffe7, #ffeb3b, #ff00e0);
width: 400px;
height:50px;
z-index: 1;
text-align: center;
color: rgb(10,10,10);
text-transform: uppercase;
margin-left: auto;
margin-right: auto;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-weight: 100;
clip-path:path("M 0 20 L 15 0 L 90 0 L 100 5 L 300 5 L 310 0 L 385 0 L 400 20 L 370 20 L 370 30 L 400 30 L 385 50 L 310 50 L 300 45 L 100 45 L 90 50 L 15 50 L 0 30 L 30 30 L 30 20 L 0 20 Z");
}
.center7:hover {
animation-name: shak1;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease-in-out;
}
@keyframes shak1 {
0% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
100% {
filter: hue-rotate(0deg);
}
}
@media (max-width: 425px) {
.center7 {
font-size: 12px;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom-left-radius: 14px;
border-top-left-radius: 2px;
border-bottom-right-radius: 14px;
border-top-right-radius: 14px;
text-align: center;
display: flex;
align-self: center;
justify-content: center;
}
}
.useful-links {
background: linear-gradient(to left, rgb(255, 166, 0), green);
color: #333;
font-family: myFirstFont2;
border-radius: 9px;
}
.moving-under {
color: #333;
font-family: myFirstFont2;
text-decoration: none;
display: inline;
}
.moving-under:hover {
color: white;
border-bottom-style: solid;
border-bottom-width: 2px;
display: inline;
}
.ex123z {
float: left;
border-radius: 60px;
margin-top: 20px;
shape-outside: circle(65%);
shape-margin: 10px;
width: 30%;
margin-right: 15px;
}
.enim {
transition: 0.75s;
}
h5:hover .enim {
transform: scale(3);
filter: hue-rotate(360deg);
opacity: 0;
}
h5 {
font-size: 40px;
color: #ff0000;
font-family: myFirstFont;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
h5 .enim:nth-child(8n + 1) {
transition-delay: 0s;
}
h5 .enim:nth-child(8n + 2) {
transition-delay: 0.05s;
}
h5 .enim:nth-child(8n + 3) {
transition-delay: 0.1s;
}
h5 .enim:nth-child(8n + 4) {
transition-delay: 0.15s;
}
h5 .enim:nth-child(8n + 5) {
transition-delay: 0.2s;
}
h5 .enim:nth-child(8n + 6) {
transition-delay: 0.25s;
}
h5 .enim:nth-child(8n + 7) {
transition-delay: 0.3s;
}
h5 .enim:nth-child(8n + 8) {
transition-delay: 0.35s;
}
.prem {
background-color: #424242;
position: absolute;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
padding: 20px 30px 20px 20px;
color: rgb(255, 255, 255);
font-size: 20px;
border: none;
font-weight: 900;
border-radius: 30px 30px 0 0;
transform: translate(-50%, -94px);
left: 50%;
text-wrap: nowrap;
z-index: -1;
font-family: myFirstFont2;
font-style:italic;
}
.pierw .prem::before {
content: "";
position: absolute;
top: 20px;
right: -80;
height: 40px;
width: 40px;
background: transparent;
border-radius: 50%;
box-shadow: 27px 27px 0 10px #424242;
transform: translate(-60px, 0px);
z-index: -1;
}
.pierw .prem::after {
content: "";
position: absolute;
top: 20px;
right: -40px;
height: 40px;
width: 40px;
background: transparent;
border-radius: 50%;
box-shadow: -27px 27px 0 10px #424242;
z-index: -1;
}
.prem4 {
background-color: #424242;
position: absolute;
padding: 20px 30px 20px 20px;
color: rgb(255, 255, 255);
font-size: 20px;
border: none;
font-weight: 900;
border-radius: 30px 30px 0 0;
transform: translate(-50%, -84px);
left: 50%;
text-wrap: nowrap;
font-family: myFirstFont;
z-index: -1;
line-height: 0.5;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
}
.pierw .prem4::after {
content: "";
position: absolute;
top: 10px;
right: -40px;
height: 40px;
width: 40px;
background: transparent;
border-radius: 50%;
box-shadow: -27px 27px 0 10px #424242;
z-index: -1;
}
.pierw .prem4::before {
content: "";
position: absolute;
top: 10px;
right: -80;
height: 40px;
width: 40px;
background: transparent;
border-radius: 50%;
box-shadow: 27px 27px 0 10px #424242;
transform: translate(-60px, 0px);
z-index: -1;
}
.prem2 {
background-color: #424242;
padding: 20px 30px 20px 20px;
position: absolute;
color: rgb(255, 255, 255);
font-size: 20px;
border: none;
font-weight: 900;
border-radius: 30px 30px 0 0;
transform: translate(-50%, -84px);
left: 50%;
font-family: myFirstFont;
line-height: 0.5;
text-wrap: nowrap;
z-index: -1;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
}
.pierw .prem2::after {
content: "";
position: absolute;
top: 10px;
right: -40px;
height: 40px;
width: 40px;
background: transparent;
border-radius: 50%;
box-shadow: -27px 27px 0 10px #424242;
z-index: -1;
}
.pierw .prem2::before {
content: "";
position: absolute;
top: 10px;
right: -80;
height: 40px;
width: 40px;
background: transparent;
border-radius: 50%;
box-shadow: 27px 27px 0 10px #424242;
transform: translate(-60px, 0px);
z-index: -1;
}
@media (max-width: 425px) {
.prem,
.prem2,
.prem4 {
font-size: 12px;
padding: 20px 30px 30px 20px;
}
}
.fab {
color: white;
font-weight: 900;
}
.download-blender-container{
display:flex;
flex-direction:column;
gap:15px;
justify-content: center;
align-items: center;
width:100%;
}
.blender{
width: 400px;
height: 50px;
display:flex;
justify-content: center;
align-items: center;
color:rgb(255,255,255);
font-weight: 900;
background-image:linear-gradient(135deg, #00ffea, #ff00f7);
clip-path:path("M 0 20 L 15 0 L 90 0 L 100 5 L 300 5 L 310 0 L 385 0 L 400 20 L 370 20 L 370 30 L 400 30 L 385 50 L 310 50 L 300 45 L 100 45 L 90 50 L 15 50 L 0 30 L 30 30 L 30 20 L 0 20 Z");
}
.blender:hover {
background-image:linear-gradient(45deg, rgb(100, 180, 234), rgb(255, 60, 100));
color:rgb(0,0,0);
}
.addres {
color: chartreuse;
position: absolute;
text-align: center;
background-color: #4401df;
width: fit-content;
padding: 35px 100px 35px 100px;
border-radius: 35px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 16px 0px 0px 0px rgb(75, 133, 17);
transform: translateX(-50%) rotateY(-45deg);
transform-origin: center;
transition: 2s;
white-space: nowrap;
left: 50%;
font-size: 20px;
}
.style2 {
transform: translateX(-50%) rotateY(45deg);
transform-origin: center;
left: 50%;
box-shadow: -16px 0px 0px 0px rgb(75, 133, 17);
}
.addrespod {
position: absolute;
width: 150px;
height: 150px;
perspective: 1000px;
border: 1px solid transparent;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
}
.newsn {
text-align: center;
background: linear-gradient(45deg, #fe9a2e, #8a084b);
border-radius: 30px;
padding: 15px;
max-width: 300px;
border-width: 2px;
border-color: #b43104;
border-style: solid;
color: black;
display: block;
margin-left: auto;
margin-right: auto;
}
.scroll-down {
border-radius:20px;
padding:10px;
width: 50px;
height: 220px;
position: fixed;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
font-weight: 900;
font-size: 15px;
color: white;
opacity: 1;
bottom: 19%;
z-index: 14;
text-transform: uppercase;
}
.scroll-down::after{
content: "Scroll Down";
position: absolute;
word-wrap: nowrap;
white-space: nowrap;
width: 150px;
height: 50px;
border-radius: 50%;
background-color: transparent;
left: 50%;
color:white;
font-size: 18px;
transform: translateX(-50%);
top:30%;
font-family: myFirstFont2;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
animation:blinkingtexxt 0.8s linear infinite;
}
@keyframes blinkingtexxt {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* .scroll-down span {
font-family: myFirstFont2;
text-wrap: nowrap;
margin-left: -35px;
animation: blinking2 1s linear infinite;
}
@keyframes blinking2 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.scroll-down i {
display: flex;
flex-direction: column;
opacity: 1;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
z-index: 999;
}
.scroll-down i:nth-of-type(1) {
animation: animation11 1.5s linear infinite;
}
@keyframes animation11 {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.scroll-down i:nth-of-type(2) {
animation: animation12 1.5s linear infinite;
animation-delay: 0.5s;
}
@keyframes animation12 {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale(2);
}
}
.scroll-down i:nth-of-type(3) {
animation: animation13 1.5s linear infinite;
animation-delay: 1s;
}
@keyframes animation13 {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.scroll-down::before {
content: "";
position: absolute;
width: 40px;
height: 50px;
border-radius: 15px 0px 0px 15px;
background-color: rgb(50, 50, 50);
left: -40px;
top: 0;
z-index: -1;
}
.scroll-down::after {
content: "";
position: absolute;
width: 40px;
height: 50px;
border-radius: 0px 15px 15px 0px;
background-color: rgb(50, 50, 50);
left: 70px;
top: 0;
z-index: -1;
}
.rnwd::before {
content: "";
position: absolute;
width: 25px;
height: 25px;
top: 50px;
left: -25px;
border-radius: 50%;
background-color: transparent;
box-shadow: 10px -10px 0 rgb(50, 50, 50);
}
.rnwd::after {
content: "";
position: absolute;
width: 25px;
height: 25px;
top: 50px;
left: 70px;
border-radius: 50%;
background-color: transparent;
box-shadow: -10px -10px 0 rgb(50, 50, 50);
} */
.show-new {
display: block;
}
@media (max-width: 425px) {
.scroll-down span,
.scroll-down,
.scroll-down i,
.scroll-down i:nth-of-type(1),
.scroll-down i:nth-of-type(2),
.scroll-down i:nth-of-type(3),
.scroll-down::after,
.scroll-down::before,
.rnwd::after,
.rnwd::before {
display: none;
opacity: 0;
}
}
.new-div {
position: relative;
margin-top: 20px;
display: block;
margin-left: auto;
margin-right: auto;
justify-content: center;
background-color: rgb(100, 100, 100);
color: rgb(0, 0, 0);
text-align: center;
font-size: 17px;
font-weight: bold;
font-family: "Roboto", sans-serif;
border-radius: 30px;
width: 25%;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 5px;
padding-right: 5px;
min-width: 403px;
padding: 20px;
cursor: pointer;
user-select: none;
z-index: 3;
}
.new-div:hover {
color: rgb(0, 74, 0);
}
.dropdownitem {
display: none;
}
.dropshow {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
background-color: rgb(100, 100, 100);
color: rgb(255, 255, 255);
font-size: 14px;
font-family: myFirstFont2;
border-radius: 30px;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
padding: 40px;
z-index: 2;
line-height: 1.6;
text-align: justify;
}
.new-div.addround::before {
position: absolute;
content: "";
left: -50px;
top: 13px;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;
box-shadow: 28px 28px 0 7px rgb(100, 100, 100);
}
.new-div.addround::after {
position: absolute;
content: "";
right: -50px;
top: 13px;
width: 50px;
height: 50px;
transform: rotateX(180deg);
background: transparent;
border-radius: 50%;
box-shadow: -28px -28px 0 7px rgb(100, 100, 100);
}
@media (max-width: 768px) {
.new-div.addround::before,
.new-div.addround::after {
display: none;
}
.new-div {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropshow {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
@media (max-width: 768px) {
.new-div {
border-bottom: 2px solid black;
}
}
.backgrnd {
background-color: #ff8000;
width: 400px;
height: 400px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
margin-top:-30px;
clip-path:path("M 0 0 L 400 0 L 400 30 L 390 30 A 50 50 0 0 0 350 80 L 350 200 L 340 200 L 340 210 L 350 210 L 350 220 L 340 220 L 340 230 L 350 230 L 350 240 L 340 240 L 340 250 L 350 250 L 350 290 A 50 50 0 0 1 300 340 L 290 340 A 10 10 0 0 1 280 330 L 280 320 A 10 10 0 0 0 270 310 L 130 310 A 10 10 0 0 0 120 320 L 120 330 A 10 10 0 0 1 110 340 L 90 340 A 50 50 0 0 1 50 290 L 50 250 L 60 250 L 60 240 L 50 240 L 50 230 L 60 230 L 60 220 L 50 220 L 50 210 L 60 210 L 60 200 L 50 200 L 50 80 A 50 50 0 0 0 0 30 Z");
}
/* .backgrnd::after {
position: absolute;
right: 0;
top: -10px;
content: "";
width: 0;
height: 0;
border-top: 121px solid #ff8000;
border-left: 121px solid transparent;
margin: 25px auto 0;
z-index: 1;
}
.backgrnd::before {
position: absolute;
left: 0;
top: -10px;
content: "";
width: 0;
height: 0;
border-top: 121px solid #ff8000;
border-right: 121px solid transparent;
margin: 25px auto 0;
z-index: 1;
} */
.ovall {
display: flex;
justify-content: center;
align-items: center;
}
/* .ovall::before {
position: absolute;
left: -80px;
top: 33px;
content: "";
border-radius: 50%;
background: transparent;
transform: translateY(-3px);
width: 80px;
height: 80px;
box-shadow: 42px -42px 0 7px #ff8000;
z-index: 1;
}
.ovall::after {
top: 33px;
left: 100%;
position: absolute;
content: "";
border-radius: 50%;
background: transparent;
transform: translateY(-3px);
width: 80px;
height: 80px;
box-shadow: -42px -42px 0 7px #ff8000;
z-index: 2;
}
*/
@media (max-width: 1440px) {
.backgrnd,
.backgrnd::after,
.backgrnd::before,
.ovall,
.ovall::before,
.ovall::after {
display: none;
}
}
.vidnew-4 {
float: left;
border-radius: 30px;
border: 3px solid #ff8000;
margin: 15px;
}
.goals-1 {
text-align: center;
font-size: 55px;
font-family: myFirstFont2;
margin: 100px;
font-weight: 450;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px green;
background: linear-gradient(to left, red, yellow);
-webkit-background-clip: text;
color: transparent;
background-clip: text;
display: block;
margin-left: auto;
margin-right: auto;
font-style: italic;
}
.fa-brands {
color: white;
}
.navbar {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(oversea.png);
background-repeat: no-repeat;
background-size:cover;
background-position:center;
opacity: 0.5;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-2 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(code23.png);
background-repeat: no-repeat;
opacity: 0.5;
background-size: cover;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-3 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(electronicir.png);
background-repeat: no-repeat;
opacity: 0.5;
background-size: cover;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-4 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(banecent.png);
background-repeat: no-repeat;
opacity: 0.5;
background-position:center;
background-size: cover;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-5 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(tunnelcl.png);
background-repeat: no-repeat;
opacity: 0.5;
background-size: cover;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-6 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(marsj.png);
background-repeat: no-repeat;
opacity: 0.5;
background-size: cover;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-7 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(rtel.png);
background-repeat: no-repeat;
opacity: 0.5;
background-size: cover;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-8 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(trgtr9.png);
background-repeat: no-repeat;
opacity: 0.5;
background-size: cover;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-9 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(millacc.png);
background-repeat: no-repeat;
background-size: cover;
opacity: 0.5;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-10 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(spacebr.png);
background-repeat: no-repeat;
opacity: 0.5;
background-size: cover;
background-position:center;
mask-image: linear-gradient(black, transparent);
}
.navbar-11 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(dw22.png);
background-repeat: no-repeat;
opacity: 0.5;
background-size: cover;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-12 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(greed.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-13 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(zeg.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-14 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(dronm10.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-15 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(dorsss1.png);
background-size: cover;
background-position:center;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-16 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(crop13.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-17 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(analysis2.jpg);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent);
}
.navbar-18 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(inertialpropbaner5.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent);
}
.navbar-19 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(cuffsazx.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-20 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(sahinsezerdincer-star-exposure-4956785.jpg);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-21 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(publicdomainpictures-lab-217043_1920.jpg);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-22 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(ngc1300_hst_f.jpg);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent);
}
.navbar-23 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(fogghj23.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-24 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(cube352.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-25 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(citigo.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent);
}
.navbar-26 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(spstat.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent);
}
.navbar-27 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(pattern2.png);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
.navbar-28 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(ngc1300_hst_f.jpg);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
background-position:center;
mask-image: linear-gradient(black, transparent, transparent);
}
b {
position: absolute;
pointer-events: none;
z-index: 99;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
b::before {
position: absolute;
content: "\f06d";
width: 50px;
height: 50px;
font-family: fontawesome;
font-weight: 900;
animation: animatexx 1.3s linear forwards;
}
@keyframes animatexx {
0% {
transform: translate(0) rotate(0deg);
opacity: 0;
}
20%,
80% {
opacity: 1;
}
100% {
transform: translateX(300px) rotate(360deg);
opacity: 0;
}
}
iframe {
user-select: none;
}
@media (max-width: 425px) {
.vidnew-3,
.vidnew-4
{
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
}
iframe {
width: 85%;
}
}
.blk {
background-color: rgb(0, 0, 0);
}
.loading {
position: relative;
pointer-events: none;
opacity: 0.5;
}
.loading::after {
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgb(255, 255, 255);
border-right-color: rgba(255, 255, 255, 0.7);
transform: translate(-50%, -50%) rotate(0deg);
content: "";
animation: rotateSingleLoading 0.3s infinite linear;
z-index: 10;
}
@keyframes rotateSingleLoading {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.donation {
position: absolute;
left: 50%;
bottom: -20%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.2);
width: 300px;
height: 150px;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
border: 3px solid orange;
}
.rings {
position: absolute;
transform: translate(-50%, -50%);
border: 3px solid orange;
border-radius: 50%;
animation: rings 1s linear infinite;
z-index: 999;
}
@keyframes rings {
0% {
width: 0px;
height: 0px;
opacity: 1;
}
50%{
opacity: 1;
}
100% {
width: 100px;
height: 100px;
opacity: 0;
}
}
.centeredcontent{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
line-height: 2;
flex-direction: column;
}
.ex987:hover {
-webkit-animation-name: eexample; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
animation-name: eexample;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease-in-out;
}
@keyframes eexample {
0% {
color: #fa5858;
}
25% {
color: #fe9a2e;
}
50% {
color: #58acfa;
}
75% {
color: #58fa82;
}
100% {
color: orange;
}
}
.ex987 {
color: #00ff00;
font-size: 23px;
font-weight: 600;
}
@media (max-width: 500px) {
.ex987 {
font-size: 12px;
}
}
.center-505{
display:flex;
justify-content: center;
}
@media(max-width:425px){
.center-505{
margin-top:100px;
}
}
.containersmall{
position:absolute;
display:flex;
justify-content:center;
align-items:center;
top:40%;
left:50%;
transform:translate(-50%,-50%);
background-color: transparent;
flex-direction: column;
}
.polygon{
/* clip-path:polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); */
clip-path: polygon(70% 0%, 80% 50%, 70% 100%, 20% 100%, 30% 50%, 20% 0%);
animation:down 3s linear infinite;
width: 40px;
height: 40px;
background-color:rgb(255, 255, 255);
transform:rotateZ(90deg);
animation-delay: calc(var(--i) * (-0.6s));
position: absolute;
}
@keyframes down{
0%{transform:translateY(0px) scale(0.7) rotateZ(90deg);opacity: 0;}
50%{transform:translateY(70px) scale(1.3) rotateZ(90deg); opacity:1;}
100%{transform:translateY(140px) scale(0.7) rotateZ(90deg);opacity: 0;}
}
.adjust-shl{
position:absolute;
top:30px;
left:50%;
transform:translateX(-50%);
}
.circle-shl {
position: relative;
width: 300px;
height: 300px;
background: rgb(27,200,40);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.imgshl{
width:80%;
border-radius:50%;
}
.container-newer {
display: flex;
width: 1200px;
justify-content: space-evenly;
margin: auto;
background: transparent;
padding: 40px 20px 40px 20px;
transform: scale(0.92);
}
@media (max-width: 1440px) {
.container-newer {
position: relative;
display: flex;
margin-left: auto;
margin-right: auto;
gap: 60px;
width: fit-content;
flex-direction: column;
}
}
@media (max-width: 425px) {
.containernewer {
position: relative;
display: flex;
margin-left: auto;
margin-right: auto;
width: fit-content;
flex-direction: column;
}
}
svg{
font-family:myFirstFont2;
font-size:20px;
color:rgb(0,0,0);
}
@media screen and (max-width: 768px) {
table.ex2 {
margin: 0 auto;
width: 50%;
}
table.ex3 {
border-radius: 28px;
text-transform: uppercase;
display: block;
margin-right: auto;
margin-left: auto;
width: 50%;
border: 5px solid rgb(70,70,70);
text-align: center;
border-collapse: collapse;
background-image: linear-gradient(45deg, #ff8000, #6251ff);
}
td.ex11{
width:100%;
}
td.ex11:hover {
background-color: rgb(223, 61, 2);
width:100%;
}
td.ex11:active {
background-color: rgb(0, 97, 44);
width:100%;
}
}
.iprlabs{
position:absolute;
top: 12.5em;
left:50%;
transform:translate(-50%,-50%);
z-index:6;
}
.iprlabs p{
display:block;
font-size: 20px;
color: rgb(0,0,0);
font-weight:900;
}
.center-iframe{
display:flex;
justify-content:center;
align-items:center;
flex-wrap: wrap;
}
.precontent{
background-image: linear-gradient(45deg, #14ffe7, #ffeb3b, #ff00e0);
width:260px;
height:50px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:5px;
font-size: 12px;
font-weight:100;
color:rgb(0,0,0);
text-shadow:none;
clip-path:path("M 0 20 L 15 0 L 70 0 L 80 5 L 180 5 L 190 0 L 245 0 L 260 20 L 230 20 L 230 30 L 260 30 L 245 50 L 190 50 L 180 45 L 80 45 L 70 50 L 15 50 L 0 30 L 30 30 L 30 20 L 0 20 Z");
}
.precontent.startanimation{
animation:moveinback 3s ease-in-out;
}
@keyframes moveinback{
0%{transform:translateX(-300px);}
50%{transform:translateX(100px);}
100%{transform:translateX(0px);}
}
.line{
position:relative;
height:3px;
width:100%;
background-color:rgba(255, 255, 255, 0.2);
top:60%;
left:0;
margin-bottom: 25px;
margin-top: 25px;
}
.moddf{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:30%";
}
.containerforloader {
position: absolute;
background-image: linear-gradient(45deg, rgba(20, 255, 231, 0.75), rgba(255, 235, 59, 0.75), rgba(255, 0, 224, 0.75));
border-radius: 50%;
top: 50%;
left: -100px;
transform: translate(-50%, -50%) scale(0.6);
display: flex;
justify-content: center;
align-items: center;
/* width: 300px;
height: 300px; */
width: 390px;
aspect-ratio: 1;
clip-path: shape(from 93.18% 61.57%,curve to 80.94% 82.27% with 93.04% 75.45%,line to 61.57% 93.18%,curve to 37.53% 92.93% with 49.48% 100%,line to 18.39% 81.61%,curve to 6.58% 60.66% with 6.44% 74.55%,line to 6.82% 38.43%,curve to 19.06% 17.73% with 6.96% 24.55%,line to 38.43% 6.82%,curve to 62.47% 7.07% with 50.52% 0%,line to 81.61% 18.39%,curve to 93.42% 39.34% with 93.56% 25.45%);
}
.containerforloader::after{
position:absolute;
content:"";
background-color:rgb(0,0,0);
border-radius:50%;
width:36px;
height:36px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.containerforloader::before{
position:absolute;
content:'';
width:300px;
height:300px;
border-radius:50%;
border:5px solid rgb(0,0,0);
border-color: rgb(0,0,0) transparent rgb(0,0,0) rgb(0,0,0);
}
.circle-1 {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border-color: transparent transparent rgba(72,138,204,0.9);
border-width: 10px;
border-style: solid;
animation: rotate 2s infinite linear;
animation-delay: 0.5s;
}
.circle-1::before {
content: "";
position: absolute;
width: 17px;
height: 17px;
background-color: rgba(72,138,204,0.9);
top: 78px;
left: 0;
border-radius:50%;
}
.circle-1::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: rgba(72,138,204,0.9);
top: 5px;
right: 5px;
border-radius: 50%;
transform: rotateZ(270deg);
transform-origin: 44px 44px;
}
.circle-2 {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
border-color: transparent transparent rgba(72,138,204,0.9);
border-width: 10px;
border-style: solid;
animation: rotate2 2s infinite linear;
animation-delay:1s;
}
.circle-2::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: rgba(72,138,204,0.9);
top: 126px;
left: 13px;
border-radius: 50%;
}
.circle-2::after {
content: "";
position: absolute;
width: 17px;
height: 17px;
background-color: rgba(72,138,204,0.9);
top: 10px;
right: 10px;
border-radius: 50%;
transform: rotateZ(270deg);
transform-origin: 65px 65px;
}
.circle-3 {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border-color: transparent transparent rgb(255,255,255);
border-width: 10px;
border-style: solid;
animation: rotate 2s infinite linear;
}
.circle-3::before {
content: "";
position: absolute;
width: 17px;
height: 17px;
background-color:rgb(255,255,255);
top: 168px;
left: 20px;
border-radius: 50%;
}
.circle-3::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: rgb(255,255,255);
top: 21px;
right: 21px;
border-radius: 50%;
transform: rotateZ(270deg);
transform-origin: 79px 79px;
}
.circle-4 {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
border-color: transparent transparent rgb(255,255,255);
border-width: 10px;
border-style: solid;
animation: rotate2 2s infinite linear;
}
.circle-4::before {
content: "";
position: absolute;
width: 17px;
height: 17px;
background-color:rgb(255,255,255);
top: 207px;
left: 210px;
border-radius: 50%;
}
.circle-4::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: rgb(255,255,255);
top: -30px;
right: 214px;
border-radius: 50%;
transform: rotateZ(270deg);
transform-origin: 126px 125px;
}
@keyframes rotate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.adjust-new{
margin-top:-60px;
position:absolute;
display:flex;
justify-content:center;
z-index:17;
border-radius:50%;
box-shadow: 0px 0px 2px 5px rgba(50, 50, 50, 0.75),
0px 0px 2px 10px rgba(100, 100, 100, 0.75),
0px 0px 2px 15px rgba(150, 150, 150, 0.75);
}
.circleforlogo{
position: relative;
width: 230px;
height: 230px;
background-image: linear-gradient(
45deg,
rgb(255, 0, 0),
rgb(255, 154, 0),
rgb(208, 222, 33),
rgb(79, 220, 74),
rgb(63, 218, 216),
rgb(47, 201, 226),
rgb(28, 127, 238),
rgb(95, 21, 242),
rgb(186, 12, 248),
rgb(251, 7, 217),
rgb(255, 0, 0)
);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index:17;
overflow:hidden;
}
.logo-1{
position: absolute;
background: url(ufo-new.png);
width: 190px;
height: 190px;
background-size: cover;
border-radius: 50%;
z-index:17;
}
.text-1 {
position: absolute;
width: 100%;
height: 100%;
animation: animation97 15s linear infinite;
}
@keyframes animation97 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.text-1 span {
position: absolute;
left: 50%;
font-size: 0.8em;
transform-origin: 0 115px;
}
.orang-1{
color: rgb(0, 0, 0);
text-shadow: none;
}
.button-new{
white-space: nowrap;
color: white;
user-select: none;
cursor:pointer;
width:fit-content;
padding:0 5px 0 5px;
height:50px;
border-radius: 30px;
background-color:rgb(40,40,40);
display:flex;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
box-shadow:inset 0px 0px 0px 2px rgb(0,0,0);
overflow:hidden;
z-index:99;
}
.inside-new{
margin:10px;
display:inline-flex;
justify-content: center;
align-items: center;
width:fit-content;
padding:0 4px 0 4px;
height:56px;
border-radius:30px;
background-image:linear-gradient(var(--x, 45deg), rgb(255, 0, 98) 33%, rgb(40,40,40) 0%, rgb(40,40,40) 70%, rgb(0, 255, 110) 60%);
z-index:99;
filter:drop-shadow(0px 0px 10px rgb(0,0,0));
}
.inside-new:hover{
background-image:linear-gradient(var(--x, 45deg), rgb(0, 0, 255) 33%, rgb(40,40,40) 0%, rgb(40,40,40) 70%, rgb(255, 0, 0) 60%);
filter:drop-shadow(0px 0px 10px rgb(0,0,0));
}
.button-new:hover{
color:rgb(100,255,100);
}
#loading-screen{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
z-index: 9999;
display:flex;
align-items:center;
justify-content: center;
border-radius:50%;
width: 100px;
height:100px;
border-color: var(--colorofloader, blue) transparent transparent transparent;
border-width: 10px;
border-style: solid;
animation: animate .5s linear infinite;
}
#loading-screen::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: var(--colorofloader, blue);
top: 0px;
left: 0px;
border-radius:50%;
}
#loading-screen::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: var(--colorofloader, blue);
top: -73px;
right: 7px;
border-radius: 50%;
transform: rotateZ(270deg);
transform-origin: 44px 44px;
}
@keyframes animate {
0% {
transform: translate(-50%, -50%) rotate(360deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
.dark-screen{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
overflow:hidden;
margin: 0;
padding: 0;
background-image: url("data:image/svg+xml,");
}
.dark-screen-mask{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url(qimono-earth-1756274.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0.5;
mask-image: linear-gradient(black,transparent);
}
.dark-screen .cnt{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(1.3);
animation: rotateloader 2s linear infinite;
z-index:0;
}
@keyframes rotateloader {
0% {
transform: translate(-50%, -50%) rotateY(0deg) scale(1.3);
}
100% {
transform: translate(-50%, -50%) rotateY(360deg) scale(1.3);
}}
.colapse-dark-screen{
animation: colapsedark 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}
@keyframes colapsedark {
0% {
transform: scale(1) rotateZ(0deg);border-radius:0;
opacity: 1;
}
100% {
transform: scale(0) rotateZ(360deg);border-radius:50%;
opacity: 0;
}
}
.progress-bar{
display:flex;
align-items: center;
justify-content: center;
bottom:90px;
left:50%;
transform:translateX(-50%);
width:120px;
height:22px;
color: greenyellow;
border-radius:20px;
border:2px solid;
position:absolute;
}
.progress-bar::before{
content:"";
position:absolute;
margin:2px;
inset:0 var(--startfill, 100%) 0 0 ;
border-radius:inherit;
background:currentColor;
}
.progress-bar .text-above{
position:absolute;
top:-100%;
left:50%;
transform:translate(-50%,-50%);
color:rgb(255, 255, 255);
font-size:20px;
font-weight: bold;
font-family:myFirstFont2;
}
.direction{
display:flex;
justify-content: center;
align-items: center;
position: absolute;
top: 12.5em;
right: 80px;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
width:20px;
height:20px;
border: 3px solid rgb(255,255,255);
}
.pauseplaycontainer{
display:flex;
justify-content: center;
align-items: center;
position: absolute;
top: 12.5em;
right: 130px;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
width:20px;
height:20px;
border: 3px solid rgb(255,255,255);
}
.pause-btn.active{
display:block;
}
.play-btn.active{
display:block;
}
.faster{
display:flex;
justify-content: center;
align-items: center;
position: absolute;
top: 12.5em;
left: 30px;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
width:20px;
height:20px;
border: 3px solid rgb(255,255,255);
}
.slower{
display:flex;
justify-content: center;
align-items: center;
position: absolute;
top: 12.5em;
right: 30px;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
border: none;
color: white;
padding: 10px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
width:20px;
height:20px;
border: 3px solid rgb(255,255,255);
}
.faster:hover,
.slower:hover{
background-color: rgb(255,255,255);
}
.faster:hover .fas,
.slower:hover .fas{
color: rgb(0,0,0);
}
@media screen and (max-width: 1920px) {
.cnt{
width:30%;
}
.dark-screen .cnt{
transform:translate(-50%,-50%) scale(0.5);
}
.center-iframe-blender{
display:flex;
justify-content:center;
align-items:center;
flex-wrap: wrap;
flex-direction: column;
}
}
.bookscontent{
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
.scroll-animation{
animation: scrollanim 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes scrollanim {
0%{transform:translateX(var(--start, 0%)); opacity:0;}
100%{transform:translateX(0%); opacity:1;}
}
.ex122:hover {
-webkit-animation-name: aexample; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
animation-name: aexample;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease-in-out;
}
@keyframes aexample {
0% {
color: #fa5858;
}
25% {
color: #fe9a2e;
}
50% {
color: #58acfa;
}
75% {
color: #58fa82;
}
100% {
color: orange;
}
}
.ex122 {
color: #00ff00;
font-size: 15px;
font-weight: 600;
}
@media (max-width: 425px) {
.ex122 {
font-size: 12px;
}
}
.vidnew-7{
border-radius:20px;
border-width:5px;
border-color:#2ECCFA;
border-style:solid;
margin-right:auto;
margin-left:auto;
margin-top:30px;
margin-bottom:30px;
display:block;
box-shadow: 0px 0px 13px 13px #6E6E6E;
}
.sah{
display:flex;
justify-content: center;;
margin-left:auto;
margin-right:auto;
margin-top: 100px;
margin-bottom:80px;
border-radius:50%;
min-width:20%;
max-width:40%;
box-shadow: 0px 0px 15px 10px #4D4D4D;
}
.title-1{
display:flex;
justify-content: center;
margin-left:auto;
margin-right:auto;
border-radius:20px;
padding:20px;
min-width:300px;
max-width:30%;
text-align:center;
background-color: #000000;
font-size:40px;
font-family:myFirstFont2;
color:rgb(255,255,255);
text-shadow: -2px 0 #000000, 0 2px #040404, 2px 0 #000000, 0 -2px #000000;
margin-bottom:20px;
}
.likeit{
display:flex;
justify-content: center;
align-items: center;
flex-direction:row;
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding:0 20px 20px 20px;
background-color:rgb(60,60,60);
width:260px;
height:50px;
clip-path:path("M 0 20 L 15 0 L 245 0 L 260 20 L 230 20 L 230 30 L 260 30 L 245 50 L 15 50 L 0 30 L 30 30 L 30 20 L 0 20 Z");
}
.likeit i:nth-child(1){
display:flex;
margin-left:-33px;
margin-right:20px;
font-size:20px;
color:rgb(255,255,255);
cursor:pointer;
}
.likeit i:nth-child(1):hover{
color:rgb(0,255,0);
}
.likeit i:nth-child(3){
display:flex;
margin-left:20px;
margin-right:20px;
font-size:20px;
color:rgb(255,255,255);
cursor:pointer;
}
.likeit i:nth-child(3):hover{
color:rgb(255,0,0);
}
.centercss{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin:50px;
}
.box{
position:fixed;
top:125%;
animation:animateX 1s ease-in-out infinite;
display:flex;
justify-content: center;
align-items: center;
z-index:-1;
}
.box-2{
position:fixed;
top:125%;
animation:animateX2 1s ease-in-out infinite;
display:flex;
justify-content: center;
align-items: center;
z-index:-1;
}
.heads-in-motion{
background-image: url("alienware.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width:20px;
height:20px;
z-index:-1;
}
.rocket-in-flying::after{
content:"";
position:absolute;
background-image: url("ufog.png");
background-size: cover;
background-position: center;
width:var(--ufosize, 50px);
height:var(--ufosize, 50px);
opacity:1;
z-index:-2;
}
.rocket-in-flying::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:20px;
height:20px;
filter:blur(7px);
background-color: limegreen;
border-radius:50%;
opacity:1;
z-index:1000;
}
@keyframes animateX {
0% {top:125%;}
100% {top:-25%;}
}
@keyframes animateX2 {
0% {top:125%;transform:rotateZ(0deg);}
100% {top:-25%;transform:rotateZ(var(--headrandomrotate, 0deg));}
}
.photo-container img{
margin:20px;
display: flex;
justify-content: space-evenly;
align-items: space-evenly;
flex-wrap: wrap;
border-radius:40px;
border: 3px solid rgb(70,170,70);
box-shadow: 0px 0px 15px 10px rgb(70,170,70);
}
.badge:nth-of-type(1).badge-animation{
animation: moveinleft 1s linear;
}
@keyframes moveinleft {
0%, 50%{transform:translateX(0px);opacity:0;}
50%{transform:translateX(-700px); opacity:0;}
100%{transform:translateX(0px); opacity:1;}
}
.badge:nth-of-type(3).badge-animation{
animation: moveinright 1s linear;
}
@keyframes moveinright {
0%, 50%{transform:translateX(0px);opacity:0;}
50%{transform:translateX(700px); opacity:0;}
100%{transform:translateX(0px); opacity:1;}
}
.description-1{
position:relative;
display:flex;
justify-content:center;
}
.description{
display:block;
margin-left:auto;
margin-right:auto;
margin-top:150px;
background-image:linear-gradient(45deg, rgba(10,10,10,0.4), rgba(70,70,70,0.4));
border-radius:20px;
padding:40px;
width:80%;
text-align:justify;
color:#9AFE2E;
font-size:22px;
font-family:myFirstFont2;
font-weight:900;
text-shadow:-1px 0 #2E9AFE, 0 1px #2E9AFE, 1px 0 #2E9AFE, 0 -1px #2E9AFE;
line-height:2.2;
}
.loader-container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:9999;
}
.loader{
position:relative;
width:200px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
animation:changebg 3s linear infinite;
}
@keyframes changebg{
0%{filter:hue-rotate(0deg);}
100%{filter:hue-rotate(360deg);}
}
.loader p{
color:rgb(255,0,0);
font-size:25px;
text-shadow: -1px 0 #000000, 0 1px #040404, 1px 0 #000000, 0 -1px #000000;
animation:changebg 3s linear infinite;
}
.loader span{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transform:rotate(calc(18deg * var(--i)));
}
.loader span::before{
content:"";
position:absolute;
width:30px;
height:30px;
background-color:rgb(255,0,0);
border-radius:50%;
top:0px;
left:0px;
border:3px solid rgb(0, 0, 0);
box-shadow: 0 0 20px rgb(255,0,0),
0 0 40px rgb(255,0,0),
0 0 60px rgb(255,0,0),
0 0 80px rgb(255,0,0);
animation:animateloader 1s linear infinite;
animation-delay: calc(var(--i) * (-0.1s));
}
@keyframes animateloader{
0%{transform:scale(1)}
80%,100%{transform:scale(0)}
}
.alien{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
background-image: url(alien7.png);
background-size: cover;
background-position: bottom center;
border-radius: 50%;
z-index: 3;
}
.container-for-logo{
position: fixed;
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: transparent;
display: flex;
gap:5px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container-for-logo .ufo-logo{
width: 120px;
height: 120px;
border-radius: 50%;
}
.container-for-logo .loading-text{
text-align:center;
color:rgb(255,255,255);
font-size:40px;
letter-spacing: 2px;
font-family:myThirdFont;
animation: blinking 2s linear infinite;
background: radial-gradient(green, yellow, red);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes blinking {
0%{opacity:1;}
50%{opacity:0.2;}
100%{opacity:1;}
}
.container-at-start{
margin-top:-10px;
display:flex;
justify-content: space-between;
align-items: center;
}
.topic-in-brief{
border-radius:20px;
background-image: linear-gradient(45deg, #14ffe7, #ffeb3b, #ff00e0);
width:400px;
height:50px;
/* border:5px solid rgb(40, 40, 40); */
display:flex;
align-items:center;
justify-content: center;
margin-bottom:-5px;
margin-left:-10px;
font-size: 12px;
font-weight:100;
color:rgb(0,0,0);
text-shadow:none;
clip-path:path("M 0 20 L 15 0 L 90 0 L 100 5 L 300 5 L 310 0 L 385 0 L 400 20 L 370 20 L 370 30 L 400 30 L 385 50 L 310 50 L 300 45 L 100 45 L 90 50 L 15 50 L 0 30 L 30 30 L 30 20 L 0 20 Z");
}
.loading-7 {
position: relative;
pointer-events: none;
opacity:0.5;
}
.loading-7::after {
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.2);
border-right-color: rgba(0,0,0,0.7);
transform: translate(-50%, -50%) rotate(0deg);
content:"";
animation: rotateSingleLoading 0.3s infinite linear;
z-index: 10;
}
@keyframes rotateSingleLoading {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/*contact form*/
.form{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:100%;
margin-top: 100px;
text-align:center;
font-family: sans-serif;
}
.label-form{
color:rgb(255,255,255);
font-size: 20px;
margin-bottom: 10px;
}
.input-form{
font-size: 18px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
max-width: 400px;
}
.textarea-form{
font-size: 18px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
max-width: 400px;
height: 150px;
resize: both;
}
/*responsible mobile part*/
@media screen and (max-width: 768px) {
.sidebar {
height: fit-content;
width: 100%;
position: absolute;
left:-5px;
top:-5px;
z-index: 11;
background: orangered;
border-radius:0;
border:none;
box-shadow:none;
padding-bottom: 0;
}
.hamburger.active .cross-line{
background-color: black;
}
.hamburger .cross-line{
background-color: white;
}
.hamburger.active{
z-index:999;
}
.menu:hover .fas, .fas::after, .menu .fas{
display:none;
}
.download-container{
display:none;
}
#logg{
display:none;
}
.menu {
position:relative;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
padding: 6px 0px 6px 0px;
text-decoration: none;
margin:0;
left:-3px;
top:-100px;
font-size: 14px;
color: yellow;
border: none;
background: none;
width:100%;
cursor: pointer;
outline: none;
transition: 0.2s;
border-width:0;
border-radius:0;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.item {
display: none;
background: linear-gradient(45deg, red , #0066ff);
padding:0;
width:100%;
border-radius:0;
}
.menu.darkgrey{
background: linear-gradient(45deg, rgb(40,40,40) , #0066ff);
border:none;
border-radius:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;padding: 6px 0px 6px 0px;
}
.sidebar::after, .sidebar::before{
display:none;
}
.menu:hover{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background: linear-gradient(45deg, rgb(40,40,40) , #0066ff);
width:100%;
border-radius:0;
margin:0;
}
.item a{
font-size:14px;white-space: nowrap;
padding: 10px 400px 10px 400px;
}
.item a:hover{
background-color:yellowgreen;
color:rgb(255,255,255);
transform: none;
width:100%;
white-space: nowrap;
background-image:none;
padding: 10px 400px 10px 400px;
}
.menu .item:hover a:first-child{
border-radius:0;
}
.menu .item:hover a:last-child{
border-radius:0;
}
.menu .item.show{
border:none;
background:none;
}
.menu:nth-of-type(1) .item.show,
.menu:nth-of-type(2) .item.show,
.menu:nth-of-type(3) .item.show,
.menu:nth-of-type(4) .item.show,
.menu:nth-of-type(5) .item.show,
.menu:nth-of-type(6) .item.show,
.menu:nth-of-type(7) .item.show,
.menu:nth-of-type(8) .item.show {
border-radius:0;
width:100%;
background:none;
border:none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6px 0px 6px 0px;
box-shadow: none;
}
.icon-bar{
display:none;
}
.menu-fas{
display:none;
}
}
/* HTML: Your text content
*/
.ribbon {
font-size: 28px;
font-weight: bold;
color: #fff;
}
.ribbon{
position: absolute;
top: 27px;
right: -75px;
width: 250px;
text-align: center;
transform: rotate(45deg);
line-height: 30px;
background: linear-gradient(#2989D8 0%, #1E5799 100%);
color: #FFFFFF;
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
}
svg {
font-family: 'myThirdFont', sans-serif;
width: 120%;
height: 100%;
}
svg text {
animation: stroke 8s infinite alternate;
stroke-width: 2;
stroke: #365FA0;
font-size: 120px;
}
@keyframes stroke {
0% {
fill: rgba(72,138,204,0);
stroke: rgba(54,95,160,1);
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
stroke-width: 2;
}
70% {
fill: rgba(72,138,204,0);
stroke: rgba(54,95,160,1);
}
80% {
fill: rgba(72,138,204,0);
stroke: rgba(54,95,160,1);
stroke-width: 3;
}
100% {
fill: rgba(72,138,204,1);
stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
stroke-width: 0;
}
}
.wrapper {
margin-top: 20px;
background-color: transparent;
}
.motto{
color:white;
text-align:center;
text-transform:uppercase;
background-color:red;width:50%;
margin-left:auto;
margin-right:auto;
margin-bottom: 50px;
display:block;
padding:10px;
transform:skew(-15deg, 0deg);
border-left-width:30px;
border-left-color:#FF8000;
border-left-style:solid;
border-radius:15px;
}
.content-settings{
position:fixed;
bottom:-25px;
left:60px;
transform:translate(-50%,-50%);
width:fit-content;
height:fit-content;
background-color:rgba(40,40,40,0.9);
border-radius:20px;
display:flex;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
padding:10px;
z-index:8;
display:none;
}
.settings{
position:fixed;
bottom:20px;
left:40px;
transform:translate(-50%,-50%);
font-size:30px;
color:rgb(255,255,255);
cursor:pointer;
z-index:8;
width:50px;
display:flex;
justify-content:center;
align-items:center;
margin:10px;
height:50px;
background-color:rgba(40,40,40,0.9);
padding:10px;
border-radius:25px;
}
#save-settings{
font-size:10px;
padding:10px;
border-radius:10px;
border:none;
background-color:rgb(80,80,80);
color:rgb(255,255,255);
margin:10px;
}
#save-settings:hover{
background-color:rgb(60,60,60);
}
#save-settings:active{
background-color:rgb(120,120,120);
}
.settings-label{
color:rgb(255,255,255);
font-size:10px;
margin:10px;
}
#font-size-select, #theme-select{
font-size:10px;
padding:5px;
border-radius:5px;
border:none;
background-color:rgb(80,80,80);
color:rgb(255,255,255);
}
.light-theme{
background-color:rgb(70,70,70);
color:rgb(255,255,255);
}
.small-font{
font-size:14px;
}
.medium-font{
font-size:16px;
}
.large-font{
font-size:18px;
}
.smallHrefs{
font-size:14px;
}
.mediumHrefs{
font-size:16px;
}
.largeHrefs{
font-size:18px;
}