:root {
    --mouse-x: 50%;
    --mouse-y: 50%;
}
@font-face {
    font-family: "JetBrains Mono"; /* set name */
    src: url("files/Jetbrains Mono.woff2"); /* url of the font */
}
body {
    padding-left:10%;
    padding-right:10%;
    background: radial-gradient(
            circle at var(--mouse-x) var(--mouse-y),
            rgb(100, 0, 0) 0%,
            rgb(100,50,50) 50%,
            rgb(100, 0, 0) 200%
    );
    height:100em;
}
.content {
    background: rgba(70,30,30,0.8);
    padding-left:10%;
    padding-right:10%;
    margin-top:10%;
    padding-bottom:5%;
    border: rgb(80, 40, 40) 0.2em solid;
    border-radius: 1em;
    display:flex;
    flex-direction: column;
    font-family: "JetBrains Mono";
    color: rgb(255, 41, 41)
}
.content.secondary {
    padding-left: 5%;
    padding-right: 5%;
    margin-top: -3%;
    padding-bottom:1%;
}
.content.code {
    background: rgb(70,50,50);
    border-color: rgb(80,60,60);
    color: rgb(255, 187, 187);
    filter: blur(5px);
    overflow-wrap: anywhere;
    transition: 0.1s;
}
.content.code:hover {
    filter: blur(0px);
    transition: 0.2s;
}
.header {
    display:flex;
    flex-direction: column;
    align-items: center;
}
.pfp {
    background-image: url("files/Faceplate Round.png");
    background-size: cover;
    width:256px;
    height:256px;

}
.pfp:hover {
    background-size: cover;
    width:300px;
    height:300px;
    rotate:-1turn;
    transition:
        width 0.5s ease-in-out,
        height 0.5s ease-in-out,
        rotate 0.5s ease-out;
}
.right-box {
    margin-left:50%;
    width:min-content;
    text-wrap: pretty;
}
.left-box {
    width:min-content;
    text-wrap: pretty;
}

h1 {
    text-wrap: nowrap;
}
.one-line {
    text-wrap: nowrap;
}
.friend-button {
    width:88px;
    height:31px;
}