gobbler.css

:root {
	--light_text: #d9d9d9;
	--dark_text: #6e767d;
	--pure_white: #FFFFFF;
	--pure_black: #000000;
	--follow_dim: #d7dbdc;
	--follow_dimmer: #bfc2c3;
	--border: #2f3336;
	--bluish_grey: #536471;
	--off_black: #0f1419;
	--light_blue: rgb(29, 161, 242);
	--light_blue_hover: rgb(29, 161, 242, 0.12);
	--light_blue_click: rgb(29, 161, 242, 0.19);
	--light_green: rgb(23, 191, 99);
	--light_green_hover: rgb(23, 191, 99, 0.12);
	--light_green_click: rgb(23, 191, 99, 0.19);
	--light_red: rgb(224, 36, 94);
	--light_red_hover: rgb(224, 36, 94, 0.12);
	--light_red_click: rgb(224, 36, 94, 0.19);
}

html {
	scroll-behavior:smooth;
}

body {
	text-rendering: optimizeLegibility;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	max-width: 100%;
	min-height: 100vh;
	margin:0px;
	padding:0px;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: var(--pure_black);
	transition: 0.2s;
	-webkit-tap-highlight-color: transparent;
	transition: color ease-in-out .15s, background-color ease-in-out .15s;
}

a {
	text-decoration: none;
}

#page_container {
	max-width: 600px;
	padding-bottom:0px;
}

#bio_container {
	padding-left:16px;
	padding-right:16px;
	padding-top:12px;
	padding-bottom:0px;
	margin-bottom:0px;
	border-bottom: 1px solid var(--border);
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
	transition: 0.2s;
	margin-left: -1px;
	margin-right: -1px;
}

#follow_container {
	height:48px;
	position: relative;
}

#follow_button {
	float: right;
	font-size:15px;
	font-weight:700;
	text-align: center;
	line-height:34px;
	margin-bottom:12px;
	background-color: var(--pure_white);
	height:36px;
	width:80px;
	border-top-left-radius: 9999px;
	border-top-right-radius: 9999px;
	border-bottom-left-radius: 9999px;
	border-bottom-right-radius: 9999px;
	box-sizing: border-box;
	padding-left:16px;
	padding-right:16px;
	margin:0px;
	color: var(--pure_black);
	transition: background-color 0.2s, color 0.2s;
}

#display_name {
	font-size:20px;
	font-weight:800;
	color:var(--light_text);
	display:inline;
	float:left;
	margin-top:3px;
	transition: 0.2s;
}

#username {
	clear:left;
	font-size:15px;
	font-weight:400;
	line-height:20px;
	color: var(--dark_text);
	position:relative;
	top:-3px;
	margin-bottom:7px;
	transition: 0.2s;
}

#bio_text {
	color: var(--light_text);
	font-size:15px;
	font-weight:400;
	line-height:20px;
	margin-bottom:12px;
	transition: 0.2s;
}

.thin_text {
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: var(--dark_text);
	transition: 0.2s;
}

.thick_text {
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	color: var(--light_text);
	transition: 0.2s;
}

#verified_icon {
	width:20px;
	fill:var(--light_text);
	display:inline;
	float: left;
	margin-left:3px;
	margin-top:8px;
	transition: 0.2s;
}

#link_and_joined_container {
	margin-bottom:9px;
	min-height:20px;
	display:flex;
	flex-direction:row;
	font-size: 15px;
	font-weight: 400;
	flex-wrap: wrap;
}

#link_container {
	padding-right: 12px;
}

#link_icon {
	width:18.75px;
	fill:var(--dark_text);
	display:inline;
	float:left;
	transition: 0.2s;
}

#website_url {
	padding-left: 4px;
	color: var(--light_blue);
}

#website_url:hover {
	text-decoration: underline;
	text-decoration-color: var(--light_blue);
	cursor: pointer;
}

#joined_container {
	color: var(--dark_text);
	transition: 0.2s;
}

#calendar_icon {
	width:18.75px;
	fill: var(--dark_text);
	display: inline;
	float: left;
	padding-right: 4px;
	transition: 0.2s;
}

#follows_followed_by_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

#bio_flexors {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.centered {
	display: block;
  margin: 0 auto;
}

@media(any-hover: hover) and (any-pointer: fine) {
	#link_container:hover {
		text-decoration: underline;
		text-decoration-color: var(--light_blue);
		cursor: pointer;
	}
	#follow_button:hover {
		background-color: var(--follow_dim);
		transition: 0.2s;
		cursor: pointer;
	}
	.action_area.blue_hover, .action_area.red_hover *:hover {
		cursor: pointer;
	}

	/*blue*/
	.blue_hover:hover .action_icon_glow {
		background-color: var(--light_blue_hover);
		transition: 0.2s;
	}
	.blue_hover:hover .action_icon {
		fill: var(--light_blue);
		transition: 0.2s;
	}
	.blue_hover:hover .action_count {
		color: var(--light_blue);
		transition: 0.2s;
	}

	/*green*/
	/*mouse enter*/
	.green_hover:not(.no_hover):hover .action_icon_glow {
		background-color: var(--light_green_hover);
		transition: 0.2s;
		cursor: pointer;
	}
	.green_hover:not(.no_hover):hover .action_icon {
		fill: var(--light_green);
		transition: 0.2s;
		cursor: pointer;
	}
	.green_hover:not(.no_hover):hover .action_count {
		color: var(--light_green);
		transition: 0.2s;
		cursor: pointer;
	}
	/*after click fadeout*/
	.green_hover:hover .action_icon_glow {
		transition: 0.3s linear;
		cursor: default;
	}
	.green_hover:hover .action_icon {
		transition: 0.3s linear;
		cursor: default;
	}
	.green_hover:hover .action_count {
		transition: 0.3s linear;
		cursor: default;
	}

	/*red*/
	.red_hover:hover .action_icon_glow {
		background-color: var(--light_red_hover);
		transition: 0.2s;
	}
	.red_hover:hover .action_icon {
		fill: var(--light_red);
		transition: 0.2s;
	}
	.red_hover:hover .action_count {
		color: var(--light_red);
		transition: 0.2s;
	}
}

/*handle onclick highlight effects - should come out instantly*/

/*blue*/
.blue_hover:active .action_icon_glow {
	background-color: var(--light_blue_click);
	transition: 0s;
}
.blue_hover:active .action_icon {
	fill: var(--light_blue);
	transition: 0s;
}
.blue_hover:active .action_count {
	color: var(--light_blue);
	transition: 0s;
}
/*green*/
.green_hover:not(.no_hover):active .action_icon_glow {
	background-color: var(--light_green_click);
	transition: 0s;
}
.green_hover:not(.no_hover):active .action_icon {
	fill: var(--light_green);
	transition: 0s;
}
.green_hover:not(.no_hover):active .action_count {
	color: var(--light_green);
	transition: 0s;
}


/*red*/
.red_hover:active .action_icon_glow {
	background-color: var(--light_red_click);
	transition: 0s;
}
.red_hover:active .action_icon {
	fill: var(--light_red);
	transition: 0s;
}
.red_hover:active .action_count {
	color: var(--light_red);
	transition: 0s;
}
/*follow button*/
#follow_button:active {
	background-color: var(--follow_dimmer);
	transition: 0s;
}

#cover_photo {
	max-width: calc(100% + 2px);
	display:block;
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
	transition: 0.2s;
	margin-left: -1px;
	margin-right: -1px;
	box-sizing: border-box;
}

#profile_photo {
	border-radius:50%;
	border: 3px solid var(--pure_black);
	width: 22%;
	min-width:90px;
	position:absolute;
	left:0;
	bottom:0;
	transition: 0.2s;
}

.gobble {
	transition: 0.2s color, 0.2s border, 0.2s background-color, 0.8s ease-in-out transform;
	background-color: var(--pure_black);
	margin-top:-1px;
	border: 1px solid var(--border);
	padding-top:12px;
	padding-left:16px;
	display: flex;
	flex-direction: row;
	padding-right:16px;
	z-index: 0;
	position: relative;
	margin-left: -1px;
	margin-right: -1px;
}

.gobble_inner {
	display: flex;
	flex-direction: column;
	width:100%;
}

.gobble_inner_1 {
	display: flex;
	flex-direction: row;
	margin-bottom: 2px;
}

.gobble_inner_2 {
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: var(--light_text);
	transition: 0.2s;
	overflow-wrap: anywhere;
}

.gobble_inner_2 a {
	color: var(--light_blue);
}

.gobble_inner_2 a:hover {
	text-decoration: underline;
	text-decoration-color: var(--light_blue);
}

.hashtag {
	color: var(--light_blue);
}

.hashtag:hover {
	text-decoration: underline;
	text-decoration-color: var(--light_blue);
}

.gobble_inner_3 {
	margin-top:12px;
	position:relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 425px;
	padding-bottom:12px;
}

.return_to_top {
	transition: 0.8s ease-in-out transform;
}

.action_area {
	display: flex;
	flex-direction: row;
}

.action_icon {
	width:18.75px;
	fill:var(--dark_text);
	transition: 0.2s;
}

.action_icon_glow {
	height: 34.75px;
	width: 34.75px;
	margin:-8px;
	position:absolute;
	border-radius:50%;
	z-index:-1;
	transition: 0.2s;
}

.action_count {
	line-height: 18px;
	font-size: 13px;
	font-weight: 400;
	padding-left: 12px;
	padding-right: 12px;
	color: var(--dark_text);
	text-decoration: none;
	transition: 0.2s;
}

.lil_profile_photo {
	border-radius:50%;
	height: 48px;
	margin-right: 12px;
}

.lil_verified_icon {
	width:17px;
	height:17px;
	fill:var(--light_text);
	display:inline;
	float: left;
	margin-left:3px;
	margin-top:2.25px;
	margin-right:4px;
	transition: 0.2s;
}

.dot {
	padding-left: 4px;
	padding-right: 3px;
	font-weight: 600;
}

.ellipses {
	width:17px;
	height:17px;
	fill:var(--dark_text);
	margin-top:1.5px;
	margin-left:auto;
	transition: 0.2s;
}

@media (prefers-color-scheme: light) {
	:root {
		--follow_dim: #222c30;
		--follow_dimmer: #3f4347;
	}
	#verified_icon {
		fill: var(--light_blue);
		transition: 0.2s;
	}
	.lil_verified_icon {
		fill: var(--light_blue);
		transition: 0.2s;
	}
	#follow_button {
		background-color: var(--off_black);
		color: var(--pure_white);
		transition: background-color 0.2s, color 0.2s;
	}
	.gobble {
		transition: 0.2s color, 0.2s border, 0.2s background-color, 0.8s ease-in-out transform;
		background-color: var(--pure_white);
		border: 1px solid #e3e6e6;
	}
	@media(any-hover: hover) {
		.gobble:hover {
			background-color: #f7f7f7;
		}
	}
	#bio_container {
		border-bottom: 1px solid #e3e6e6;
		border-left: 1px solid #e3e6e6;
		border-right: 1px solid #e3e6e6;
		transition: 0.2s;
	}
	#cover_photo {
		border-left: 1px solid #e3e6e6;
		border-right: 1px solid #e3e6e6;
		transition: 0.2s;
	}
	body {
		background-color: var(--pure_white);
		transition: 0.2s;
	}
	#display_name {
		color: var(--off_black);
		transition: 0.2s;
	}
	#username {
		color: var(--bluish_grey);
		transition: 0.2s;
	}
	#bio_text {
		color: var(--off_black);
		transition: 0.2s;
	}
	.thin_text {
		color: var(--bluish_grey);
		transition: 0.2s;
	}
	.thick_text {
		color: var(--off_black);
		transition: 0.2s;
	}
	#link_icon {
		fill: var(--bluish_grey);
		transition: 0.2s;
	}
	#joined_container {
		color: var(--bluish_grey);
		transition: 0.2s;
	}
	#calendar_icon {
		fill: var(--bluish_grey);
		transition: 0.2s;
	}
	#profile_photo {
		border-color: var(--pure_white);
		transition: 0.2s;
	}
	.gobble_inner_2 {
		color: var(--off_black);
		transition: 0.2s;
	}
	.action_icon {
		color: var(--bluish_grey);
		transition: 0.2s;
	}
	.action_count {
		color: var(--bluish_grey);
		transition: 0.2s;
	}
	.ellipses {
		fill: var(bluish_grey);
		transition: 0.2s;
	}
}