@import url('https://fonts.googleapis.com/css?family=Share Tech Mono');
@import url('https://fonts.googleapis.com/css?family=Pixelify Sans');

* {
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
}
html, body {
    height: auto;
    width: auto;
    min-width: 1200px;
}
body {
    background-color: #000;
}

/* MAIN PAGE */
#intro-page {
    position: relative;
    display: flex;
    padding: 20px 70px;
    height: auto;
}
.right-top {
    position: absolute;
    line-height: 70px;
    margin-top: 30px;
    width: 580px;
    height: 230px;
    border-radius: 30px;
    background-color: #000000;

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}
.right-top::after, 
.right-top::before {
    content: "";
    position: absolute;
    width: 580px;
    height: 230px;
    border-radius: 30px;
    left: -1%;
    z-index: -1;
    padding: 4px 6px;
    background-image: conic-gradient(from var(--angle),#5b49ff, transparent 30%, #5b49ff);
    animation: 5s spin linear infinite;
}
.right-top::before, 
.bottom::before {
    filter:blur(1rem);
}
.right-top h1 {
    font-family: 'Share Tech Mono';
    font-size: 96px;
    color: #fff; 
}
.right-top h2 {
    font-family: 'Share Tech Mono';
    font-size: 48px;
    color: #fff; 
}
.bottom {
    position: absolute;
    top: 340px;
    width: 320px;
    height: 230px;

    border-radius: 30px;
    display: flex;
    flex-direction: column;
    padding-right: 35px;
    justify-content: center;
    background-color: #000000;
}
.bottom::after, 
.bottom::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 230px;
    padding: 4px 6px;
    left: -1.8%;
    border-radius: 30px;
    z-index: -1;
    background-image: conic-gradient(from var(--angle),#5b49ff, transparent 30%, #5b49ff);
    animation: 5s spin linear infinite;
}
.bottom p {
    font-family: 'Share Tech Mono';
    font-size: 36px;
    color: #fff; 
    text-align: right;
}
.video {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    overflow: hidden;
}
.video video {
    position: relative;
    object-fit: cover;
    left: calc(50% - 600px);
}
.table-of-contents {
    width: 400px;
    position: absolute;
    right: 0%;
    margin: 30px 70px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 23%;
}
.block {
    width: 100%;
    height: 90px;
    border-radius: 20px;
    background-color: #1a1a1a;
    display: flex;
    padding: 30px;
    align-items: center;
}

.block::after {
    background-color: #d8ff6e;
}
.block::after, .block::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 90px;
    left: -1.2%;
    padding: 4px 5px;
    border-radius: 20px;
    z-index: -1;
}
.block::before {
    filter: blur(2rem);
    opacity: 0;
    transition: opacity .3s ease-in-out;
    background-color: #d8ff6e;
 }
.block:hover::before {
    opacity: 1;
}
.block:hover {
    background-color: #daff07;
    transform: scale(1.1);
    h1 {
        color: #000000;
    }
}
.block:active {
    transform: scale(1);
}

.block h1 {
    font-family:'Share Tech Mono';
    color: #ffffff;
}

/* WORKS PAGE */
.back, .back2 {
    position: absolute;
    right: 5%;
    top: 2.5%;
    cursor: pointer;

    width: 130px;
    height: 40px;
    border-left: #3423ca solid 6px;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;

}
.back::after, .back2::after {
    content: '';
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -20%;
    background-color: #3423ca;
    z-index: -1;
    padding: 10px;
    filter: blur(1rem);
}
.back:hover::after, .back2:hover::after  {
    opacity: 1;
}
.back:active, .back2:active {
    background-color: #202020;
    transform: scale(0.8);
}
.back p, .back2 p {
    color: #fff;
    font-family: 'Share Tech Mono';
    font-size: 20px;
}

#content {
    position: relative;
    display: flex;
    height: 1600px;
}
.title {
    font-family: 'Share Tech Mono';
    font-size: 25px;
    color: #fff;
}
#box1, #box2, #box3 {
    position: absolute;
    width: 695px;
    height: 407px;
    background-color: #202020;

    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
#box1, #box3 {
    border-radius: 0px 30px 30px 0px;
}
#box2{ 
    right: 0%;
    border-radius: 30px 0px 0px 30px;
}
.sample {
    border: #ffffff solid 1px;
    width: 70%;
    height: 80%;
    display: flex;
    justify-content: center;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
#box1::after, #box1::before {
    content: "";
    position: absolute;
    width: 695px;
    height: 407px;
    top: -1.4%;
    padding: 5px;
    border-radius:0px 30px 30px 0px;
    background-image: conic-gradient(from var(--angle), #47ff9d, #8c0000, #47ff9d);
    z-index: -1;
    animation: 3s spin linear infinite;
}
#box1::before {
    filter: blur(0.8rem)
}

#box2::after, #box2::before {
    content: "";
    position: absolute;
    width: 695px;
    height: 407px;
    top: -1.4%;
    right: 0%;
    padding: 5px 3px;
    border-radius:30px 0px 0px 30px;
    background-image: conic-gradient(from var(--angle), #bfca23, #3423ca, #bfca23);
    z-index: -1;
    animation: 3s spin linear infinite;
}
#box2::before {
    filter: blur(0.8rem)
}


#box3::after, #box3::before {
    content: "";
    position: absolute;
    width: 695px;
    height: 407px;
    top: -1.4%;
    padding: 5px;
    border-radius: 0px 30px 30px 0px;
    background-image: conic-gradient(from var(--angle), #f13171, #d8ff6e, #f13171);
    z-index: -1;
    animation: 3s spin linear infinite;
}
#box3::before {
    filter: blur(0.8rem)
}

@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}
.first {
     margin-top: 100px;
     padding-right: 60px;
}
.second {
    margin-top: 600px;
    padding-left: 60px;
}
.third {
    margin-top: 1100px;
    padding-right: 60px;
}
.first, .second, .third {
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    height: 500px;
}
.slide-btn1, .slide-btn3 {
    top: calc(50% - 30px);
    left: 740px; 
}
.slide-btn1, .slide-btn3 {
    border-top: 30px solid ;
    border-bottom: 30px solid;
    border-right: 50px solid ;
    border-left: 50px solid transparent;
}
.slide-btn2 {
    position: absolute;
    top: calc(50% - 30px);
    right: 740px;
    border-top: 30px solid ;
    border-bottom: 30px solid;
    border-right: 50px solid transparent;
    border-left: 50px solid ;
}
.slide-btn1, 
.slide-btn3, 
.slide-btn2 {
    width: 0px;
    position: absolute;
    height: 0px;
    background-color: #505050;
    cursor: pointer;
}

.slide-btn1:active, 
.slide-btn2:active, 
.slide-btn3:active{
    opacity: 80%;
}
.slide-btn1.move, .slide-btn3.move {
    left: 1190px;
    border-top: 30px solid ;
    border-bottom: 30px solid;
    border-right: 50px solid transparent;
    border-left: 50px solid ;
}
.slide-btn2.move {
    left: 10%;
    border-top: 30px solid ;
    border-bottom: 30px solid;
    border-right: 50px solid ;
    border-left: 50px solid transparent;
}
#descrpt1, #descrpt2, #descrpt3 {
    width: 435px;
    height: 400px;
    border: #fff solid 2px;
    background-color: #000;
    border-radius: 30px;
    z-index: 1;

    padding: 40px;
}
#descrpt1, #descrpt3 {
    margin-left: 760px;
}
#descrpt2 {
    margin-left: 13%;
}

@media (max-width: 1400px) {
    #descrpt2 {
        margin-left: 7%;
    }
    .slide-btn2.move {
        z-index: 1;
        left: 5%;
    }
}
@media (max-width: 1350px) {
    .slide-btn1.move, .slide-btn3.move {
        left: 1070px;
        z-index: 2;
        background-color: #505050;
    }
    #descrpt2 {
        margin-left: 3%;
    }
    .slide-btn2.move {
        z-index: 2;
        top: 17%;
        left: 29%;
        border-top: 20px solid ;
        border-bottom: 20px solid;
        border-right: 40px solid ;
        border-left: 40px solid transparent;
    }
}
@media (max-width: 1260px) {
    .slide-btn1.move, .slide-btn3.move {
        left: 85%;
        z-index: 2;
        top: 15%;
        background-color: #505050;
        border-top: 20px solid ;
        border-bottom: 20px solid;
        border-right: 40px solid transparent ;
        border-left: 40px solid ;
    }
   
    #descrpt2 {
        margin-left: 0%;
        width: 400px;
    }
    .second { 
        padding-left: 35px;;
    }
}

#descrpt1 h1, p, #descrpt2 h1, p, #descrpt3 h1, p{
    color: #fff;
    font-family: 'Pixelify Sans';
}
#descrpt1 p, #descrpt2 p, #descrpt3 p{
    margin-top: 40px;
    font-size: 20px;
}
.wrap {
  max-width: 100px;        /* set your desired max width */
  word-wrap: break-word;   /* break long words/links */
  overflow-wrap: break-word; /* modern alternative */
  white-space: normal; 
}
.bg {
    position: relative;
    z-index: -2;
}
.one {
    position: absolute;
    right: 7%;
    top: 500px;

    width: 300px;
    height: 300px;
    border-radius: 150px;
    filter: blur(1rem);
    background-image: conic-gradient(from var(--angle), #bfca23, #3423ca,  #bfca23);
    animation: 3s spin linear infinite;
}
.two, .three {
    position: absolute;
    left: 7%;
    top: 10px;

    width: 300px;
    height: 300px;
    border-radius: 150px;
    filter: blur(1rem);
    background-image: conic-gradient(from var(--angle), #47ff9d, #8c0000,  #47ff9d);
    animation: 3s spin linear infinite;
}
.three {
    top: 1000px;
}

/*INFO*/
.back2 {
    border-left: #b854ff solid 6px ;
}
.back2::after {
    background-color: #b854ff;
}
.over {
    position: relative;
    z-index: 1;
}
#info {
    position: relative;
    display: flex;
    margin-top: 50px;
    height: auto;
}
.text {
    padding: 40px 90px;
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: #fff;
}
.hdr {
    width: 550px;
    height: 100px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}
.hdr::after, .hdr::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 100px;
    padding: 3px;
    border-radius: 30px;
    z-index: -1;
    background-image: conic-gradient(from var(--angle), #b854ff, transparent 70%, #b854ff);
    animation: 3s spin linear infinite;
}
.hdr::before {
    filter: blur(1rem);
}
.text h1, h2, p {
    font-family: 'Share Tech Mono';
}
.text h1 {
    font-size: 40px;
}
.text h2 {
    font-size: 30px;
}
.ps {
    margin-top: 30px;
    margin-left: 90px;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: 30px;
}
.text .ps p {
    font-size: 25px;
}
.scroll {
    position: absolute;
    left: 63%;
    top: 90px;
    width: 300px;
    height: 450px;
    background-color: #000000;
    border-radius: 30px;
}
.scroll::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #272068;
    z-index: -1;
    padding: 4px;
    left: -1.3%;
    top: -0.8%;
    filter: blur(1rem);
}
.threed {
    top: calc(50% - 125px);
    left: calc(50% - 125px);
    position: absolute;
}

/*CONTACT*/
#contact {
    position: absolute;
    background-color: #000;
    border: #fff solid 2px;
    width: 330px;
    height: 230px;
    border-radius: 30px;
    right: calc(50% - 165px);
    top: -75%;
    padding: 25px;
    line-height: 40px;
}
#contact h1 {
    font-family: 'Share Tech Mono';
    color: #fff;
    font-size: 25px;
}
#contact .x {
    position: absolute;
    right: 20px;
    top: 8px;
    cursor: pointer;
}
#contact .x p {
    font-family: 'Pixelify Sans';
    font-size: 30px;
}
a {
    color: #fff;
}
a:hover {
    color: #bfca23;
}
a:active {
    color: #ff54e2;
}