@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bentham&display=swap');

body{
    font-family: 'JetBrains Mono', monospace;
    background: linear-gradient(340deg,rgb(12, 14, 17) 0%, rgb(24, 27, 33) 100%);
    background-attachment: fixed;

    font-size: 2.5vw;
    color: rgb(219, 227, 227);
    overflow-x: hidden;
    overflow-y: hidden;
}

.page-border-wrap {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  overflow:scroll;
  border-image: linear-gradient(90deg, rgb(120, 16, 175) 0%, rgb(106, 36, 236) 100%) 1%;
  border-width: 0.4vw;
  border-style: solid;
  overflow-x: hidden;
  scrollbar-width: none;
}

body::selection{
    background-color:blueviolet;
    color: rgb(221, 219, 224);
}

.typed-cursor {
    background: linear-gradient(180deg,rgb(145, 58, 226) 0%, rgb(84, 37, 225) 70%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgb(106,36,236); 
}

h1{
    background: linear-gradient(90deg,rgb(120, 16, 175) 0%, rgb(106, 36, 236) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgb(106,36,236); 
    font-size: 13vw;
    margin-bottom: 0.5vw;
}

.container-normal-text{
    color: rgb(221, 219, 224);
    font-size: 3.5vw;
    position: relative;
    left: 1vw;
    font-weight: 700;
}

.container-normal-text p{
    font-size: 2.5vw;
    font-weight: 700;
    margin-top: 5vw;
    margin-bottom: -3vw;
    box-shadow: -5px 5px 0px rgb(48, 5, 134);
}

.container-normal-text a:link {
    background: linear-gradient(90deg, rgb(120,16,175) 0%, rgb(106,36,236) 50%, rgb(120,16,175) 100%);
    background-size: 200% auto;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.5s;
    font-weight: 850;
    text-decoration: none;

}

.container-normal-text a:hover{
    background-position: 100% 50%;
}

hr.rounded {
  border-top: 0.5vw solid #7b00ff;
  border-radius: 5px;
}

.container{
    align-items: left;
    line-height: 1;
    font-weight: 900;
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translate(-40%, -30%);

}

.container2{
    align-items: right;
    text-align: right;
    display:block;
    line-height: 1;
    font-weight: 900;
    position: absolute;
    top: 85%;
    left: 85%;
    transform: translate(-80%, -80%);
    width: 50%;
}

.container2 p{
    background: linear-gradient(90deg,rgb(162, 111, 234) 0%, rgb(110, 43, 244) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgb(106,36,236); 
    font-weight: 600;
    font-size: 2vw;
    border: 0.1vw solid rgb(110, 43, 244);
    padding: 1vw;
    display: inline-block;
    margin-bottom: 0vw;
    box-shadow: 8px 8px 0px rgb(48, 5, 134);
}

.container2 p i{
    font-size: 1.5vw;
    font-weight: 500;
    background: linear-gradient(90deg,rgb(73, 69, 133) 0%, rgb(67, 29, 143) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgb(106,36,236); 
}

.container3 a {
    margin-top: 70vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.container3 a {
    font-weight: 800;
    background: linear-gradient(60deg, rgb(156, 107, 236) 0%, rgb(119, 70, 210) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 850px){
    .container{
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        text-align: center;
    }
    h1{
        font-size: 25vw;
        margin-bottom: 1vw;
    }

    hr.rounded {
        border-top: 1vw solid #7b00ff;
        border-radius: 5px;
        margin-bottom: 6vw;
    }

    .container-normal-text span{
        font-size: 6vw;
        position: relative;
        left: 0vw;
    }

    .container2{
        top: 76%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
    }

    .container2 p{
        font-size: 4vw; 
        text-align: center;
    }

    .container2 p i{
        font-size: 3vw;
        width: 100%;
    }

    .container-normal-text p{
        font-size: 5vw;
        padding-top: 3vw;
    }

    .container3{
        font-size: 5vw;
    }
}