/*
#fdf781 // pale yellow
#f5c749 // yellow
#ee8732 // orange
#0c0f1e // bluck
#225288 // dark blue
#00a3ff // sky
#e0e8fc // cold
#a85039 // brown
---
#874af4 // twitch
#4998e9 // twitter
#d53528 // youtube
---
#d3c2bc // shading
*/

@font-face {
  font-family: Montserrat-Bold;
  src: url('/fonts/Montserrat-Bold.ttf?') format('truetype');
}

@font-face {
  font-family: JetBrains-Mono;
  src: url('/fonts/JetBrainsMono-Regular.woff2?') format('woff2');
}

:root {
    --pale-yellow:#fdf781; 
    --yellow:#f5c749; 
    --orange:#ee8732; 
    --bluck:#0c0f1e; 
    --dark-blue:#225288; 
    --sky:#00a3ff; 
    --cold:#e0e8fc; 
    --brown:#a85039;
    --grey-accent:WhiteSmoke;
    --grey:LightGrey;
    --dark-grey:DimGray;
    
    --twitch: #874af4;
    --twitter: #4998e9;
    --youtube: #d53528;
    
    --title-bar-accent:WhiteSmoke;
    --title-bar:LightGrey;
  
    --background-color:LightGrey;

    --header-color:#0c0f1e;
    --text-color:#0c0f1e;
    --link-color:#ee8732;
    --accent-color:#f5c749;
    --shadow-color:#225288;
    --taskbar-color:#e0e8fc;
    
    
    --widget-lined-header-accent:#00a3ff;
    --widget-lined-header:#225288;
    --widget-lined-background:WhiteSmoke;
    --widget-lined-border:LightGrey;
    
    --widget-info-background-accent:#fdf781;
    --widget-info-background:#f5c749;

	--folder-color:#f5c749;
	--folder-border-color:#fdf781;
}

body {
  background-color: white;  
  background-size: 20px 20px;
  background-image:
    linear-gradient(to right, var(--background-color), transparent 4px),
    linear-gradient(to bottom, var(--background-color), transparent 4px);
  margin: 0;
  padding: 0;
}

p, ul, li {
  font-family: 'JetBrains-Mono';
  color: var(--header-color);
}

h1, h2, h3, h4, h5 {
  font-family: 'Montserrat-Bold';
  color: var(--header-color);
}

#APP_ICONS {
  padding: 0;
  margin: 0;
}

.DESKTOP_APP {
  position: relative;
  float: left;
  margin: 0px;
  width: 100px;
  height: 100px;
  text-align: center;
}

#layout {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 100vh;
	/*height: 100%;
	width: 100%;*/
	/*position: fixed;*/
}

/*
Experimental code that animates icons as windows are opened

#desktop:target {
  opacity: 1;
  margin: 0;
}

#desktop {
  margin: 200px;
  opacity: 0;
  */

#desktop {
  height: 100vh;
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	transition: all ease 0.3s;
}

.apps {
	flex: 1;
	flex-wrap: wrap;
}

.desktop-folder {
	background-color: var(--folder-color);
	color: var(--folder-color);
	border: 4px solid var(--folder-border-color);
	height: 150px;
	border-radius: 15px;
	margin: 4px;
	display: inline-block;
}

.desktop-folder-label {
	background-color: black;
	/*color: #f5c749;*/
	color: inherit;
	border-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	font-size: 16px;
	margin: 4px;
	padding-left: 0.5em;
}

#taskbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 2px solid black;
	background-image: linear-gradient(var(--widget-lined-header-accent), var(--widget-lined-header));
	height: 50px;
}

#taskbar > h2 {
  color: white;
  margin-right: 10px;
}

#HOME_BUTTON {
  flex: 1;  
  margin-left: 10px;
}

.DESKROP_APP {
  width: 200px;
  text-align: center;
}

.DESKTOP_ICON {
  text-align: center;
  margin-bottom: 0;
  font-size: 5vh;
  text-align: center;
  margin-top: 0;
  text-decoration: none;
  
  /* Make emoji non-selectable */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.DESKTOP_ICON_LABEL {
  font-family: JetBrains-Mono;
  text-align: center;
  margin: 0;
  color: black;
  text-shadow: 2px 2px 5px var(--shadow-color);
  text-decoration: none;
}

#WINDOW_NOTEPAD {
  transition: all ease 0.3s;
  visibility: hidden;
  background-color: white;
  width: 0px;
  height: 0px;
  margin:auto;
  border-radius: 5px;
}

#CONTENT_CARD:target {
  visibility: visible;
  width: 100%;
  height: 100%;
  opacity: 1.0;
}

#CONTENT_CARD {
  transition: all ease 0.3s;
  visibility: hidden;
  background-color: white;
  width: 0px;
  height: 0px;
  opacity: 0.0;
  
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  margin: auto;
  margin-bottom: 200px;
  position: absolute;

  box-shadow: 12px 11px 51px 0px var(--shadow-color);
  -webkit-box-shadow: 12px 11px 51px 0px var(--shadow-color);
  -moz-box-shadow: 12px 11px 51px 0px var(--shadow-color);
  z-index: 1;
}

#CONTENT {
  padding: 40px;
}

.TOOLTIP {
  position: relative;
}

.TOOLTIP_TEXT {
  font-family: 'JetBrains-Mono';
  font-size: 16px;
  font-weight: normal;
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px; 
  
  position: absolute;
  bottom: 130%;
  left: 50%;
  margin-left: -60px;
  z-index: 1;
}

.TOOLTIP_TEXT::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.TOOLTIP:hover .TOOLTIP_TEXT {
  visibility: visible;
}

#IMAGE_PROFILE {
  width: 300px;
  height: 300px;
  float: right;
  border-radius: 100%;
  margin-top: 50px;
}

/*
#ARTICLE_TEXT {
  flex: 1;
}
*/

.WIDGET_CHECKERED {
  background-color: var(--widget-lined-background);  
  background-size: 20px 20px;
  background-image:
    linear-gradient(to right, var(--widget-lined-border), transparent 1px),
    linear-gradient(to bottom, var(--widget-lined-border), transparent 1px);
  border: 1px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: var(--widget-lined-border);
}

.WIDGET_LINES {
  background-color: var(--widget-lined-background);  
  background-size: 20px 20px;
  background-image:
    linear-gradient(to bottom, var(--widget-lined-border), transparent 1px);
  border: 1px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: var(--widget-lined-border);
}

.WIDGET_LINES > h1 {
  color: white;
  background-image: linear-gradient(var(--widget-lined-header-accent), var(--widget-lined-header));
  margin-top: 0;
  padding: 2px;
}

.WIDGET_LINES > h2 {
  margin-top: 0;
  margin-bottom: 0;
  background-color: var(--bluck);
  color: white;
  border: 1px solid white;
  font-size: 14px;
  font-weight: normal;
  padding: 4px;
}

.WIDGET_LINES > h3 {
  margin: 0;
  color: white;
  background-image: linear-gradient(var(--widget-lined-header-accent), var(--widget-lined-header));
  border: 1px solid var(--widget-lined-header);
  padding: 4px;
  width: 30%;
  border-radius: 0px 0px 10px 0px;
}

.WIDGET_LINES > p {
  margin: 4px;
}

.SELECTABLE {
  --corner-size: 20px; /* the size on the corner */
  --border-thickness: 0px;  /* the thickness of the border */
  --border-margin: 10px; /* the gap between the border and image */
  --c: var(--dark-blue);
  
  padding: calc(var(--border-margin) + var(--border-thickness));
  outline: var(--border-thickness) solid var(--c); /* the color here */
  outline-offset: calc(-1*var(--border-thickness));
  mask:
    conic-gradient(at var(--corner-size) var(--corner-size),#0000 75%,#000 0)
    0 0/calc(100% - var(--corner-size)) calc(100% - var(--corner-size)),
    linear-gradient(#000 0 0) content-box;
}

.SELECTABLE:hover {
  --border-thickness: 6px;
  --border-margin: 4px;
}

.SELECTABLE:active {
  --border-thickness: 4px;
  --border-margin: 6px;
  --corner-size: 15px;
}

.WIDGET_INFO {
  background-image: linear-gradient(var(--widget-info-background-accent), var(--widget-info-background));
  border: 1px solid;
  border-color: var(--widget-lined-border);
  display: flex;
}

.WIDGET_INFO > img {
  background-color: white;
  padding: 6px;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin: 4px;
}

.WIDGET_INFO > div {
  flex: 1;
  margin: 2px;
  height: 100px;
}

.WIDGET_INFO > div > h1 {
  margin: 0;
  font-size: 18px;
}

.WIDGET_INFO > div > p {
  background-color: var(--bluck);
  color: white;
  padding: 4px;
  border: 2px solid white;
  border-radius: 5px;
  margin: 0;
}

.WIDGET_INSPECT {
  display: flex;  
}

.WIDGET_INSPECT > img {
  padding: 6px;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin: 0;
}

.WIDGET_INSPECT > div {
  flex: 1;
  border: 1px solid black;
  border-left: none;
  height: 100px;
}

.WIDGET_INSPECT > div > h1 {
  background-color: white;
  padding: 6px;
  border: 1px solid black;
  border-radius: 10px 0px 10px 0px;
  font-size: 18px;
  margin: 0;
  margin-left: -10px;
  margin-top: -10px;
  width: 200px;
}

.WIDGET_INSPECT > div > h2 {
  background-color: white;
  padding: 6px;
  border: 1px solid black;
  border-left: none;
  border-top: none;
  border-radius: 0px 0px 10px 0px;
  font-size: 16px;
  margin: 0;
  width: 75px;
  font-family: 'JetBrains-Mono';
}

.WIDGET_INSPECT > div > p {
  padding: 6px;
  margin: 0px;
}

#SOCIAL_APP {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  height: 100%;
  width: 100%;
  margin: 0;
}

#SOCIAL_SIDEBAR {
  background-color: var(--dark-grey);
  height: 100%;
  width: 80px;
  
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
}

#SOCIAL_SIDEBAR > h1 {
  background-image: linear-gradient(var(--grey-accent), var(--grey));
  border-radius: 100%;
  border: 2px solid white;
  
  font-size: 2.5vw;
  text-align: center;
  width: 60px;
  height: 60px;
  margin: 4px;
}

#SOCIAL_CHANNELS {
  background-color: var(--grey);
  height: 100%;
  width: 250px;
}

#SOCIAL_MESSAGES {
  background-color: var(--grey-accent);
  height: 100%;
  flex: 1;
}

#SOCIAL_FRIENDS {
  background-color: var(--grey);
  height: 100%;
  width: 250px;
}

.sphere {
	background-color: white;
	width: var(--size);
	height: var(--size);
	--offset: calc(var(--size) * 0.5 * 0.3);
	--noffset: calc(var(--offset) * -1);
	--ambience: calc(var(--size) * 0.1);
	--half-size: calc(var(--size) * 0.5);
	border-radius: 100%;
	box-shadow: var(--offset) var(--noffset) var(--offset) var(--offset) rgba(0, 20, 0, 0.5) inset,
				 	var(--offset) var(--noffset) var(--ambience) calc(var(--half-size) - var(--ambience)) var(--my-color) inset;
	--border-calculated: calc(var(--my-color) * rgba(0, 30, 0, 0.5));
	border: 2px solid var(--border-calculated);
}