body
{
margin: 0;
padding: 0;
background: rgb(16, 16, 21);
font-family: 'Figtree', sans-serif;
overflow-x: hidden;
color: white;
-ms-overflow-style: none;
scrollbar-width: none;
font-weight: 300;
height: 100vh;
scroll-behavior: smooth
}

*
{
margin: 0;
padding: 0;
overflow-y: scroll;
scrollbar-width: none;
box-sizing: border-box;
-webkit-user-drag: none;
-ms-overflow-style: none
}

.qspace
{
height: 1.25vw
}

.epsace
{
width: .625vw;
height: .625vw;
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

br
{
width: 1px;
height: .625vw;
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

::-webkit-scrollbar
{
width: 0px;
display: none
}

.bigfontsize
{
font-size: 4vw;
background: linear-gradient(45deg, rgb(111, 103, 252) 25%, rgb(147, 147, 253) 75%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-weight: 500
}

.mediumfontsize
{
font-size: 3vw
}

.smallfontsize
{
font-size: 2vw
}

.evensmallerthanabitsmallerthansmallfontsize
{
font-size: 1.5vw
}

.bitsmallerthansmallfontsize
{
font-size: 1.75vw
}

.bitbiggerthansmallfontsize
{
font-size: 2.25vw
}

.whitetext
{
color: rgb(255, 255, 255)
}

.greytext
{
color: rgb(128, 128, 128)
}

::-moz-selection
{
color: white;
/*background: rgba(124, 134, 252, .7)*/
background: rgb(124, 134, 252)
}

::selection
{
color: white;
/*background: rgba(124, 134, 252, .7)*/
background: rgb(124, 134, 252)
}

a
{
color: rgb(109, 120, 252);
text-decoration: none
}

a:hover
{
color: rgb(51, 58, 125);
text-decoration: none
}

a:active
{
color: rgb(51, 53, 79);
text-decoration: none
}

.bgattach
{
background-attachment: fixed
}

.t1
{
display: grid;
width: 100vw;
height: 7.5vw;
background-attachment: fixed;
background-size: 10vw 10vw;
background-repeat: no-repeat;
align-content: center;
text-align: center;
font-size: 10vw;
font-weight: 600;
color: rgb(0, 0, 0);
font-family: 'Figtree', sans-serif;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.t1 > img
{
margin: auto;
width: 2vw;
height: 2vw;
filter: invert();
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

@keyframes a1
{
0%
{
bottom: 2.5vw;
opacity: 0
}
100%
{
bottom: 0vw;
opacity: 1
}
}

@keyframes a2
{
0%
{
top: 2vw;
opacity: 0
}
100%
{
top: 0vw;
opacity: 1
}
}

@keyframes a3
{
0%
{
right: 1.25vw;
opacity: 0
}
100%
{
right: 0vw;
opacity: 1
}
}

.c1
{
position: relative;
width: 300vw;
height: calc(100vh - 11.75vw);
left: 0vw;
transition: left .375s ease-in-out
}

@keyframes si1
{
0% {opacity: 1; transform: translateX(-50vw)}
100% {opacity: 0; transform: translateX(0)}
}

.p1
{
width: 97.5vw;
height: fit-content
}

.h1
{
opacity: 0;
transform: translateX(-50vw);
transition: all 1.375s ease
}

.h2
{
background: linear-gradient(90deg, rgb(43, 175, 255) 25%, rgb(100, 79, 255) 75%);
background-clip: text;
-webkit-background-clip: text;
font-size: 8vw;
opacity: 0;
height: 95vh;
transform: translateY(-10vh);
color: transparent;
font-weight: 500
}

.h3
{
background: linear-gradient(90deg, rgb(80, 100, 255) 25%, rgb(90, 159, 255) 75%);
background-clip: text;
-webkit-background-clip: text;
font-size: 8vw;
height: 95vh;
color: transparent;
opacity: 1;
transform: translateY(0vh);
font-weight: 500;
transition: opacity 1.75s ease, transform 1.375s ease, background 2s ease
}

.h4
{
color: rgb(25, 25, 25)
}

.s1
{
opacity: 1;
transform: translateX(0)
}

.p2
{
width: 47.5vw;
background: linear-gradient(90deg, rgb(43, 175, 255) 0%, rgb(100, 79, 255) 100%);
padding: 1.25vw;
border-radius: 1.25vw 1.25vw 1.25vw 1.25vw;
height: fit-content
}

.p2 > b1s
{
position: absolute;
right: 0vw
}

.b1s
{
display: table-cell;
position: relative;
width: 10vw;
height: 3vw;
font-size: 1.25vw;
border-radius: .5vw;
vertical-align: middle;
justify-content: center;
align-content: center;
text-align: center;
transition: all .25s;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.b1s::before
{
content: "";
position: absolute;
inset: 0;
border-radius: .5vw;
border: 1px solid transparent;
box-sizing: border-box;
background: linear-gradient(45deg, rgb(43, 175, 255) 0%, rgb(169, 151, 255) 100%) border-box;
mask: linear-gradient(rgb(255, 255, 255) 0 0) padding-box, linear-gradient(rgb(255, 255, 255) 0 0);
-webkit-mask: linear-gradient(rgb(255, 255, 255) 0 0) padding-box, linear-gradient(rgb(255, 255, 255) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: all .25s
}

.b1s:hover
{
display: table-cell;
position: relative;
vertical-align: middle;
justify-content: center;
align-content: center;
text-align: center;
box-sizing: border-box;
background: rgba(255, 255, 255, .1);
transition: all .25s;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.b1s:hover:before
{
content: "";
position: absolute;
inset: 0;
border-radius: .5vw;
border: 1px solid white;
box-sizing: border-box;
background: linear-gradient(45deg, rgba(43, 175, 255) 0%, rgba(169, 151, 255) 100%);
transition: all .25s;
mask: linear-gradient(rgb(255, 255, 255) 0 0) padding-box, linear-gradient(rgb(255, 255, 255) 0 0);
-webkit-mask: linear-gradient(rgb(255, 255, 255) 0 0) padding-box, linear-gradient(rgb(255, 255, 255) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

.b1s:active
{
display: table-cell;
position: relative;
vertical-align: middle;
justify-content: center;
align-content: center;
text-align: center;
background: rgba(0, 0, 0, .75);
transition: all .075s;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.tc1
{
position: relative;
display: flex;
width: 100vw;
height: fit-content;
font-size: 2.5vw;
vertical-align: middle;
justify-content: space-around;
transition: all .75s;
animation: a2 .75s forwards;
opacity: 0;
margin-top: -1vw;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.tc12
{
width: 100vw;
height: 1px;
margin-top: .5vw;
background-color: rgb(128, 128, 128)
}

.tc1 > span
{
display: flex;
width: 20vw;
height: 3.75vw;
justify-content: center;
align-items: center
}

.tc1 > span:hover
{
color: rgb(64, 64, 64)
}

.tc1 > span:active
{
color: rgb(32, 32, 32)
}

.c8
{
width: 100vw;
height: calc(100vh - 12.25vw);
padding: 2.5vw;
float: left
}

.c8 > p
{
margin-inline: 2.5vw
}

.t8
{
font-size: 1.625vw
}

.t16
{
display: block;
font-size: 2.75vw;
font-weight: 500;
color: rgb(255, 255, 255)
}

br
{
line-height: 2.5vw
}

.ipcontainer
{
display: grid;
margin-left: 10vw;
margin-top: 10vw;
width: 80vw;
height: 15vw;
place-items: center;
font-size: 5vw;
font-weight: 400;
border-radius: 1.25vw;
font-family: "DM Mono";
border: 1px solid grey
}

.italiclabel
{
font-size: 2vw;
color: grey;
font-weight: 100;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}