/* Catppuccin Mocha Theme */
:root {
    --ctp-base: #1E1E2E;
    --ctp-mantle: #181825;
    --ctp-crust: #11111B;
    --ctp-text: #CDD6F4;
    --ctp-subtext: #A6ADC8;
    --ctp-overlay: #9399B2;
    --ctp-surface0: #45475A;
    --ctp-surface1: #585B70;
    --ctp-surface2: #6C7086;
    --ctp-blue: #89B4FA;
    --ctp-lavender: #B4BEFE;
    --ctp-sapphire: #74C7EC;
    --ctp-green: #A6E3A1;
    --ctp-yellow: #F9E2AF;
    --ctp-peach: #FAB387;
    --ctp-maroon: #EBA0AC;
    --ctp-red: #F38BA8;
    --ctp-mauve: #CBA6F7;
    --ctp-pink: #F5C2E7;
    --ctp-flamingo: #F2CDCD;
    --ctp-rosewater: #F5E0DC;
  }
  @font-face {font-family: custom; src: url(/assets/font/pokemon.ttf)}


body {
	display: flex;
	justify-content: center;
	color: var(--ctp-text);
    font-family: custom;
	background: radial-gradient(transparent 90%, #0000ff10) var(--ctp-base);
	height: 100vh;
	padding: 6em;
	box-sizing: border-box;

}

header {
	display: flex;
	justify-content: space-between;
	font-size: 0.875em;

	margin-bottom: -2em;
}

h2 {
	font-size: 0.8em;
}

main {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 400px;
	padding: 2em 4em;
	overflow: hidden auto;
	position: relative;
}

#portrait {
    flex: 1;
    display: flex;
    min-height: 50%;
    max-height: 50%;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url(https://i.idol.st/u/background/1v8tZtBackground-aQ7ocz.png);
    background-size: cover; /* Resize the background image to cover the entire container */
    background-position: center; /* Center the image */
    z-index: 10;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

#name {
    position: absolute;
    bottom: -14px; /* Distance from the bottom */
    left: 2px;   /* Distance from the left */
    color: var(--ctp-lavender); /* Text color */
    background: var(--ctp-base); /* Semi-transparent background */
    padding: 5px 10px;
    font-size: 1em;
    border-radius: 5% 5% 0% 0%;
}

#portrait img {
    width: 70%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%; /* Moves image upwards, keeping more of the head */

}

#content {
    position: relative;
    flex: 1; /* Takes the remaining 50% */
    overflow: auto; /* Enables scrolling within this section */
    padding: 1em;
    scrollbar-width: thin;
    scrollbar-color: var(--ctp-lavender) var(--ctp-base);
    overflow-x: hidden;
    margin: 0;
}


.physics{
	color: var(--ctp-pink);
}
.lav{
	color: var(--ctp-lavender);
}

.comment {
  color: var(--ctp-subtext);
  font-size: 10px;
}

p {
    font-size: 10px;
}