/* Removed @mixin breakpoint */
@import url(https://capnkitten.github.io/BetterDiscord/Themes/Material-Discord/css/addons/material-you/source.css);
:root {
/* Existing variables */
--bg-col: #020203;
--bg-col-light: #f0f0f0;
/* Light Grey */
--bg-col-dark: #020203;
--txtcol: #d9d9d9;
--txtcol-light: #262624;
--txtcol-dark: #d9d9d9;
--txtcolinv: #262624;
--uielem-col: #0e0e0e;
--uielem-col-light: #d3d3d3;
/* Light Grey */
--uielem-col-dark: #0e0e0e;
/* --button-bg: url(darkmode.png);
--modebuttoncol: #fefcfa;
--transitioncol: rgba(0, 46, 101, 1); */
--heavyfont: url("../assets/fonts/Futura\ Extra\ Black\ Condensed\ BT.ttf");
--alphacol: #d3d3d347;
--alphacol-light: #17171a47;
--alphacol-dark: #d3d3d347;
--accent-col: #B5B5BA;
/* Light Blue */
--accent-col-dark: #B5B5BA;
/* Light Blue */
--accent-col-light: #383838;
/* iOS Light Blue */
--time-emoji: 'bazinga';
--random: calc(1 + (9999 - 1) * random());
--rose-gold-col: var(--accent-col);
}
.header {
overflow: hidden;
}
@font-face {
font-family: st;
src: url("../assets/fonts/SFPRODISPLAYREGULAR.OTF");
}
@font-face {
font-family: araboto;
src: url("../assets/fonts/Futura\ Extra\ Black\ Condensed\ BT.ttf");
text-transform: uppercase;
}
@font-face {
font-family: Cera;
src: url("../assets/fonts/Fontspring-DEMO-cerapro-regular.otf");
}
@font-face {
font-family: kbd;
src: url("../assets/fonts/kbd.ttf");
}
@font-face {
font-family: cursve;
src: url("../assets/fonts/Creattion\ Demo.otf");
}
@font-face {
font-family: VB;
src: url("../assets/fonts/ViolentBrave-Regular.ttf");
}
@font-face {
font-family: HM;
src: url("../assets/fonts/xxii-goregrinder.otf");
}
@font-face {
font-family: graffiti-light;
src: url("../assets/fonts/Groteskly\ Yours\ -\ Okta\ Neue\ UltraLight.OTF");
}
@font-face {
font-family: graffiti-bold;
font-weight: 1000;
src: url("../assets/fonts/mycustomfont2.otf");
text-transform: uppercase;
}
@font-face {
font-family: retro_goth;
src: url("../assets/fonts/GothicByte.ttf");
}
@font-face {
font-family: retrobyte;
src: url("../assets/fonts/RetroByte.ttf");
}
@font-face {
font-family: retrodict;
src: url("../assets/fonts/Retrodict.otf");
}
@font-face {
font-family: bold;
font-weight: 1000;
src: url("../assets/fonts/SFPRODISPLAYBOLD.OTF");
text-transform: uppercase;
}
@font-face {
font-family: medium;
src: url("../assets/fonts/Groteskly\ Yours\ -\ Okta\ Neue\ UltraLight.OTF");
}
@font-face {
font-family: thin;
font-weight: 900;
src: url("../assets/fonts/Gotham-Light.otf");
}
@font-face {
font-family: erode;
font-weight: 900;
src: url("../assets/fonts/Futura\ Extra\ Black\ Condensed\ BT.ttf");
text-transform: uppercase;
}
@font-face {
font-family: sygil;
font-weight: 900;
src: url("../assets/fonts/ViolentBrave-Regular.ttf");
text-transform: uppercase;
}
.retro{
font-family: retrobyte;
text-transform: uppercase;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: st;
user-select: none;
user-zoom: none;
zoom: 1;
/* background-color: #262624; */
/* overflow-x: scroll; */
/* Removed unknown property user-zoom */
/* For Chrome, Safari, and newer versions of Edge */
-moz-osx-font-smoothing: grayscale;
/* For Firefox and older versions of Edge on macOS */
/* cursor: url('data:image/svg+xml,'), auto; */
& a {
text-decoration: underline;
-webkit-text-decoration-color: var(--accent-col);
text-decoration-color: var(--accent-col);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
padding: 2px;
border-radius: 0px !important;
}
/* white-space: nowrap; */
/* font-family:st,-apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji"; */
}
.circular-cursor {
/* slightly bigger */
width: 44px;
height: 44px;
/* invert whatever is behind it */
background: #ffffff;
mix-blend-mode: difference; /* primary: visually invert underlying pixels */
-webkit-backdrop-filter: invert(1); /* fallback / enhancement where supported */
backdrop-filter: invert(1);
border: 3px solid var(--txtcol);
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
position: absolute;
bottom: -1000px; /* keep initial off-screen like before (use px unit) */
left: 0;
z-index: 10000000000000000;
/* fixed, valid transform + smoother timing for cursor feel */
transform: translate(-50%, -50%) rotateY(-45deg);
transform-origin: center center;
will-change: transform, left, top;
pointer-events: none;
transition: transform 0.18s cubic-bezier(.22,1.12,.84,1), border 0.35s ease-in-out, box-shadow 0.25s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
box-shadow: 0 0 0 0 var(--txtcol);
}
.cursor-dot {
background-color: var(--txtcolinv);
backdrop-filter: blur(0) invert(1);
/* border:3px solid var(--txtcolinv); */
height: 5px;
width: 5px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
z-index: 10000000000000;
transform: translate(10.5px, 10.5px);
transform-origin: 0px 0px;
pointer-events: none;
transition: transform 0.3s ease-in-out, border 0.5s ease-in-out, border-radius 0.5s ease-in-out, width 0.5s ease-in-out;
/* transition: all 0.5s ease-in-out; */
}
html {
scroll-behavior: smooth;
/* cursor: none; */
}
/* -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: var(--fallback-bg-color);
} */
body {
margin: 0;
background: var(--bg-col);
transition: background 0.5s ease-in-out;
/* cursor: none; */
}
* {
/* cursor: none; */
scroll-snap-type: mandatory;
}
.graffiti-light {
font-family: graffiti-light;
text-transform: uppercase;
}
.graffiti-bold {
font-family: graffiti-bold;
font-stretch: ultra-expanded;
text-transform: uppercase;
letter-spacing: 2px;
}
.gradient-text {
color: var(--accent-col);
background: linear-gradient(90.18deg, #4f5bd5, #962fbf, #d62976, #fa7e1e, #feda75);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 0 14px;
}
-webkit-background-clip: text;
background-clip: text;
.gradient-accent-gbv {
background-color: linear-gradient(90.18deg, #60d5c4, #6a9fcb 50.85%, #bb84cc);
}
.gradient-text:hover {
transition: all 0.3s ease
}
.gradient-text {
position: relative;
}
.gradient-text::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(90.18deg, #4f5bd5, #962fbf, #d62976, #fa7e1e, #feda75);
-webkit-background-clip: text;
background-clip: text;
}
.kbd {
display: inline-block;
font-family: kbd;
min-width: 21px;
margin: 4px;
padding: 4px;
line-height: 1.5;
text-align: center;
background-color: #ffffff10;
border: 1px solid #ffffff1b;
border-radius: 6px;
;
color: var(--txtcol);
/* font-family: "Consolas", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
background-repeat: no-repeat;
background-size: cover;
transition: all 0.3s ease-in-out;
}
blockquote {
font-size: clamp(19px, 4vw, 100px);
/* Adjust this value as needed */
/* */
}
img {
/* -webkit-filter: drop-shadow(5px 5px 5px #1f1f1f); */
img {
-webkit-filter: drop-shadow(5px 5px 5px #1f1f1f);
filter: drop-shadow(5px 5px 5px #1f1f1f);
}
}
.wrapped:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url('http://placehold.it/100x100/09f/fff.png');
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: no-repeat;
opacity: 0.7;
}
cite {
display: block;
text-align: right;
font-family: bold, thin, st, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-top: 1rem;
font-size: .9rem;
color: #666666;
font-style: normal;
}
blockquote q {
font-family: graffiti-bold;
/* font-size: xxx-large; */
/* font-style: italic; */
/* letter-spacing: .1rem; */
}
blockquote q span {
font-family: graffiti-bold;
will-change: opacity, filter;
/* font-size: xxx-small; */
opacity: 0;
filter: blur(0px);
}
q {
font-family: graffiti-bold;
quotes: "“" "”" "‘" "’";
/* font-size: 400px; */
}
q:before {
font-family: graffiti-bold;
content: open-quote;
margin-right: .8rem;
/* font-size: xxx-large; */
}
q:after {
font-family: graffiti-bold;
content: close-quote;
/* font-size: xxx-large; */
}
q:before,
q:after {
font-family: graffiti-bold;
color: #ccc;
/* font-size: 4rem; */
/* font-size: xxx-large; */
}
.kbd::after {
/* background-image:url(partners_bg.f13db78.png);background-repeat: no-repeat;background-size: 100%; */
background-position: 50%;
z-index: -1;
border-radius: 6px;
}
html,
body,
.header {
height: 100%;
}
/*
.btn-3 {
background: linear-gradient(45deg, #150641, #2b2b2a, #262624);
background: #262624;
color: wheat;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s ease-out;
}
.btn-3:hover {
background: #262624;
box-shadow: 0 0 10px #00000070;
transform: scale(1.2);
transition: transform 0.2s ease-out;
} */
b,
strong {
/* text-shadow: 0 0 10px #8f8f8f, 0 0 20px #8f8f8f, 0 0 30px #8f8f8f;
*/
font-weight: 10000000;
font-family: bold;
}
.thin {
/* font-family: 'Roboto Thin', sans-serif; */
font-family: thin;
letter-spacing: 0px;
}
.cursive {
/* font-family: 'Roboto Thin', sans-serif; */
font-family: graffiti-bold;
letter-spacing: -1px;
}
.hover-widget {
transition: all 1s ease;
}
.hover-widget:hover {
box-shadow: 0 0 10px #fff;
transition: all 1s ease;
}
.header {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/* background: linear-gradient(45deg, #1f1f1e, #2b2b2a, #262624); */
background-color: #fff;
line-height: 2.5;
/* text-shadow: 0 0 10px #000; */
transition: background 0.3s ease-out;
background: var(--uielem-col);
background: url(../assets/images/test\ export2_with_mobile_warning.jpg);
/* box-shadow: 0 2px 60px #00000067; */
background-size: cover;
background-attachment: fixed;
/* background-repeat: no-repeat; */
transform-origin: center center;
background-position: center center;
border-radius: 0px;
z-index: 10;
color: white;
width: 100vw;
left: none;
height: 100vh;
top: none;
filter: invert(0);
border: none;
/* border: 1px solid #2C2C2E */
/* border:1px solid var(--accent-col) */
/*
border-color: #000;
border-image: linear-gradient(45deg, #0F0331, #262624) 1; */
}
.header h1 {
font-size: clamp(20px, 10vw, 90px);
line-height: 10vh;
color: var(--txtcol);
background-color: #000;
padding:0px 10px;
}
.Apollo {
/* background-image: url(partners_bg.f13db78.png); */
background-repeat: no-repeat;
background-size: contain;
background-position: 50%;
position: relative;
/* Use "relative" or "absolute" based on your layout needs */
overflow: visible;
/* height: 2000px; */
/* You may also want to specify a width and height for the .countdown element */
/* width: ...; */
/* height: ...; */
}
table {
color: #fff;
background-color: #1616162d;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: color-burn;
/* background-size: 101% ; */
backdrop-filter: blur(100px);
border-radius: 10px;
max-width: 90%;
max-height: 90%;
font-size: calc(1vw + 3px);
letter-spacing: 0.07rem;
box-shadow: 0 0 10px #000000fb;
}
table,
table tr td {
border-style: dashed;
border-radius: 10px;
border-color: #ffffff0c;
user-select: text;
}
table tr td .kbd,
table tr td .wider-text,
table tr td .narrow-text,
table tr td strong {
user-select: text;
}
/* table tr :hover{
border-style: dashed;
border-radius: 10px;
border-color: #ffffff0c;
user-select: text;
border: #fff;
animation: dash 1s linear infinite alternate;
} */
tr.active td {
/* background-color: #df1212; */
border-style: dashed;
border-radius: 10px;
border-color: #ce0f0fda;
user-select: text;
/* border: #181717; */
animation: dash 1s linear infinite alternate;
}
.narrow-text {
display: none;
/* Initially hide the narrow screen text */
}
.wider-text {
display: block;
/* Initially show the wider screen text */
}
/* Media query for narrow screens */
@media (max-width: 1090px) {
.narrow-text {
display: block !important;
/* Show the narrow screen text */
}
.wider-text {
display: none !important;
/* Hide the wider screen text */
}
}
tr.inactive {
/* background-color: #00000086;
/* color: #00000086;
border-style: dashed;
border-radius: 10px;
tr.inactive {
background-color: #00000086;
color: #00000086;
border-style: dashed;
border-radius: 10px;
border-color: #d811110c;
user-select: text;
}
}
.days:hover {
transition: 0.5s;
}
.days::content {
opacity: 0;
}
.hours::after {
content: "h";
position: relative;
top: 50%;
}
.hours:hover {
transition: 0.5s;
}
.days::content {
opacity: 0;
}
.minutes::after {
content: "m";
position: relative;
top: 50%;
}
.minutes:hover {
transition: 0.5s;
}
.days::content {
opacity: 0;
}
.seconds::after {
content: "s";
position: relative;
top: 50%;
}
.seconds:hover {
transition: 0.5s;
}
.days::content {
opacity: 0;
}
.header:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* background-color: rgba(34, 34, 34, 0.7); */
/* border-color: #000;
border-style: dashed; */
}
.listing {
list-style-type: none;
display: flex;
padding: 10px;
flex-direction: row;
width: 99%;
height: max-content !important;
/* height: 100%; */
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
/* z-index: 10; */
/* overflow-y: visible; */
}
.listing {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.listing li {
box-sizing: border-box;
padding: 10px;
/* width: 100%; */
/* flex: 1 1 50%; */
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
/* height: 100%; */
.card{
/* width:100%; */
height: 100% !important;
}
}
.hover-widget:hover {
size: 120%;
}
footer {
border-radius: 16px;
list-style: none;
position: relative;
width: 85vw;
bottom: 0;
display: flex;
/* text-shadow: 0 12px 20px #000000; */
background-color: #ffffff;
color: var(--txtcolinv);
/* background: var(--uielem-col); */
background-repeat: no-repeat;
background-size: cover;
line-height: 2.5;
transition: background 0.3s ease-out;
backdrop-filter: blur(10px);
background-size: cover;
/* box-shadow: 0 0 10px #000000; */
margin-left: auto;
/* Add this line */
margin-right: auto;
/* Add this line */
/* box-shadow: 0 0 40px var(--uielem-col-dark-light); */
}
.wrapper_footer {
background-image: url(../assets/images/partners_bg.f13db78.png);
background-repeat: no-repeat;
background-size: cover;
/* background-position: 100% */
}
del {
background-color: #000;
color: #000;
}
footer .cols .col a,
footer .cols .col i {
font-size: clamp(16px, 4vw, 24px);
color: #fffefe60;
transition: all 0.5s;
}
footer .cols .col a:hover {
color: #b8b8b8;
transition: all 0.5s;
}
.readmoretext {
/* max-height: 20vw; */
/* Set the desired maximum width */
position: relative;
/* Add a gradient overlay */
/* Add a blur effect */
backdrop-filter: blur(10px);
}
.read-more-button {
/* content: "Read more"; */
position: absolute;
bottom: 0;
right: 0;
/* background-color: rgb(0, 0, 0);
padding: 5px 10px;
cursor: pointer;
z-index: 9999999;*/
}
.more-dots {
z-index: 9999999;
}
.hidden-text {
display: none;
top: 100%;
left: 0;
/* background-color: rgba(255, 255, 255, 0.9); */
/* padding: 10px; */
/* z-index: 1; */
/* max-width: 20vw; */
}
footer ul {
list-style: none;
flex-direction: row;
}
footer ul li a {
/* color: #ffffff; */
text-decoration: none;
}
.legacy {
margin-top: 10px;
}
.invitation {
margin-top: 20px;
}
.glimpse,
.unveiling {
margin-top: 20px;
margin-bottom: 30px;
}
footer:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* background-color: rgba(34, 34, 34, 0.7); */
/* border-color: #000;
border-style: dashed; */
}
.content {
position: relative;
white-space: nowrap;
z-index: 1;
}
::selection {
/* background-color: var(--txtcolinv); */
background: #f5efbf;
color: var(--txtcol-light);
box-shadow: 0 0 24px rgba(218, 165, 32, 0.8);
font-family: thin !important;
border-radius: 6px;
/* text-shadow: var(--accent-col) 0 0 400px 10px !important; */
/* border: 1px solid var(--accent-col); */
/* animation: glow 0.5s ease-in-out infinite alternate; */
}
@keyframes glow {
from {
text-shadow: 0 0 10px rgba(218, 165, 32, 0.8);
}
to {
text-shadow: 0 0 30px rgba(218, 165, 32, 0.8);
}
}
button {
padding: 10px;
/* min-width: 100px; */
background: #a02f54;
position: relative;
/* margin-bottom: 0px; */
border-radius: 16px;
/* backdrop-filter: blur(10px); */
text-align: center;
/* cursor: pointer; */
transition: all 1s ease-in-out;
color: var(--txtcol);
outline: none;
/* font-size: clamp(8px, 2vw, 20px); */
/* border: none; */
border: 2px dashed transparent;
/* Add this line to remove the border */
/* box-shadow: 0 0px 20px yellow; */
font-weight: 1000;
/* overflow: hidden; */
span {
line-height: 0px;
font-family: "Montserrat", sans-serif;
font-weight: semibold;
}
background-color: var(--accent-col);
border-width: 2px;
border-color: var(--accent-col);
border-style: solid;
text-align: center;
font-size: large;
/* box-shadow: 0 0 80px var(--accent-col); */
transition: all 1s ease-in-out;
border-radius:16px !important;
}
.button-container {
position: relative;
}
button:hover {
content: attr(hovertext);
/* transform: translateY(-3%); */
text-align: center;
/* width: 200px; */
/* padding: 10px; */
/* background-color: #007bff00; */
color: var(--txtcolinv);
border-radius: 5px;
/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
/* font-family: thin; */
border-color: none;
transition: all 1s ease-in-out !important;
/* letter-spacing: 01px; */
}
.button-text {
position: absolute;
/* top: -100%; */
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: #007bff00;
transition: transform 0.3s ease-in-out;
font-family: thin;
letter-spacing: 100px;
}
.countdown {
position: relative;
/* cursor: pointer; */
}
/* Style for the tooltip */
[data-tooltip]:hover::after {
content: attr(data-tooltip);
/* position: relative; */
/* top: 100%; */
/* left: 50%; */
/* transform: translate(-50%, 60%); */
/* transform: ; */
padding: 5px;
/* background-color: #262624; */
/* backdrop-filter: blur(10px);? */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.767);
color: #fff;
border-radius: 5px;
font-size: 0.8rem;
z-index: 999999999;
background-color: #161615;
}
button:active {
opacity: 1;
/* box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
inset 8px 8px 16px rgba(0, 0, 0, 0.1); */
}
h1,
h2,
h3,
h4 {
color: var(--txtcol);
font-size: 28px;
font-weight: 700;
}
h1,
h2,
h3,
h4 span {
font-weight: 100;
}
.socials {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-size: 40px;
}
@include breakpoint(480px) {
h1,
h2,
h3,
h4 {
font-size: 36px;
}
@media screen and (min-width: 480px) {
h1,
h2,
h3,
h4 {
font-size: 36px;
}
}
@include breakpoint(480px) {
h2 {
font-size: 56px;
}
}
.countdown,
.days,
@media screen and (min-width: 480px) {
h2 {
font-size: 56px;
}
}
font-family: bold;
/* font-weight: 400; */
}
/* @include breakpoint(480px) {
.countdown {
font-size: 42px;
}
} */
#preloader {
/* background: #000 url('preloader.gif') no-repeat center center; */
background: var(--bg-col);
/* content: 'hi'; */
backdrop-filter: blur(10px);
background-size: 30%;
height: 100vh;
width: 100vw;
position: fixed;
overflow: hidden;
z-index: 999999999999999;
transition: opacity 0.5s ease-out;
justify-content: flex-start;
align-items: flex-end;
display: flex;
/* transform: ; */
}
#preloader.fade-out {
transform: translateY(-100%);
transition: transform 0.5s ease-out;
/* visibility: hidden; */
}
#preloader:after {
/* content: 'loading, please wait'; */
font-family: kbd;
color: var(--txtcol);
display: flex;
justify-content: center;
align-items: center;
height: auto;
/* Adjust height to fit content */
width: auto;
/* Adjust width to fit content */
position: fixed;
overflow: hidden;
z-index: 999999999999999;
/* background: rgba(0, 0, 0, 0.5); */
/* Darker, translucent background */
border-radius: 16px;
/* Border radius */
padding: 10px 20px;
/* Adds some padding around the text */
margin: auto;
/* Center the box */
top: 50%;
/* Vertically center the box */
left: 50%;
/* Horizontally center the box */
transform: translate(-50%, -50%);
/* Adjust for true centering */
transition: opacity 0.5s ease-out;
}
#preloader .loader-text , #preloader .loader-percent{
font-family: kbd;
color: var(--txtcol);
font-size: xxx-large;
/* Adjust font size as needed */
text-align: center;
/* Center the text */
margin-top: 20px;
text-transform: uppercase;
padding: 20px;
font-weight: bold;
/* Add some space above the text */
}
#preloader .loader-percent {
font-size: 100px;
/* Adjust font size as needed */
text-align: center;
/* Center the text */
margin-top: 20px;
text-transform: uppercase;
/* padding: 20px; */
font-weight: bold;
}
/*
{
background-color: #333;
color: #fff;
} */
/* Global CSS rule for elements with backdrop-filter property */
/* Remove blur effect for iOS devices */
/* @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
* {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--fallback-bg-color);
}
} */
/* Global CSS rules for nav */
.navig {
height: 75px;
max-height: 89px;
min-height: 70px;
width: 100vw;
/* top: 100px; */
position: fixed;
background: #ffffff00;
transition: all 0.75s;
z-index: 10001;
justify-content: space-between;
align-items: center;
left: 0;
/* Reset left */
right: 0;
/* Reset right */
margin: auto;
/* Center horizontally */
transform: translateY(0px);
/* Maintain vertical positioning */
padding: 10px 20px;
display: flex;
border-radius: 0px;
transition: transform 0.7s ease-in-out, border-radius 0.5s ease-in-out, height 0.5s ease-in-out, width 0.5s ease-in-out;
opacity: 100%;
color: white;
z-index: 1000000;
transform-origin: center center;
/* box-shadow: 0 0 20px #00000042; */
backdrop-filter: saturate(150%);
/* border: 2px solid #2C2C2E */
/* -backdrop-filter: blur(12px) saturate(150%); */
}
.navig .close-btn,
.navig .logo,
.navig .icdown {
color: var(--txtcol);
}
.navig.open {
transition: all 0.5s ease;
/* max-height: 61px;
min-height: 50px; */
/* height: max-content; */
/* box-shadow: inset 0 4px 8px #000000; */
background: var(--uielem-col);
/* width: 2px; */
border: none !important;
/* backdrop-filter: blur(10px); */
/* display: none; */
/* opacity: 0; */
animation: borderradiusbrainfuck 0.5s ease-in-out;
border-radius: 16px 16px 0 0 !important;
box-shadow: none !important;
transition: box-shadow 0.1s ease-in-out;
}
@keyframes borderradiusbrainfuck {
0% {
border-radius: 36px;
}
45% {
border-radius: 36px 36px 0px 0px;
}
100% {
border-radius: 16px 16px 0 0 !important;
}
}
.navig.open>* {
/* opacity: 0; */
transition: all 0.2s ease;
}
.navig.open .options {
/* opacity: 0%; */
transition: 0.5s all ease-in-out;
}
.navig .options {
/* opacity: 100%; */
/* color: #fff; */
display: flex;
flex-direction: row;
list-style: none;
align-items: center;
transition: 0.5s all ease-in-out;
}
.navig .scroll-progress-container {
display: none;
}
.navig.open .navbar {
opacity: 100%;
/* transform: translateY(-10px); */
}
.navig.open .main,
.navig.open .navmenu {
transition: all 0.5s ease;
z-index: 1000001;
color: var(--txtcol);
}
.navig.open .main {
transform: translateX(25%);
}
.navig.open .options {
opacity: 0%;
visibility: hidden;
}
.options {
background-color: #0000;
padding: 2px;
border-radius: 56px;
}
.navmenu>* {
padding: 2px;
}
.navig .icdown:hover {
transform: scale(1.1);
transition: all 0.7s ease-in-out !important;
}
.navig .icdown {
/* background: transparent;
backdrop-filter: blur(0px); */
/* backdrop-filter: none; */
/* background: transparent; */
justify-content: center;
align-content: center;
color: var(--txtcol);
/* border: 1px solid var(--alphacol); */
transition: color 0.5s ease-in-out;
/* backdrop-filter:none; */
transform: scale(1);
opacity: 0;
width: 0;
transition: all 0.7s ease-in-out !important;
}
.navig.clicked {
/* border-radius: 36px 36px 0px 36px; */
/* height: 80px; */
/* transform: translateX(50vw) translateY(10px) scale(0.5); */
transform-origin: center center;
}
.navig.open .icdown :hover {
border-radius: 36px;
}
.navig.open .icdown {
/* background: var(--alphacol); */
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
color: var(--txtcol);
transition: color 0.5s ease-in-out;
/* padding: 8px 20px 17px 8.5px; */
/* padding: 20px;; */
/* opacity: 100%; */
/* z-index: 10; */
/* position: fixed; */
border-radius: 52px;
width: 52px;
/* border: var(--uielem-col) 1px solid; */
/* transform: translateX(); */
}
.navig.clicked:hover {
/* transform: translateX(50vw) translateY(20px) scale(0.7); */
}
.navig .icon:hover {
/* background: var(--accent-col); */
/* font-size: clamp(9px,calc(14vw),40px); */
/* transform-origin: center; */
transition: all 0.3s ease;
}
.navig .icon {
/* Styles for the icon */
/* transform: translateX(50vw) translateY(10px); */
}
.navig.collapse {
width: 72vw !important;
max-width: 424px;
/* height: calc(max-content); */
max-height: 140px;
height: 75px;
/* height: fit-content; */
/* border: 2px solid var(--accent-col); */
/* filter: drop-shadow(0 0 40px var(--accent-col)); */
/* right:0; */
transform: translateY(12%) !important;
transition: all 0.7s ease;
position: absolute;
display: flex;
flex-direction: row;
/* justify-content: center; */
/* align-items: center; */
backdrop-filter: blur(50px), saturate(150%), brightness(90%);
position: absolute;
left: 0;
right: 0;
margin: auto;
padding: none;
box-shadow: 0 0 20px #00000042;
border-radius: 16px !important;
.notice {
display: none;
}
.logo,
.logo_img,
.icon {
display: none;
width: 0;
}
.logo-text {
display: none;
}
.notice {
display: none;
}
.close-btn {
opacity: 1;
background-color: var(--accent-col);
color: var(--txtcolinv);
}
.options {
right: 0;
position: relative;
width: fit-content;
/* background-color: var(--alphacol); */
padding: 2.5px;
border-radius: 16px;
/* opacity: 0; */
}
.scroll-progress-container {
display: flex;
/* transform: translate(-50%, 0); */
}
}
@media screen and (max-width: 417px) {
#section-list.open {
width: 98vw !important;
}
.navig.collapse {
/* overflow-x: scroll; ; */
width: 98vw !important;
/* top: 0 !important; */
}
}
.motion-blur {
filter: blur(2px);
transition: filter 0.2s ease-out;
}
.scroll-progress-container {
display: flex;
align-items: center;
/* background-color: #000; */
border-radius: 25px;
/* padding: 5px 10px; */
color: var(--txtcol);
font-family: st;
font-size: 14px;
width: 300px;
height: 65px;
list-style: none;
/* border: red 1px solid; */
justify-content: space-between;
}
.circle-progress {
position: relative;
width: 50px;
/* Adjust as needed */
height: 50px;
/* Adjust as needed */
border-radius: 50%;
background-color: var(--accent-col);
/* Background of the container */
}
.circle-progress-inner {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transform-origin: 0, 0;
transform: scale(2);
border: 1px solid var(--txtcol);
/* Color for the progress */
/* clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); Initial clip for 0% */
transform-origin: center;
/* Initial rotation */
}
.dropdown {
margin-left: 5px;
font-size: xx-large;
}
.percentage {
/* background-color: var(--accent-col); */
color: var(--txtcol) !important;
/* border: var(--accent-col) 2px solid; */
box-shadow: inset 0 0 10px #00000042;
border-radius: 25px;
padding: 2px 0px;
font-size: large;
font-weight: 1000;
width: calc(55px + (75/100*55px));
height: 75%;
display: flex;
flex-direction: row;
justify-content: center;
transform: translate(-50%, 0) rotate(0deg);
align-items: center;
user-select: none;
}
.shadow {
height: 100vh;
width: 101vw;
transform: translateX(-0.5vw);
pointer-events: none;
z-index: 10000000000000000000000000000000;
position: fixed;
top: 0;
left: 0;
}
.menu-toggle .hamburger-menu {
display: none;
opacity: 0;
transition: opacity 0.5s ease-out;
}
.menu-toggle:hover .hamburger-menu {
display: block;
opacity: 1;
transition: opacity 0.5s ease-out;
}
.navig.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all 0.7s ease-in-out;
/* transform: translateY(0); */
}
.sticky-side {
position: fixed;
top: 0;
right: 0;
left: auto;
transition: transform 0.7s ease-in-out;
transform: translateX(0);
}
.navig.sticky.hidden {
/* transform: translateY(-100%); */
}
.logo a {
font-size: 48px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--txtcol);
overflow: hidden;
transform: scale(1.0);
transition: transform 0.5s ease-in-out;
background-repeat: no-repeat;
background-size: cover;
/* background-image: url(404 img\\to show\\guy_think.webp); */
font-size: auto;
line-height: 100%;
/* content:none; */
/* border-radius: 36px; */
display: block;
padding: 10px;
& img {
/* border-radius: 36px;
*/
transition: all 1s ease-in-out;
}
&.change {
color: var(--txtcol);
transition: all 1s ease-in-out;
}
}
.logo:hover a {
text-decoration-color: rgb(59, 130, 246);
transition: all 1s ease-in-out;
}
.logo:hover a img {
border-radius: 1px;
transition: all 1s ease-in-out;
}
.navig a {
font-family: graffiti-bold;
}
.navig:hover .logo {
/* transform: scale(0.8); */
}
.navbar {
display: flex;
visibility: hidden;
list-style: none;
/* transform: translateY(-100%); */
/* transition: transform 0.3s ease-in-out; */
}
.dropdown-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.dropdown-menu.slide {
max-height: 500px;
}
.navbar li {
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: #000;
margin-right: 48px;
text-align: center;
/* width: 70px; */
/* transition: 3s; */
font-family: graffiti-bold;
}
/*
.menu li:hover {
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 5px;
color: #fff;
margin-right: 48px;
width: 70px;
transition: 3s;
} */
.navbar a {
color: #fff;
text-decoration: none;
/* padding: 10px; */
}
.menu-toggle {
display: none;
}
abbr {
text-decoration: dotted underline;
text-emphasis: inherit;
text-decoration-thickness: 2px;
text-decoration-skip-ink: auto;
text-decoration-color: #383838;
/* cursor: cell; */
font-weight: 700;
color: wheat;
font-size: 1.5rem;
}
.menu-toggle input {
display: none;
}
.menu-toggle span {
display: block;
width: 30px;
height: 3px;
background-color: #fff;
margin-bottom: 5px;
}
.navbar {
display: flex;
visibility: hidden;
}
.bx bx-menu {
display: none;
}
.menu-toggle {
display: block;
/* cursor: pointer; */
}
.menu-toggle span {
transition: all 0.3s ease-in-out;
}
.menu-toggle input:checked~span:nth-child(2) {
transform: rotate(-45deg) translate(-5px, 5px);
}
.menu-toggle input:checked~span:nth-child(3) {
opacity: 0;
}
.menu-toggle input:checked~span:nth-child(4) {
transform: rotate(45deg) translate(-5px, -5px);
}
.menu-toggle input:checked~ul {
display: block;
width: 100%;
.hamburger-menu {
display: none;
}
}
.menu-toggle input:checked~ul li {
text-align: center;
margin-right: 0;
padding: 10px 0;
}
.menu-toggle input:checked~ul li a {
padding: 10px;
font-size: 20px;
}
.img-box h3 {
color: #ffffff;
position: absolute;
bottom: 0;
left: 20px;
opacity: 0;
transition: bottom 0.5s, opacity 0.5s;
/* text-shadow: 0 0 10px rgba(0, 0, 0, 0.973); */
border: 2px solid #ffffff;
background-color: #00000070;
padding: 5px;
outline: none;
transition: 0.5s;
}
.img-box:hover h3 {
bottom: 20px;
/* Move the text up */
opacity: 1;
/* Show the text */
}
/*
.container {
width: 100%;
height: 100vh;
background: linear-gradient(45deg, #262624, #262624);
display: flex;
align-items: center;
justify-content: center;
} */
.gallery {
display: flex;
align-items: center;
justify-content: center;
}
.img-box img {
width: 100%;
height: auto;
transition: transform 0.5s;
}
.img-box {
position: relative;
width: 30%;
margin: 1.66%;
/* overflow: hidden; */
/* box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); */
transition: 0.5s;
}
@keyframes bounce {
0% {
transform: translateY(0);
font-size: larger !important;
}
50% {
transform: translateY(-20px);
font-size: small !important;
}
100% {
transform: translateY(0);
/* font-size: larger !important; */
font-size: larger !important;
}
}
.header .topics {}
.scroll-down {
position: absolute;
bottom: 0;
/* left: 0;
right: 0; */
margin: 0;
/* Removed empty ruleset .header .topics */
color: var(--accent-col);
/* opacity: 0.5; */
/* font-size: 30px; */
animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
height: 50px;
width: 50px;
transition: all 0.2s ease-in-out;
}
.logo-text{
transition: all 0.5s ease-in-out;
}
.scroll-down:hover {
opacity: 1;
transition: all 0.2s ease-in-out;
}
.scroll-icon {
background: var(--accent-col);
-webkit-background-clip: text;
font-size: larger !important;
-webkit-text-fill-color: transparent;
transition: all 0.5s ease-in-out;
/* text-shadow: 0 0 10px #9583d1, 0 0 20px #4926bd, 0 0 30px #9583d1; */
/* border: 2px solid white; */
}
.scroll-icon:hover {
background: var(--accent-col);
;
font-size: x-large;
text-shadow: 0 0px 12px var(--txtcol);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.5s ease-in-out;
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 10px #9583d1, 0 0 20px #4926bd, 0 0 30px #9583d1;*/
}
button {
max-height: 200px;
/* font-size: calc(1vw + 10px); */
}
@media screen and (max-width: 768px) {
button {
max-height: 150px;
/* font-size: calc(1vw + 8px); */
}
}
@media screen and (max-width: 480px) {
button {
max-height: 100px;
/* font-size: calc(1vw + 6px); */
}
}
.img-box:hover img {
z-index: 9999;
transform: scale(0.001);
/* Add a smooth transition */
/* transition: transform 0.s ease-in-out; */
}
.img-box:hover {
width: 50%;
/* cursor: pointer; */
/* transition: 0.5s; */
}
* img {
max-width: 90vh
}
img {
/* border-radius: 36px; */
/* cursor: pointer; */
z-index: 10;
}
canvas {
background: #232323;
}
.cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* background: linear-gradient(45deg, #262624, #262624); */
transition: transform 0.3s ease;
}
.col {
width: calc(25% - 2rem);
margin: 2rem;
/* cursor: pointer; */
transition: transform 0.3s ease;
}
.form-container {}
.container {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
/* Removed empty ruleset .form-container */
.front,
.back {
background-size: cover;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
border-radius: 10px;
background-position: center;
-webkit-transition: -webkit-transform .7s ease-in-out;
transition: -webkit-transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out, -webkit-transform .7s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
min-height: 280px;
height: auto;
border-radius: 10px;
color: var(--txtcol);
font-size: 1.5rem;
}
.back {
/* background: */
background: #190d4186;
backdrop-filter: blur(10px);
/* background: -webkit-linear-gradient(45deg, #cedce7 0%, #596a72 100%);
background: -o-linear-gradient(45deg, #cedce7 0%, #596a72 100%);
background: linear-gradient(45deg, #cedce7 0%, #596a72 100%); */
}
.info_text {
/* background: var(--bg-col); */
transition: background 0.5s ease-in-out;
color: var(--txtcol);
font-size: 1.5rem;
align-content: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 1vh;
}
.front:after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
opacity: .6;
background-color: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.container:hover .front,
.container:hover .back {
-webkit-transition: -webkit-transform 1.7s ease-in-out;
transition: -webkit-transform 1.7s ease-in-out;
-o-transition: transform 1.7s ease-in-out;
transition: transform 1.7s ease-in-out;
transition: transform 1.7s ease-in-out, -webkit-transform 1.7s ease-in-out;
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.inner {
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.container .back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container .front {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front .inner p {
font-size: 2rem;
margin-bottom: 2rem;
position: relative;
}
.front .inner p:after {
content: '';
width: 4rem;
height: 2px;
position: absolute;
background: #C6D4DF;
display: block;
left: 0;
right: 0;
margin: 0 auto;
bottom: -.75rem;
}
.main {
color: #fff;
}
abbr:hover {
text-decoration-line: none;
/* cursor: pointer; */
}
.front .inner span {
color: var(--txtcol);
font-family: 'Montserrat';
font-weight: 300;
}
@media screen and (max-width: 64rem) {
.col {
width: calc(33.333333% - 2rem);
}
}
@media screen and (max-width: 48rem) {
.col {
width: calc(50% - 2rem);
}
}
@media screen and (max-width: 32rem) {
.col {
width: 100%;
margin: 0 0 2rem 0;
}
}
@media (max-width: 1280px) {
#main-things {
padding: 14px 2%;
transition: 0.2s;
}
.navbar a {
padding: 5px 0;
margin: 0px 20px;
}
}
@keyframes twerk {
0%,
100% {
transform: rotate(0deg);
}
25%,
75% {
transform: rotate(2deg);
}
50% {
transform: rotate(-2deg);
}
}
.main {
display: block;
}
.navbar {
position: absolute;
/* z-index: -1 !important; */
/* right: -800vw; */
height: 51px;
max-height: 200px;
background-color: #ffff0000;
font-family: graffiti-bold;
/* display: none; */
font-size: medium;
opacity: 0;
visibility: hidden;
/* display: none; */
text-align: center;
color: transparent;
transform: translateY(10px);
flex-direction: row;
justify-content: center;
/* border-radius: 0px 0px 0px 10px; */
border-radius: 0 0 16px 16px;
transition: all 0.5s ease, opacity 0s ease;
/* z-index: 100000001; */
left: 0;
/* Reset left */
right: 0;
/* Reset right */
margin: auto;
/* Center horizontally */
transform-origin: top center;
/* box-shadow: 0 0 20px #00000042; */
}
.dyna-menu {
list-style: none;
/* font: st; */
display: flex;
/* display: none; */
flex-direction: row;
justify-content: center;
align-items: center;
font-family: graffiti-bold !important;
font-size: medium !important;
/* border-radius: 0px 0px 0px 10px; */
/* border-radius: 0 0 16px 16px; */
}
.dyna-menu li {
color: var(--txtcol) !important;
font-family: graffiti-bold !important;
font-size: medium !important;
text-emphasis: none !important;
text-decoration: none !important;
margin: 8px 4px;
a span h6{
background-color: #000000 !important;
letter-spacing: normal !important;
text-transform: lowercase !important;
font-size: larger !important;
padding: 2px 20px !important;
}
}
.opt {
display: none;
width: 0;
opacity: 0;
}
.icdown {
display: none;
}
.dyna-menu a {
color: var(--txtcol) !important;
font-family: graffiti-bold !important;
font-size: medium !important;
text-emphasis: none !important;
text-decoration: none !important;
text-transform: uppercase;
}
.navbar a {
/* transform: translateX(25%); */
border-radius: 6px;
display: block;
/* margin: 0 0px 20px 0; */
text-align: center;
line-height: 25px;
width: 100%;
padding: 5px;
margin: 8px 0;
/* transition: transform 0.8s, background-color 0.8s; */
color: transparent;
/* Added both transitions */
}
.navbar a:hover {
background-color: #161615;
}
.navbar.open a:hover {
/* transform: translateX(5px); */
background-color: #525252;
/* width: 100%; */
transition: transform 0.8s, background-color 0.8s;
background: #d4d4cc00;
backdrop-filter: blur(10px);
/* box-shadow: inset 0 4px 8px #000000; */
/* Added both transitions */
}
.navbar.open li a {
color: var(--txtcol);
}
.navbar li {
display: inline-block;
margin-right: 10px;
}
.navbar.open {
overflow-x: auto;
white-space: nowrap;
visibility: visible;
scrollbar-width: none;
background: var(--uielem-col);
/* backdrop-filter: blur(10px); */
z-index: 1000000;
top: calc(100% - 2px);
flex-wrap: wrap;
overflow-y: hidden;
white-space: nowrap;
-ms-overflow-style: none;
visibility: visible;
scrollbar-width: none;
/* background: #20201f00; */
list-style: none;
/* backdrop-filter: blur(10px); */
border: none;
z-index: 1000000;
/* transform: translateX(5%) translateY(10px); */
transform-origin: top center;
position: absolute;
/* left: 4.5vw; */
animation: bounceopen_navbar 0.7s;
opacity: 1;
/* box-shadow: inset 0 -4px 8px #000000; */
}
.navbar.open::-webkit-scrollbar {
display: none;
/* Chrome, Safari, Opera */
}
/* Hide horizontal scrollbar */
body {
overflow-x: hidden;
}
/* Hide vertical scrollbar */
::-webkit-scrollbar {
width: 17px;
height: 17px;
/* border-radius: 6px; */
position: absolute;
left: 0;
background: rgba(0, 0, 0, 0.025);
scrollbar-arrow-color: #fff;
}
*::-webkit-scrollbar:hover {
background: rgba(0, 0, 0, 0.05);
scrollbar-shadow-color: #fff;
}
*::-webkit-scrollbar-track {
/* border-radius: 2px; */
background-color: var(--bg-col);
}
*::-webkit-scrollbar-thumb {
min-height: 30px;
border-radius: 6px;
border: 4px solid transparent;
background-clip: padding-box;
background-color: var(--alphacol);
scrollbar-3dlight-color: #fff;
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--accent-col);
}
::-webkit-scrollbar-button:single-button {
/* background-color: rgb(64, 64, 64); */
background-color: var(--bg-col);
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
::-webkit-scrollbar-button:single-button:hover {
/* background-color: rgb(64, 64, 64); */
background-color: var(--uielem-col);
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
height: 12px;
width: 16px;
background-position: center 4px;
background-image: url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
background-image: url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url("data:image/svg+xml;utf8,");
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
height: 12px;
width: 16px;
background-position: center 2px;
background-image: url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
background-image: url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url("data:image/svg+xml;utf8,");
}
.main {
font-size: 35px;
/* cursor: pointer; */
z-index: 1;
display: none;
}
.main {
display: block;
}
#\3A 1\.container {
background: #00000000;
/* visibility: hidden; */
/* display: none; */
/* position: absolute; */
/* top: -100%; */
/* display: none; */
}
article {
margin: 10px;
}
.slideshow-container {
/* max-width: 1000px; */
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
#myImg {
border-radius: 10px;
/* box-shadow: 0 0 10px #000; */
/* transform:translateX(0) ; */
z-index: 1;
width: 75vw;
}
/* Next & previous buttons */
.prev,
.next {
/* cursor: pointer; */
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
/* background-color: rgba(0, 0, 0, 0.8); */
}
/* Caption text */
.text {
color: #f2f2f200;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: fit-content;
left: 50%;
right: 50%;
text-align: center;
white-space: nowrap;
background-color: #00000000;
}
/* Number text (1/3 etc) */
.numbertext {
color: var(--txtcolinv);
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
z-index: 2;
}
/* The dots/bullets/indicators */
.dot {
/* cursor: pointer; */
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 9999999;
/* Sit on top */
/* padding-top: 100px; */
top: 0%;
width: 100vw;
height: 100vh;
/* Full width */
max-width: 100vw;
/* Full width */
height: 100vh;
/* Full height */
max-height: 100vh;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: #ffffff17;
backdrop-filter: blur(10px);
/* Black w/ opacity */
/* transform: translateY(50%); Center vertically */
/* transform: translateX(0%); */
pointer-events: all;
/* display: flex */
align-items: center;
justify-content: center;
/* scroll-behavior: auto; */
}
/* Hide the scrollbar */
.modal::-webkit-scrollbar {
display: none;
}
/* Modal Content (Image) */
.modal-content,
#caption {
/* position: fixed; */
top: 0%;
margin: 10px;
display: block;
width: 100vw;
height: 100vh;
/* max-width: 700px; */
/* left: 20vw; */
zoom: -80%;
}
#img01 {
object-fit: contain;
/* You can use "cover" or "contain" based on your preference */
max-width: 90vw;
max-height: 90vh;
border-radius: 6px;
padding: 6px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: var(--txtcol) !important;
background: #12121270 !important;
padding: 10px 0;
height: 150px;
}
#dot-container {
display: none;
}
/* Add Animation - Zoom in the Modal */
.modal-content,
#caption {
animation: zoom 0.5s ease;
/* Adjust the duration and timing function as needed */
}
@keyframes zoom {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#caption {
background: var(--alphacol);
color: var(--txtcolinv);
width: fit-content;
height: fit-content;
padding: 10px 20px;
border-radius: 16px;
}
.fadeOutAnimation {
animation: fadeOut 0.5s ease;
/* Adjust the duration and timing function as needed */
}
/* The Close Button */
.close {
position: fixed;
top: 15px;
right: 35px;
color: var(--txtcol);
font-size: 40px;
font-weight: bold;
transition: 0.3s;
z-index: 999999999999;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
width: 35px;
border: 1px solid #ffffff2c;
border-radius: 6px;
background-color: #1d1d1d;
backdrop-filter: blur(10px) !important;
}
.close:hover,
.close:focus {
/* color: #bbb; */
text-decoration: none;
/* cursor: pointer; */
color: var(--txtcol);
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
img {
/* user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
pointer-events: none; */
/* This prevents interactions, such as right-clicking */
}
/* Your scrollbar styles here */
#contextMenu {
display: none;
position: fixed;
border-radius: 26px;
background-color: #161615;
z-index: 9999999999;
white-space: nowrap;
height: max-content;
}
#contextMenu ul {
list-style: none;
padding: 0;
/* background: #161615; */
margin: 0;
display: flex;
}
#contextMenu ul li {
margin-right: 1px;
/* Adjust the spacing between menu items */
}
#contextMenu ul li button {
background: #161615;
border-radius: 26px;
width: 1;
;
/* border:3px dashed #fff; */
transition: all 1s ease;
letter-spacing: auto;
}
#contextMenu ul li button:hover {
/* border: none; */
width: 1%;
letter-spacing: auto;
color: yellow;
transform: translateX(0);
/* content: attr('btnhover'); */
}
.yellow-bar {
background-color: #1f1f1e0f;
border-radius: 6px;
color: var(--txtcol);
font-family: kbd;
text-transform: uppercase;
width: max-content;
max-width: 80vw;
overflow-x: scroll;
height: max-content;
margin-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
text-align: center;
transform: translateY(-10%);
/* border: #00000021 solid 1px; */
border: 1.5px solid #ffffff28;
/* box-shadow: 0 0 80px var(--accent-col); */
/* Set your desired maximum height *
}
.yellow-bar {
display: flex;
align-items: center;
/* position: sticky; */
transition: opacity 1.5s ease-in-out;
/* font-size: 4vw; */
/* opacity: 0; */
}
.yellow-bar.absolute {
position: absolute;
left: 50%;
/* transform: translateX(-50%); */
/* opacity: 0; */
}
.yellow-bar::after {
content: '\007c Scrollable Content';
/* background-color: var(--accent-col); */
border-radius: 16px 16px;
color: var(--txtcol);
font-family: kbd;
white-space: nowrap;
text-transform: uppercase;
/* font-size: 2vw; */
margin-left: 10px;
/* Adjust this value based on your preference */
}
.yellow-bar.show {
opacity: 1;
}
pre {
background-color: #1f1f1e0f;
background: none !important;
border-radius: 6px;
border: 1.5px solid #ffffff28;
/* box-shadow:0 0 80px var(--accent-col); */
/* white-space: nowrap; Use pre-wrap to preserve white spaces and allow wrapping */
overflow: auto;
width: calc(fit-content - 12px);
/* white-space: pre-wrap; */
max-width: 83vw;
max-height: 75vh;
font-family: kbd !important;
}
/* Hide the scrollbar in WebKit browsers */
pre code {
font-family: kbd;
max-width: 83vw;
font-size: small;
padding: 2px;
background: #00000021 !important;
color: var(--txtcol) !important;
overflow: hidden;
border-radius: 6px !important;
/* box-shadow: 0 0 9px var(--accent-col); */
}
.ext-btn {
background-color: transparent;
border-width: 2px;
border-color: var(--accent-col);
border-style: solid;
text-align: center;
border-style: solid;
text-align: center;
font-size: large;
border-radius: 16px;
border-width: 2px;
border-color: var(--accent-col);
color: var(--txtcol);
backdrop-filter: blur(10px);
}
.ext-btn:hover {
/* background-color: var(--accent-col); */
border: 2px solid var(--accent-col);
color: var(--txtcol);
/* box-shadow: #000 0 12px 20px; */
width: calc(33.333333%+10px);
}
.disclaimer {
background-color: #ffffff17;
backdrop-filter: blur(40px);
border: 1px solid #ffffff34;
padding: 2px;
border-radius: 0 0 6px 6px;
/* animation: dashv2 0.5s ease-in-out infinite alternate; */
color: var(--txtcolinv);
/* box-shadow: 0 0 3900px 100px var(--accent-col); */
}
.yellow-a {
font-family: kbd;
text-decoration: none;
color: var(--txtcol);
/* filter: invert(1); */
/* background-color: var(--accent-col); */
background: #ffffff17;
border: 1px solid #ffffff34;
border-radius: 6px;
padding: 3px;
margin: 3px;
backdrop-filter: blur(10px) saturate(150%) ;
transition: all 0.5s ease-in-out;
white-space: nowrap;
}
.yellow-a:hover::after {
content: ' \2192';
padding: 2px;
z-index: 10;
transition: all 0.5s ease;
}
.yellow-a::after {
content: ' \2197';
transition: all 0.5s ease-in-out;
padding: 2px;
}
.hljs {
border-radius: 0 0 6px 6px;
overflow: hidden;
/* Use 'auto' to enable scrollbars when needed */
}
.hljs::-webkit-scrollbar,
pre::-webkit-scrollbar,
pre code::-webkit-scrollbar {
width: 12px;
border-radius: 0 6px 6px 0;
}
h1 {
font-size: clamp(20px, 5vw, 90px);
line-height: 10vh;
}
.title {
border-radius: 6px 6px 0 0;
background-color: #ffffff34;
line-height: normal;
color: var(--txtcol);
}
/* Add your styles here */
/* Define the keyframes for hiding and showing the scrollbar */
@keyframes hideScrollbar {
to {
opacity: 0;
}
}
@keyframes showScrollbar {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Apply the animation to the scrollbar */
/* Apply the animation to the webkit scrollbar */
::-webkit-scrollbar {
width: 12px;
}
.sub {
font-family: kbd;
font-size: small;
text-decoration: none;
display: none;
}
.github-card,
.repo-card {
overflow: auto;
}
* img::after {
content: "f";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
/* Adjust the height of the bar as needed */
background-color: #3498db;
/* Adjust the background color of the bar */
display: block;
}
.green-text {
color: var(--accent-col);
/* Green color */
text-shadow: var(--accent-col) 0 0 65px;
font-family: araboto;
}
.sticky-text {
display: flex;
flex-direction: column;
align-items: center;
/* Center horizontally */
justify-content: space-between;
/* Equal vertical spacing */
height: fit-content;
min-height: 200vh;
/* Set container height to window height */
}
.sticky {
position: sticky;
top: 50%;
opacity: 1;
transition: all 0.5s ease-in-out;
}
.top {
position: fixed;
top: 0;
}
.opaque {
opacity: 1;
}
.word {
opacity: 0;
transition: opacity 0.2s ease-in-out;
/* padding: 20px; */
z-index: 1;
}
.heart {
transition: all 0.5s ease-in-out;
}
.heart:hover {
color: rgb(255, 124, 124);
size: 100px;
transition: all 0.5s ease-in-out;
}
.card {
/* border: 1px solid #2C2C2E; */
/* border-radius: 16px; */
background-color: #ffffff09;
/* backdrop-filter: blur(10px) saturate(150%); */
padding: 10px;
width: fit-content;
height: fit-content;
}
.perma {
/* z-index: 100; */
}
.hover-gold:hover {
background-color: var(--accent-col);
transition: all 0.5s ease-in-out;
}
.tooltip {
position: relative;
/* Other styling properties */
}
.tooltip-text {
position: fixed;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 4px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
z-index: 100;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.image-wrapper:hover {
background-color: #00000000;
z-index: 1000;
transition: all 0.5s ease-in-out;
}
bigassh1 {
font-size: clamp(20px, 15vw, 90px);
line-height: 10vh;
text-transform: capitalize;
font-weight: 1000;
}
.left-align {
align-items: flex-start;
/* Updated property for left alignment */
text-align: left;
/* Updated property or left alignment */
padding: 10px;
width: 85vw;
height: fit-content;
padding: 10px;
;
width: 85vw;
}
.box {
transition: opacity 0.2s ease;
}
.cont:hover> :not(:hover) {
opacity: 0.1;
}
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.container-extend {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: 200vh;
}
.extend {
display: flex;
justify-content: center;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0;
transform: scale(0.5);
}
.extend a {
display: inline-block;
margin: 0 1rem;
/* Spacing between elements */
white-space: nowrap;
}
.many-items {
/* overflow: hidden; */
min-height: fit-content;
min-width: fit-content;
background: #ffffff02;
border-radius: 16px;
padding: 10px;
backdrop-filter: blur(100px);
transform: none;
/* box-shadow: 0 0 40px var(--uielem-col); */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid #2C2C2E;
transition: transform 0.5s ease-in-out;
z-index: 1000;
}
.many-items>* {
padding: 5px;
color: var(--txtcol);
}
.many-items:hover {
/* transform:translate(0px, 10px); */
transition: transform 0.5s ease-in-out;
}
.shape-shift {
--shape-color: rgba(128, 128, 128, 0.259);
background-color: #ffffff00;
backdrop-filter: blur(100%);
background-image: none;
color: var(--txtcol);
height: fit-content;
min-height: 50px;
min-width: 50px;
border-radius: 50px;
width: fit-content;
border: #2C2C2E 2px solid;
box-shadow: none;
transition: all 0.5s ease-in-out;
/* color: var(--txtcol); */
}
.many-items .shape-shift {
width: 50px;
height: 50px;
transition: all 0.5s ease-in-out;
/* color: var(--txtcol); */
}
.shape-shift:hover {
/* --shape-color: rgba(128, 128, 128, 0.259); */
/* box-shadow: 0 0 24px rgba(255, 255, 255, 0.41); */
background-color: var(--shape-color);
color: var(--txtcol);
border-radius: 12px;
transition: all 0.5s ease-in-out;
}
.shape-shift[col] {
--shape-color: attr(col);
background-color: var(--shape-color);
}
.hidden {
display: none;
}
.sticky {
z-index: 10;
}
.honeycomb {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.honeycomb>* {
padding: 5px;
}
.cursive {
font-family: cursve;
}
.colormode {
background-image: none;
color: var(--txtcol);
background-color: rgba(0, 132, 220, 0);
/* Adjust the last value (0.7) for opacity */
transition: all 0.5s ease-in-out;
/* background-color: var(--transitioncol); */
/* opacity: 50%; */
}
.colormode:hover {
/* opacity: 100%; */
/* color: var(--modebuttoncol); */
text-shadow: 0 0 10px #0000004c;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
html {
scroll-behavior: smooth;
}
body {
scroll-snap-type: y proximity;
/* 'proximity' gives a softer snap effect */
}
a,
button,
input[type="button"],
input[type="submit"],
.clickable {
scroll-snap-align: start;
/* Align the start of the element with the start of the viewport */
}
footer {
/* box-shadow: 0 5px 10px 10px #00000029; */
/* border: #8888883c solid 1px; */
background: var(--uielem-col) !important;
/* background: #ffffff00; */
/* backdrop-filter: blur(100px); */
transition: box-shadow 0.5s ease-in-out, background 0.5s ease-in-out;
padding: 10px;
}
.ghost-poof {
filter: drop-shadow(0 0 70px var(--accent-col));
transition: box-shadow 0.5s ease-in-out, background-color 0.5s ease-in-out;
background-color: var(--accent-col);
border: none;
position: sticky;
}
.ghost-poof::before {
content: var(--time-emoji);
font: 1.2em;
color: var(--txtcolinv);
font-weight: bolder;
}
.many-items button:hover {
/* background-color: var(--accent-col); */
transition: background-color 0.5s ease-in-out;
}
.box .ext-btn {
background-color: transparent;
}
.scroll-label-main {
background: var(--bg-col);
backdrop-filter: blur(20px);
border: 1px solid var(--accent-col);
color: var(--txtcol);
transform: translateX(-50vw) translateY(4vh);
padding: 6px;
border-radius: 6px;
position: absolute;
white-space: nowrap;
align-items: center;
display: flex;
opacity: 0;
justify-content: center;
}
.scroll-label {
align-items: center;
display: flex;
justify-content: center;
}
.icdown {
/* font-size: medium; */
text-align: center;
}
.namedrop {
background-color: #0000004c;
background: #0000004c;
backdrop-filter: blur(120px);
transform: translateX(0%) translateY(0);
transition: transform 0.3s ease-in-out;
}
.namedrop:hover {
/* background-color: var(--accent-col); */
transform: translateX(0%) translateY(0) scale(1.1);
transition: transform 0.3s ease-in-out;
}
.namedrop:hover::after {
/* background-color: var(--accent-col); */
content: attr(name);
position: absolute;
bottom: -1.2em;
left: 50%;
transform: translateX(-50%) translateY(50%);
transition: transform 0.3s ease-in-out;
white-space: nowrap;
border-radius: 6px;
padding: 4px;
background-color: #0000004c;
background: #0000004c;
backdrop-filter: blur(120px);
border: 1px solid var(--accent-col);
}
button {
border-radius: 16px;
}
.cont li {
padding: 4px;
;
}
/* Hide scrollbars */
::-webkit-scrollbar {
width: 0px;
background: transparent;
/* Optional: just in case there's a padding/margin */
}
/* For Firefox */
html {
scrollbar-width: none;
/* Hide scrollbar on Firefox */
-ms-overflow-style: none;
/* Hide scrollbar on IE/Edge */
}
/* Show scrollbars when hovering */
body:hover,
body:active,
body:focus {
overflow: auto;
}
/* Hide default scrollbar */
body::-webkit-scrollbar {
display: none;
}
*::-webkit-scrollbar {
display: none;
}
/* Custom scrollbar styles */
.custom-scrollbar {
position: fixed;
right: 4px;
top: 0;
width: 6px;
height: 100%;
background-color: transparent;
border-radius: 10px;
opacity: 0;
transition: opacity 0.3s, width 0.3s;
overflow: visible;
/* Allow overflow */
z-index: 100;
}
.custom-scrollbar:hover {
width: 10px;
transition: opacity 0.3s, width 0.3s;
}
.custom-thumb {
position: absolute;
width: 95%;
background-color: var(--accent-col);
/* Accent color */
border-radius: 16px;
/* cursor: pointer; */
transition: box-shadow 0.3s ease-in-out;
}
.noselect {
-webkit-user-select: none;
/* Chrome/Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
user-select: none;
/* Standard */
}
.custom-thumb:hover,
.custom-thumb:active,
.custom-thumb:focus {
background-color: var(--accent-col);
/* Accent color */
box-shadow: 0 0 20px var(--accent-col);
transition: box-shadow 0.3s ease-in-out;
}
.scrollable::-webkit-scrollbar {
display: none;
}
.scrollable {
position: relative;
}
img {
transition: box-shadow 0.5s ease-in-out;
}
img:hover {
box-shadow: none;
}
/*// Glow Border Animation //*/
/* .animated-border-box */
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
/* background-position: 50% 50%; Starting at the top-left */
}
25% {
transform: translate(-50%, -50%) rotate(90deg);
/* background-position: calc(100% - 50%) 50%; Top-right */
}
50% {
transform: translate(-50%, -50%) rotate(180deg);
/* background-position: calc(100% - 50%) calc(100% - 50%); Bottom-right */
}
75% {
transform: translate(-50%, -50%) rotate(270deg);
/* background-position: 50% calc(100% - 50%); Bottom-left */
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
/* background-position: 50%; Back to top-left */
}
}
/*// Border Animation END//*/
.center-box {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
/* position: absolute; */
align-items: center;
justify-content: center;
align-content: center;
justify-items: center;
width: 100% !important;
/* background: var(--alphacol); */
color: var(--alphacol);
/* text-shadow: var(--alphacol) 0 0 10px; */
background: var(--uielem-col);
transition: background 0.5s ease-in-out;
border-radius: 16px;
visibility: hidden;
}
.box-link {
width: 100%;
}
.center-box:hover {
background: var(--alphacol);
transition: background 0.5s ease-in-out;
box-shadow: var(--alphacol) 0 0 20px;
}
.animated-border-box {
color: var(--txtcol);
visibility: visible;
border-radius: 16px;
margin: 5px;
background: var(--alphacol) !important;
/* width: 98%; */
text-shadow: var(--alphacol) 0 0 60px;
padding: 10px;
overflow: hidden;
/* height: 100% !important; */
width: 100% !important;
}
/* .animated-border-box:hover::before {
animation-play-state: paused;
transition: animation 0.5s ease-in-out;
background: #ffffff3d;
} */
.animated-border-box,
.animated-border-box {
/* padding: 40px; */
/* width: calc(100%); */
/* height: calc(100%) !important; */
/* width: 100%; */
/* height: 99px; */
color: var(--txtcol) !important;
text-transform: capitalize;
display: flex;
flex-direction: column;
justify-content: center;
/* text-align: center , center; */
/* text- */
}
.box-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
width: 95%;
}
.animated-border-box h1 {
font-size: calc(1.5vw + 1.5vh);
white-space: wrap;
text-orientation: sideways-right;
text-justify: newspaper;
/* animation: slideText 3s linear infinite; */
font-family: bold;
}
@keyframes slideText {
0% {
transform: translateX(150%);
/* width: 100%; */
}
100% {
/* width: calc(100% + 5px); */
transform: translateX(-150%);
}
}
.post-right_body {
background: #1f1f1e33;
backdrop-filter: blur(10px);
/* background-color: var(--alphacol); */
border-radius: 16px;
width: fit-content;
max-width: 90vw;
overflow: wrap;
width: 65vw;
max-width: 90vw;
justify-items: center;
justify-content: center;
display: flex;
align-items: center;
align-content: center;
text-align: center;
text-shadow: none;
/* box-shadow: 0 0 400px var(--accent-col); */
transform: scale(1.02);
color: var(--txtcol);
border-radius: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-items: center;
padding: 10px;
text-align: center;
align-content: center;
max-height: 75vh;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
/* padding: none; */
}
.post-right {
background-color: var(--bg-col);
/* border: 5px solid var(--accent-col); */
}
#section-list {
list-style: none;
position: absolute;
top: 87px;
left: 0;
right: 0;
z-index: 9999;
text-align: justify;
background: #00000017;
backdrop-filter: blur(50px);
width: 72vw;
max-width: 424px;
padding: 8px;
border-radius: 12px;
max-height: 215px;
overflow: scroll;
margin: auto;
box-shadow: 0 0 20px #00000042;
/* display: none; */
font-size: large;
border: 1px solid #ffffff20;
/* border: 0.2px var(--accent-col) solid; */
color: var(--txtcol);
padding: 14px;
/* animation: bounceclose 1s ; */
/* display: none; */
transform-origin: top center;
transition: all 0.5s ease;
transition: scale(0);
opacity: 0;
}
.section-drop {
transform: translateX(-50%);
}
#section-list.close {
display: none;
animation: bounceopen 1s;
}
#section-list.open {
display: block;
animation: bounceopen 1s;
}
#section-list li a :hover {
color: var(--txtcol);
}
#section-list li {
color: var(--accent-col);
font-size: larger;
text-transform: capitalize;
width: 100%;
border: 1px red;
transition: color 0.4s ease;
line-height: 1.2;
/* animation: dropin 1s ease; */
}
#section-list li a {
font-family: bold;
width: 100%;
display: flex;
}
#section-list li ::before {
content: ' ';
}
#section-list li:hover {
/* width: 175px; */
color: var(--txtcol);
transition: color 0.4s ease;
/* a{font-family: bold;} */
}
.icdown {
color: var(--txtcol);
transition: color 0.4s ease;
/* font-size: x-large; */
}
@keyframes bounceopen {
0% {
/* height: 0px; */
opacity: 0;
transform: scale(1, 0);
}
50% {
transform: scale(1, 1);
opacity: 1;
}
70% {
transform: scale(0.97, 1.02);
/* height: calc(1.02 * fit-content); */
}
80% {
transform: scale(1.02, 0.97);
/* height: calc(0.97 * fit-content); */
opacity: 1 !important;
}
100% {
transform: scale(1);
/* height: fit-content; */
}
}
@keyframes bounceopen_navbar {
0% {
transform: translateY(0px) scale(1, 0);
/* opacity: 0; */
}
100% {
transform: translateY(0px) scale(1);
}
}
@keyframes dropin {
0% {
transform: scale(1.07);
/* font-size: 23.54px; */
/* opacity: 0; */
}
55% {
transform: scale(1);
/* font-size: 22px; */
}
70% {
transform: scale(0.87);
/* font-size: 19.14px; */
}
80% {
/* transform: scale(0.87); */
transform: scale(1.07, 1.27);
/* font-size: 27.94px; */
/* font-size: 23.54px; */
}
100% {
transform: scale(1);
font-size: 22px;
}
}
.full-blur {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #ffff0000;
backdrop-filter: blur(50px);
z-index: 9999;
opacity: 0;
pointer-events: none;
/* Default: prevents interaction */
transition: opacity 0.5s ease-in-out;
}
.full-blur.isopen {
opacity: 1;
pointer-events: all;
/* Allows interaction when active */
/* scroll-behavior: unset; */
overflow: hidden;
transition: opacity 0.5s ease-in-out;
}
.full-blur.isopen::-webkit-scrollbar {
display: none;
}
.colormode:hover {
.colormodeicon {
/* transform: rotateZ(25deg); */
transition: transform 0.1s ease;
}
}
.colormodeicon.animate {
animation: 1s tilt;
/* transform: rotateZ(45deg); */
}
@keyframes tilt {
0% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(25deg);
}
50% {
transform: rotateZ(-35deg);
}
80% {
transform: rotateZ(15deg);
}
100% {
transform: rotateZ(0deg);
}
}
.closebtnicon.animate {
animation: 1s closebuttontilt;
}
@keyframes closebuttontilt {
0% {
transform: rotateX(0deg);
}
10% {
transform: rotateX(90deg);
}
}
.navig.animate {
animation: 1s expandnav ease;
width: 90vw;
transition: all 0.7s ease;
}
@keyframes expandnav {
0% {
transform: translateX(5%)translateY(10px);
}
50% {
/* height: 55px; */
width: 424px !important;
transform: translateX(5%)translateY(calc(-100% - 10px));
}
100% {
/* height: 55px; */
width: 90vw !important;
transform: translateX(5%)translateY(10px);
}
}
.icdown.animate {
animation: 1s shakeicon;
transform-origin: bottom center;
}
@keyframes shakeicon {
0% {
transform: rotateZ(0)
}
35% {
transform: rotateZ(0)
}
45% {
transform: rotateZ(-15deg);
}
55% {
transform: rotateZ(15deg);
}
65% {
transform: rotateZ(-15deg);
}
75% {
transform: rotateZ(15deg);
}
100% {
transform: rotateZ(0)
}
}
#section-list.animate {
animation: 1s bounceout;
}
@keyframes bounceout {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1, 1);
opacity: 1;
}
70% {
transform: scale(0.97, 1.02);
/* height: calc(1.02 * fit-content); */
}
80% {
transform: scale(1.02, 0.97);
/* height: calc(0.97 * fit-content); */
opacity: 1;
}
100% {
transform: scale(1, 0);
opacity: 0;
display: none;
/* height: fit-content; */
}
}
.percentage {
transition: transform 0.5s ease-in-out;
transform-origin: center center;
font-family: bold;
color: var(--txtcolinv);
}
.digit {
display: inline-block;
transition: transform 0.3s ease, opacity 0.3s ease;
position: absolute;
opacity: 0;
}
.digit.new {
opacity: 0;
transform: translateY(100%);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.digit.new.enter {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.digit.exit {
opacity: 0;
transform: translateY(-100%);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.link-preview {
width: 300px;
/* Adjust width */
height: 200px;
/* Adjust height */
border: 1px solid #ccc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s ease-in-out;
/* Smooth appearance animation */
z-index: 1000;
/* Ensure it appears above other content */
transform-origin: center center;
}
.section_list_icon.animate {
animation: 1s slidelr;
}
@keyframes slidelr {
0% {
transform: none;
}
35% {
transform: translateX(-4px);
}
45% {
transform: translateX(4px);
}
55% {
transform: none;
}
}
/* .navig */
.sectionicon {
width: 25px !important;
color: var(--txtcol) !important;
z-index: auto;
/* background-color: var(--txtcol) !important; */
transition: color 0.5s ease-in-out;
/* backdrop-filter:none; */
/* transform: scale(1); */
opacity: 1 !important;
display: block !important;
visibility: visible !important;
/* width: 0; */
transition: all 0.7s ease-in-out !important;
}
.padded {
padding: 0 10vw;
transition: padding 0.7s ease-in-out !important;
}
img {
/* filter: blur(10px); */
transition: filter 0.5s ease;
position: relative;
}
img.is-loaded {
filter: blur(0);
}
img::before {
content: "loading content";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--txtcolinv);
font-family: bold;
font-size: 1.5rem;
text-align: center;
opacity: 1;
transition: opacity 0.5s ease;
}
img.is-loaded::before {
opacity: 0;
transition: opacity 0.5s ease;
}
.tiny-line-divider {
width: calc(100%);
transform-origin: center center;
height: 3px;
background-color: var(--accent-col);
border-radius: 6px;
margin: 10px 0;
opacity: 0.5;
transition: opacity 0.5s ease;
padding: 0 10px;
}
.cardinfo {
font-size: 20px;
color: var(--txtcol);
opacity: 0.6;
/* padding: 10px; */
}
footer {
background: #ffffff14;
border: 1px solid #2C2C2E;
.ext-btn{
border: #2C2C2E 2px solid !important;
background-color: transparent !important;
backdrop-filter: none !important;
border-radius: 10px !important;
background: #ffffff0c !important;
}
}
.ext-btn{
border: #2C2C2E 2px solid !important;
background:none !important;
background-color: transparent !important;
}
* {
cursor: none; /* Hide real cursor */
}
/* Circular, borderless cursor with inverted backdrop (no 3D rotate/scale) */
/* Circular, borderless, invert + gooey effect */
/* Custom cursor: circular, borderless, invert backdrop, with plop animation on link hover */
#custom-cursor {
pointer-events: none;
position: fixed;
left: 0;
top: 0;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0);
mix-blend-mode: difference;
-webkit-backdrop-filter: invert(1) blur(0px) contrast(2) ;
backdrop-filter: invert(1) blur(0px) contrast(2) ;
border: none;
/* outline: dashed 0.3px white; */
outline-offset: 2px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
transform-origin: center center;
will-change: left, top, transform;
transition: background 0.12s ease, box-shadow 0.18s ease;
z-index: 10000000000000000;
display: flex;
align-items: center;
justify-content: center;
/* filter: url(#goo); if you're using the goo filter, otherwise remove */
box-shadow: none;
}
/* states */
#custom-cursor.shrink { opacity: 0.9; }
#custom-cursor.snapped { background: rgba(255,255,255,0.09); box-shadow: 0 0 18px rgba(0,0,0,0.08); }
/* link-hover: final hovered scale (persisted while pointer stays over target) */
#custom-cursor.plop {
animation: plop 420ms cubic-bezier(.2,1.1,.3,1) both;
}
/* Persistent hover scale while pointer remains over interactive target */
#custom-cursor.link-hover {
transform: translate(-50%,-50%) scale(1.08);
}
/* plop animation — overshoot -> undershoot -> settle (ends at the hovered final scale) */
@keyframes plop {
0% { transform: translate(-50%, -50%) scale(1); }
/* undershoot */
100% { transform: translate(-50%, -50%) scale(1.24); } /* final (matches .link-hover) */
}
@keyframes unplop {
0% { transform: translate(-50%, -50%) scale(1.24); }
/* undershoot */
100% { transform: translate(-50%, -50%) scale(1); } /* final (matches .link-hover) */
}
/* applying animation when class toggled; animation-fill-mode: both keeps final frame */
/* internal blobs */
.work-link{
text-decoration: underline;
margin: 8px;
font-size: 0.9em;;
color: orange;
}
.work-link:hover{
text-decoration: none;
background-color: orange;
color: black;
/* font-family: bold; */
}
/* Per-letter blocks created by splitToLetters */
.rv-letter {
display: inline-block;
background-color: black; /* black background for every letter */
color: inherit; /* keep text color from parent; set explicitly if needed */
padding: 0px; /* subtle padding so background is visible — adjust or remove */
line-height: 1; /* keep tight */
border-radius: 2px; /* tiny rounding if desired (optional) */
transition: opacity 120ms ease, color 120ms linear;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}