@import url('https://api.fonts.coollabs.io/css2?family=Modak&display=swap');
:root {
    --primary: #a55ab4;
    --secondary: #1e00324b;
    --terinary: #bf61bc;
    --bg: #080011;
    --text: #eeeeee;
    --footer: #61005d33;
    --border-col: #eeeeee33;
    --link-visited: #c363ff;
    --link: #c0f;
}
html,body {
    background-color: var(--bg);
    color: var(--text);
    position: fixed;
    left: 0px;
    right: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;

}
body {
    background-image: url(/imgs/tex.png);
    background-size: cover;
    display: flex;
    justify-content: center;
}
#main-cont {
    max-width: 65%;
    width: fit-content;
    margin: 0;
    line-height: 23pt;
}
@media (max-width: 1000px) {
    #main-cont {
        max-width: 75%;
    }
    #my-name, #links, #footer {
        text-align: left;
    }
}
@media (max-width: 800px) {
    #main-cont {
        max-width: 95%;
    }
    #my-name, #links, #footer {
        text-align: center;
    }
}
@media (max-width: 600px) {
    #main-cont {
        max-width: 98%;
    }
    #my-name, #links, #footer {
        text-align: center;
    }
    #my-name {
        line-height: 42pt;
    }
}
.font-display {
    font-family: "Modak", system-ui;
    font-weight: 400;
    font-style: normal;
}
#my-name {
    font-size: 60pt;
    color: var(--primary);
}
::selection {
    background: var(--primary);
    color: var(--text);
}
::selection a:link {
    color: var(--bg); /*idk why this dont work*/
}


/* bullshit that doesn't work */
/* #name-wrap {
    --_space: ;
  background-image: linear-gradient(
    225deg var(--_space),
    #f07 0%,
    #c0f 100%
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports (background-image: linear-gradient(in oklch, #000, #fff)) {
  #name-wrap {
    --_space: in oklch;
  }
} */


#main-desc {
    padding: 1em;
    width: fit-content;
    /* max-width: 85%; */
    background-color: var(--secondary);
    border-radius: 10px;
    text-align: left;
    font-size: 14pt;
    border: var(--border-col) 1px solid;
}
.font-sans {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-style: normal;
}
a {
    color: var(--link);
}
a:visited {
    color: var(--link-visited);
}
#links {
    padding-bottom: 30px;
}
#footer {
    width: 100%;
    position: static;
    bottom: 5px;
    left: 0px;
    font-size: 10pt;
}