/~angel code

/*
* ángel's profile CSS but with comments explaining everything (shocked emoji)

* last updated April 6th, 2024 3:36 PM EST

* also this is prone to change a lot so don't copy and paste UNLESS you're okay with just using the current code (and if you do credit me!! and remove all the comments I think they break everything)... I'm mostly just sharing the source so that people get an understanding of how to customize their profile ^_^

* to customize your profile you put CSS into the about by using <style> and </style> tags

* 07/30/24 obviously this is outdated but i'm gonna keep it for archiving purposes
*/

/* header font */
@font-face {
    font-family: 'Akira'; /* ok so just to get this out of the way using double quotes (") broke everything so I switched everything to single quotes (') */
    src: url('https://file.garden/ZRgh3nzfnhFDJvPp/Akira-Expanded-Demo.otf') format('opentype');
}

/* font for my name in the about */
@font-face {
    font-family: 'Xcelsion Italic';
    src: url('https://file.garden/ZRgh3nzfnhFDJvPp/xcelsionital.otf') format('opentype');
}

/* body font */
@font-face {
    font-family: 'Nexa';
    src: url('https://file.garden/ZRgh3nzfnhFDJvPp/Nexa-Heavy.ttf') format('truetype');
}

/* colors I reuse a lot */
:root {
    --blue1: hsla(218, 56%, 84%, 1); /* accent color 1 */
    --blue2: hsla(218, 55%, 64%, 1); /* accent color 2 */
    --m-color: hsla(0, 0%, 100%, 1); /* main color */
}

/* a way to declare variables! I saw on stack overflow that you can use this to animate radial gradients, unfortunately firefox android doesnt support this so... sorry firefox android users. Anyways I used this variable for the y-position of the background gradient */
@property --y {
    syntax: '<percentage>'; /* this means that it's a percentage */
    inherits: false; /* this variable cannot be inherited */
    initial-value: 0%; /* this is what it's value is */
}

html,
body {
    background: transparent; /* make sure background isnt covering up ::after element */
    color: hsla(0, 0%, 20%, 1) !important; /* main text color */
    line-height: 1.25 !important; /* make line spacing a little less than the default */
}

/* actual background color, I used a pseudo-element so that I could animate it */
body::after {
    content: '';
    display: block;
    min-height: 100dvh;
    width: 100vw;
    background-image: radial-gradient(75% 75% at center var(--y), var(--m-color) 10%, var(--blue1) 60% 100%); /* background gradient, 75% 75% is the size of the circle, "at center var(--y)" means that it's horizontally centered and it's y-position is determined by the --y variable */
    animation: bgmove 15s infinite linear; /* here is the animation */
    position: fixed; /* make sure it doesn't move when you scroll */
    top: 0;
    left: 0;
    z-index: -1; /* make sure its behind EVERYTHING */
}

/* background move animation */
@keyframes bgmove {
    /* change the value of --y for this animation */
    0% {
        --y: -50%;
    }
    50% {
        --y: 100%;
    }
    100% {
        --y: 150%;
    }
}

*:not(body, h2) { /* this selector selects everything that isnt the username basically */
    font-family: 'Nexa' !important; /* apply font to everything... that isn't a header */
    perspective: 1000px; /* this gives the rotating that I did on the main part a more 3D effect. Why did I apply it to everything? I didn't know what to apply it to because no inspect element */
}

/* the container for everything excluding the top bar */
main {
    padding: 0.5rem !important; /* I added the padding so that on mobile the entire thing wouldnt be touching the sides of the screen */
    width: auto !important; /* not entirely sure why i added this */
    max-width: 500px !important; /* set a MAX-WIDTH so that it isnt too big for the screen on mobile, and also because I wanted it to be smaller than the default */
    transform: rotateY(15deg); /* cool effect */
    margin-top: 1.5rem !important; /* I didn't like how close it was to touching the top bar */
}

/* username header */
h2.no-margin {
    font-family: 'Akira'; /* give header font */
    text-transform: capitalize; /* make first letter of header capitalized */
    margin-bottom: -0.5rem !important; /* make header closer to main box */
    font-size: 3rem !important; /* make header text size bigger */
    filter: drop-shadow(1px 1px 0 var(--blue2)) drop-shadow(1px 1px 0 var(--blue2)) drop-shadow(1px 1px 0 var(--blue2)) drop-shadow(1px 1px 0 var(--blue1)) drop-shadow(1px 1px 0 var(--blue1)) drop-shadow(1px 1px 0 var(--blue1)); /* cool drop shadow */
}

/* cloud emoji before my user */
h2.no-margin::before {
    content: '\2601'; /* hex code for cloud emoji */
    display: inline-block;
    height: 1em;
    width: 1em; /* using em so its relative to the size of the header text */
    margin-right: 0.75rem; /* make it further away from text */
    /* I am too lazy to find pixels. the styles below just make the cloud emoji pure white */
    color: transparent; /* i guess when you use background-clip: text; the color needs to be transparent */
    background: var(--m-color);
    background-clip: text;
}

/* horizontal rulers outside of main box | profile picture | text under nickname that shows user | table headers */
hr:not(.card *), .avatar, #user-real-name, thead {
    display: none !important; /* hide all of that */
}

/* divider that's inside of the main box */
.card hr {
    height: 4px !important; /* "width" of divider */
    border: none !important; /* instead of using border properties, I just made it a block so that i could make it a gradient */
    background: linear-gradient(to right, var(--m-color) 0%, var(--blue1) 25% 75%, var(--m-color) 100%);
}

/* main box */
.card:not(#description) { /* every card that is not the description (the about area) */
    --card-bg: var(--m-color); /* card background variable. its just white */
    background: var(--card-bg) !important;
    border-radius: 30px !important;
    box-shadow: 0 0 5px 0 var(--card-bg), 0 0 10px 0 var(--card-bg), 0 0 14px 0 var(--card-bg), 0 0 14px 0 var(--card-bg), 0 -15px 5px -10px var(--blue1); /* blurry box effect */
    padding: 0.9rem !important;
    margin: 0 0 1rem 0 !important; /* make it further away from the links at the bottom */
}

/* #description is the container for the about! I never thought I'd use ::first-line but here we are */
#description .flex-item::first-line {
    line-height: 0.8 !important; /* make the line height of ONLY the first line a little less since the font size for my name makes it taller than usual */
}

/* my name in the about!!! */
#description strong {
    font-family: 'Xcelsion Italic' !important;
    font-size: 1.5em;
    /* gradient text */
    color: transparent;
    background-image: linear-gradient(to right, var(--blue1), var(--blue2));
    background-clip: text;
}

/* the container for the 2 drop downs that show stats/info */
#stats-or-info {
    display: flex; /* put both of the dropdowns next to each other */
    flex-direction: row; /* make sure its left to right and not top to bottom */
}

/* the drop downs */
#stats-or-info details {
    width: 50%; /* make them both half of the width */
    box-shadow: 0 0 10px -5px lightgray; /* cool shadow */
    overflow: hidden;
    border-radius: 30px !important;
}

/* change border color of everything inside of the drop downs including the drop down menus themself */
#stats-or-info :is(details, details *) {
    border-color: var(--blue1);
}

/* make everything related to the dropdowns have a white background */
#description, #stats-or-info details, #stats-or-info details :is(summary, table, table td, table tr) {
    background: white !important;
}

/* animation for when you open the dropdown */
details[open] table {
    animation: grow 0.5s ease 1 forwards;
}

details table tr:last-child(2) {
    border-bottom: none;
}

/* "role: /MEMBER/" thing AND buttons (aside from the one that opens the menu in the top left corner). I wanted them to be styled the same way */
button:not([title='Menu']), .chip.badge {
    background: radial-gradient(100% 100% at top, hsla(218, 57%, 95%, 1) 40%, hsla(218, 60%, 80%, 1) 79%) !important; /* radial gradient to give a sort of shiny effect */
    box-shadow: inset 0 -1px 2px 0.5px var(--m-color); /* inset box shadow to add a highlight */
    border: 1.5px solid var(--blue2) !important;
    display: inline-block !important;
    padding: 0 0.75rem !important;
    border-radius: 10px !important;
}

/* give links, buttons, the member thing, and svgs all the same text color. the svg part is mostly just to target the settings icon. you know I always wondered why the property for text color is just "color" and not "font-color" or something */
a, button, .chip.badge, svg {
    color: var(--blue2);
}

/* give the stats/info container, about section, all paragraphs, and flex items paddings and margins of 0 */
#stats-or-info, #description, p, .flex-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* top bar */
.toolbar {
    background: linear-gradient(to right, var(--blue1), var(--m-color));
}

/* button that opens the menu */
button[title='Menu'] {
    border-style: hidden;
    border-right-style: solid;
}

/* change the border of the top bar */
.toolbar :is(.button, button) { /* so you might notice I added ".button" here too, that's because if you look at the top bar theres a border in between "Stellular" and "angel". SO I needed to use border properties to adjust both that and the border along the bottom of the entire top bar */
    border-color: hsla(218, 57%, 70%, 1) !important;
    border-width: 2px !important;
    transition: opacity 0.5s; /* this transition is really just for the buttons but I didnt want to add a whole other declaration */
}

/* hover effect for buttons in top bar */
:is(.button, button):hover {
    opacity: 50%; /* make them 50% transparent */
    /* these next styles were added because there's already a style implemented for when you hover the buttons which changes the background and border color, so here I reset them to be what I want */
    border-color: hsla(218, 57%, 70%, 1) !important;
    background: inherit !important;
}

/* the rest of this is just styling my own stuff that I added in the markdown */

/* container for iframe and text */
.about-container {
    gap: 0.5rem; /* make sure iframe and text arent touching */
}

/* make sure all flex items are half the width of container (since theres only 2 of them) */
.flex-item {
    display: block; /* just to be sure, since e#class# uses a <span> element which is not a block by default, meaning you can't add a set height and width */
    width: 50%;
}

/* youtube video frame */
iframe { /* iframes are weird */
    display: block; /* why aren't these blocks by default??? */
    height: 100%;
    border: 2.5px solid var(--blue1); /* WHY do they have default borders???? anyways this is my custom border */
    border-radius: 10px;
}

/* grow from top animation */
@keyframes grow {
    0% {
        transform: scale(0%);
        transform-origin: top center;
    }
    100% {
        transform: scale(100%);
        transform-origin: top center;
    }
}

/* responsiveness */
@media screen and (max-width: 600px) {
    main {
        width: 93vw !important; /* make the "main" (basically everything excluding the top bar) 90% of the screen width on small mobile devices */
    }
    #description .flex, #stats-or-info {
        flex-direction: column; /* on small mobile screens, make the iframe and the text stack on top of each other instead of be next to each other as well as the drop down menus */
    }
    .flex-item, #stats-or-info details {
        width: 100%; /* make flex items 100% the width of the container, since the flex container is a column on mobile */
    }
}