@import url("https://fonts.googleapis.com/css?family=Varela+Round");	/* Import font */

/* Default (dark) colour scheme */
:root	{ 
  --vbg: #272D2D;          	/* Gunmetal background */
  --vbox-shadow: #171D1D;	/* Dark grey */

  --ctitle: #F8F4F4;      	/* Ivory (headings) */
  --ctext-accent: #57B8FF;  /* Argentinian Blue (links/subtitles) */
  --vtext: #F8F8F4;       	/* Softer ivory (body text) */
  --cnav-hover: #57B8FF;	/*Argentinian Blue*/

  --caccent: #8B3FD6;      	/* Main purple accent */
  --cdp-border: #D8D4D4;    /* ivory ring in dark */
  
  --vfooter-bg: #1A1A1A;	/*Slightly darker than gunmetal*/
  --vfooter-text: #B3B3B3;	/*Slightly darker than main text*/
  
  --vback-bg: #000000;		/* True black */
  
  color-scheme: dark;
}

/* Light colour scheme */
@media (prefers-color-scheme: light) {
  :root	{
    --vbg: #F0EEE4;            	/* Softer off-white instead of pure white */
	--vbox-shadow: #575D5D;		/* Lighter grey than dark mode */

    --ctitle: #F8F4F4;      	/* Ivory (headings) */
    --ctext-accent: #57B8FF;   	/* Argentinian Blue (links/subtitles) */
    --vtext: #444444;          	/* Softer body text (not harsh black) */
	--cnav-hover: #57B8FF;	  	/*Argentinian Blue*/

    --caccent: #8B3FD6;        	/* Purple navbar/accent */
	--cdp-border: #D8D4D4;		/* cleaner than black on light */

    --vfooter-bg: #D8D4D4;     	/* Light grey footer background */
    --vfooter-text: #555555;   	/* Softer grey text */
	
	--vback-bg: #FAFAFA;		/* Off white */

    color-scheme: light;
  }
}

/* Header and nav bar CSS */
* {
  margin: 0;				/* Reset */
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-width: 400px;      /* lock layout at 400px */
  overflow-x: auto;      /* allow horizontal scroll when < 400px */
}

body {
  font-family: "Varela Round", sans-serif;	/* Import font and specify backup font */
  background-color: var(--vback-bg);		/* Visible background colour of the page */
  color: var(--vtext);						/* Font colour */
  line-height: 1.6;							/* Distance between lines of text */
}

main	{
  background-color: var(--vbg);		/* Background colour behind the page */
}

.sticky-wrapper {
  position: sticky;		/* Stops the sticky wrapper from disappearing above the top of the page */
  top: -250px;			/* Sets the distance from the top that it stops */
  z-index: 1000;		/* Ensures the sticky wrapper is in front of everything else on the page */
  width: 100%;
}

.banner-image-container {
  height: 300px;					/* Sets the height of the banner image */
  position: relative;
  overflow: hidden;					/* Any extra image is hidden */
  background-color: var(--vbg);		/* Colour behind the image is the same as the page background */
}

.banner-image {
  width: 100%;			/* Image fills the container */
  height: 100%;
  object-fit: cover;	/* Image is clipped to fit */
  position: absolute;
  top: 0;
  left: 0;
}

.band-wrapper	{
	height: 88px;	/* Height (thickness) of purple bar */
}

.violet-band {
  background-color: var(--caccent);
  padding: 0.75rem 2rem;					/* Keeps everything 0.75rem from top/bottom and 2rem from left/right */
  position: relative;
  box-shadow: 0 8px 8px var(--vbox-shadow);	/* Casts a shadow under the purple bar with a length and a fade */
}

.violet-inner {
  display: flex;					/* Arranges the children items in one row */
  align-items: center;				/* Aligns the items in the vertical centre of the parent */
  justify-content: space-between;	/* Puts even horizontal space between the children */
  flex-wrap: wrap;					/* If the children run out of horizontal room, they move to a new row */
  max-width: 960px;					/* Limits the horizontal spread of the children */
  margin: 0 auto;
  position: relative;
}

.profile-pic {
  position: absolute;					/* Allows the dp to be moved without affecting other objects */
  top: -50px;							/* Moves the dp below the bar */
  left: 1rem;
  width: 160px;							/* Image size */
  height: 160px;
  border-radius: 50%;					/* Cuts image into a circle */
  border: 4px solid var(--cdp-border);	
  object-fit: cover;					/* Image is clipped to fit */
  background: var(--cdp-border);
  z-index: 10;
}

.name-heading {
  font-size: 2.5rem;		/* Title font size */
  color: var(--ctitle);		/* Title font colour */
  margin-left: 200px; 		/* Leaves space for the dp */
  white-space: nowrap;		/* Ensures title stays on the same line */
}

.nav-links {
  align-items: center;		/* Aligns the items in the vertical centre of the parent */
  margin-left: auto;
}

.nav-links ul {
  list-style: none;				/* Removes bullets */
  display: flex;				/* Arranges the children items in one row */
  gap: 2rem;					/* Spacing between links */
  margin: 0;
  padding: 0;
}

.nav-links li {
  height: 30px;				/* Height of the parent of the text */
  text-align: center;

  a {
    font-size: 20px;		/* Height of the text */
    color: var(--ctitle);	/* Text colour of the links */
    text-decoration: none;	/* Removes underline */
    font-weight: bold;
    white-space: nowrap;	/* Keeps the links on one line */
  }

  &:hover a {
    color: var(--cnav-hover);	/* Hover colour of the links */
  }
}


/* Main body CSS */
h2	{
	color: var(--ctext-accent);		/* Headings text colour */
}

a	{
	text-decoration: none;		/* Removes underlines from links */
}

#top {
  padding: 4rem 0 1rem 0;	/* Sets the padding for the top section of the content */
}

.section	{
	display: flex;			/* Arranges the children items in one row */
	max-width: 960px;		/* Sets the max width of the content */
	margin: auto;
	gap: 2rem;				/* Sets the gap betweeen the text and corresponding image */
	align-items: center;	/* Aligns the items in the vertical centre of the parent */
	text-align: left;
}

.container {
  max-width: 960px;			/* Sets the max width of the text */
  margin: 0 auto;
  padding: 1rem;
}

.portrait	{
	width: 250px;							/* Sets the width of all portrait images */
	border: 10px solid var(--cdp-border);	/* Portrait image border */
	border-style: inset;					/* Gives border 3D feel */
	display: inline-block;
}

.landscape	{
	width: 400px;							/* Sets the width of all landscape images */
	border: 10px solid var(--cdp-border);	/* Landscape image border */
	border-style: inset;					/* Gives border 3D feel */
	display: inline-block;
}

#bottom {
  padding: 1rem 0 4rem 0;
  text-align: left;
  justify-content: center;
}

footer {
  background: var(--vfooter-bg);						/* Footer background colour */
  color: var(--vfooter-text);							/* Footer text colour */
  text-align: center;
  margin-bottom: 5px;
  padding: 1rem 0;
  font-size: 0.9rem;
  box-shadow: 0 -10px 30px 5px var(--vback-bg) inset;
}

/* Changes for screens less than 950px wide */
@media (max-width: 950px) {
  .violet-inner {
    flex-direction: column;
	height: 90px;
    align-items: flex-start;
	justify-content: space-between;
  }
  
  .name-heading	{
	height: 60px;
  }
  
  .nav-links {
  margin-left: 202px;
  }
}

/* Changes for screens less than 680px wide */
@media (max-width: 680px) {
  .violet-inner {
	height: auto;
    flex-direction: column;
    align-items: left;
  }
  
  .profile-pic {
    width: 110px;
    height: 110px;
    border-width: 3px;
  }
  
  .name-heading	{
	margin-left: 150px;
	font-size: 1.75rem;
	line-height: 1.1;
	height: 1.75rem;
  }
  
  .nav-links	{
	margin: 5px 0 0 150px;
  }
  
  .nav-links ul	{
	gap: 1.2rem;
	white-space: normal;
  }
  
  .nav-links li a	{
	font-size: 1.2rem;
}

  .section {
    flex-direction: column;
    align-items: center;
  }
  
  .section > .container {
	order: 1;
	}
	
  .section > img {
	order: 2;
	}

  .portrait, .landscape {
    max-width: 100%;
  }
}

@media (max-width: 570px) {
  .violet-inner	{
	align-items: center;
  }
	
  .profile-pic	{
	top: -70px;
  }
	
  .name-heading	{
	margin: 0;
  }
	
  .nav-links	{
	margin: 15px 0 0 0;
  }
}

@media (max-width: 470px)	{
  .profile-pic	{
	left: -20px;
  }
}