/* A css reset, from piccalil.li/blog/a-more-modern-css-reset */

/* Box sizing rules - actually I already have this one
*,
*::before,
*::after {
  box-sizing: border-box;
} */

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.15;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}




/* Elements */

:root {
/*    --teal: #007090; /* my interpretations... */
    --teal: #20c0c0; /* my interpretation... of turquoise really */
/*    --teal_rgba: rgba(32, 192, 192, 0.5) */
    --teal_rgba: #20c0c080;
    --teal_paler: #24c1c180;
    --teal_faint: #083030;
	--super-light-blue: #f4f4ff;
	--super-light-yellow: #ffffe0;

	--bar-colour: lightblue;
	--livebutton-colour: var(--teal);
/*	--notlivebutton-colour: darkgrey; /* which is actually lighter than "grey"! */
	--notlivebutton-colour: #80b0b0;
	--max-width: 1280px;
	--bar-width: calc(0.25vw + 0.25vh);
	--text-colour: white;
	--slash-colour: var(--teal);
	--nick-colour: lightblue;
	--slashnick-colour: #66cdd3; /* halfway from #add8e6 and #20c0c0 */
    --border-colour: dimgray; /* nice that all '-gray' colornames are gray/grey (ie either) */
/*	--title-size: calc(12pt + var(--bar-width)*4); too big on mobile portrait screens */
	--title-size: calc(4pt + 4vw);
	--text-size: calc(9pt + var(--bar-width));
	--bigger-text-size: calc(2pt + var(--text-size));
/* for any headings add clamp(), (stops titles going too huge), after orig (fallback) font-size statement. eg: >   font-size: clamp(2rem, 4vw + 1rem, 3rem);
 ...hm no calc() in that clamp()?! */
	--small-text-size: calc(7pt + var(--bar-width));
	--tiny-text-size: calc(0pt + var(--bar-width)); /* I have a tiny space in my blue-bar footer, a placeholder for if I decide to have text... */
}

html {
	scroll-behavior: smooth;
	margin: 0;
	max-width: var(--max-width); /* doesnt affect layout - works as expected */
/*    overflow: hidden; /* Isn't this what you'd want? Hm, no, seems to stop a vertical scrollbar appearing, doh! */
    }

body {
	margin: 0;
	background-color: black;
}

/* Universal fix so borders & padding are "inside the box" not outside, adding to its width */
html {
  box-sizing: border-box;
}
*, *:before, *:after {  /* BTW single-colons here are now preferred as double-colons, but either's fine */
  box-sizing: inherit; /* doing it this way allows content-box or padding-box elsewhere in the CSS */
}

h4 {
    font-family: 'strawfordbold';
    font-weight: normal;
    padding-bottom:0.5em;
}

b {
    font-family: 'strawfordbold';
    font-weight: normal;
}

.small_1 {
	font-size: 0.8em;
}

.small_2 {
	font-size: 0.7em;
}

.visible {
	display: initial;
}
.invisible {
	display: none;
}

.hilite {
    color: lightblue;
    font-weight: 700;
    }

.table {display: table; width: 100%;}
.row {display: table-row;}
.cell {display: table-cell;}

.row, .cell {padding: 0px;}

.cellwide {width: 100%;}

.line {
  height: 100vh;
  width: var(--bar-width);
  background: var(--bar-colour);
}

.footer {
	position: fixed;
	left: calc(6*var(--bar-width));
	bottom: 0px;
	right: calc(6*var(--bar-width));
	background-color: var(--bar-colour);
	color: white;
	text-align: center;
	max-width: calc(var(--max-width) - 12*var(--bar-width)); /* doesnt affect layout - works as expected */
/*	max-width: 1260px; /* doesnt affect layout - works as expected */
	font-family: 'strawfordregular', sans-serif;
/*	font-size: var(--small-text-size); */
	font-size: var(--tiny-text-size);
}

.bluebox {
    margin: 0px var(--bar-width) var(--bar-width) var(--bar-width);
	border-top: calc(var(--bar-width) * 2) dotted var(--teal_faint);
	border-radius: 3px;
	padding: calc(3 * var(--bar-width)) var(--bar-width) var(--bar-width) var(--bar-width);
    }

.thinnerbluetop {
	border-top: var(--bar-width) dotted var(--teal_faint);
}

.fatmiddle {
	width: "*";
}

/* this fails to make cells use 'all space to the screen bottom' alas */
.fatmiddlelast {
	height: "100%";
	min-height: "100%";
}

.slashnicktitle {
	font-family: 'strawfordblack', sans-serif;
    font-weight: normal;
	font-size: var(--title-size);
	text-align: justify;
	text-align-last: justify;
/*	word-spacing: -0.2em; failed attempt to reduce the starting (=minimum) inter-word space from 0.25em, allowing more squished-together words */
	/* Later, you may want to explore how 'text-justify' lets you apportion spacing, too */
	margin: 5px 0px 5px 0px;
}
.slashnickdiv {
	margin: 5px calc(2*var(--bar-width)) 0px calc(2*var(--bar-width));
}

p {
	margin-top: 0.5em; /* the default value for these is 1em, BTW */
	margin-bottom: 0.5em;
}

.ind {
	padding-left: calc(4 * var(--bar-width));
}

/* all the button stuff together: */

button {
	border-radius: 5px;
	border: none;
	cursor: pointer;
	font-weight: 400; /* ="normal" - hopefully the only/default weight we've asked for */
/*	font-family: 'PetitaMedium', sans-serif; */
	font-family: 'strawfordregular', sans-serif;
	font-size: var(--text-size);
	color: var(--text-colour);
	text-align: center;
	text-decoration: none;
	padding: 3px 4px 2px 4px; /* grows bigger with media-queries, later */
	margin: 0px 5px 0px 5px;
	white-space: nowrap;
/*	overflow: hidden; */
	vertical-align: top;
	letter-spacing: 0%;
}

.areabutton {
	display: inline-block;
	margin-bottom: 5px;
}

.areabuttonlive {
	background-color: var(--livebutton-colour);
}

/* let's try a little fun background for the live button */
.itembuttonlive {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 300s ease infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


h4  {
	font-size: var(--bigger-text-size);
}

.areabuttonnotlive, .itembuttonnotlive {
	background-color: var(--notlivebutton-colour);
}

.areabuttonlive, .areabuttonnotlive {
	font-size: var(--bigger-text-size);
}

.itembutton {
	display: inline-block;
	margin-bottom: 5px;
}

.itembuttonlive, .itembuttonnotlive {
	font-size: var(--bigger-text-size); /* orig. had "item" buttons/text smaller. But gets too small on mobile. So, now all same ok size. */
/* the order of styles being applied is currently 3-deep(!):
<span class="itembutton">
  <button...
    ...class="itembuttonlive">
so eg 'button' overrides 'itembutton' (oops) - which could perhaps be rearchitected :-) */
}


button:hover {
  background-color: white;
  color: var(--livebutton-colour);
}

button:active {
  background-color: black;
	padding: 7px 8px 3px 12px;
  color: grey;
}

.itembuttonlive:hover {
  color: black;
}

button, button:hover, button:active, button:focus {
  outline: none;
}

/* I was going to have different colour buttons for items and areas, using eg
  button:active.areabutton {
and
  .areabuttonlive {h
but now I think I'll have the same - emphasising KISS */


/* classes */

.scolr {
	color: var(--slash-colour);
}
.ncolr {
	color: var(--nick-colour);
}
.sncolr {
	color: var(--slashnick-colour);
/*	font-size: larger; */
}

.introwords {
	font-family: 'strawfordregular', sans-serif;
/*	font-style: italic; */
	font-size: var(--bigger-text-size);
    color: var(--text-colour);
}

.itemcontents {
	font-family: 'strawfordregular', sans-serif;
/*	font-size: var(--text-size); */
	font-size: var(--bigger-text-size); /* orig. had "item" buttons/text smaller. But gets too small on mobile. So, now all same ok size. */
    color: var(--text-colour);
}

/*
.buttonstrip {
	line-height: 110%;
 }
... ie me now trying .buttonstrip without the flex, and it wraps fine, but still no space-between... and OOPS I ned the flex as a good way to do justified layout. Or do I?
  line-height: 110%;   does nothing
  align-content: space-between;  does nothing
  */

 .buttonstrip {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	padding: 0px 5px 0px 5px;
/*	background-color: var(--super-light-yellow); */
	justify-content: left; 
}
/*  NB   justify-content: left;    moves just a few px around, eg if I have 6 items each @16% width */



.prjimg {
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	max-width: 100%;
}

.flex-container {
	display: flex;
	flex-direction: column; /* becomes "row" for wider screens, below */
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	padding: 0;
	margin: 0;
}

.splitpic {
	width: 85%;
	padding: 0 0 1vh 0;
}

.splittxt {
	width: 85%;
}


.carousel {
  position: relative;
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  min-height: 600px; /* mediaqueries make it smaller, for wider screens, where pic & text are side by side */
  margin: 5px 5px 0px 5px;
  border-color: var(--border-colour);
  border-width: 1px;
  border-style: solid; /* if you don't mention this, there's no default - ie there's no border! */
  padding: 2px;
  background-image: url(./colours.svg);
  background-size: cover;
}

.carousel-item {
  position: absolute;
  top: 0;
/*  left: 100px;
  right: 100px; */
  left: 5vw;
  right: 5vw;
/*  width: 100%; */
  height: 100%;
  display: none;
}

.carousel-item.active {
  display: inherit;
  animation: visible 0.5s forwards;
}

@keyframes visible {
 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }
}

/* .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.carousel-prev, .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
/*  font-size: 24px;
  padding: 10px; */
  font-size: calc(12px + 1.5vw);
  padding: 1vw;
/*  background-color: rgba(255, 255, 255, 0.5); */
  background-color: var(--teal_rgba);
  border: 2px var(--teal_paler) groove;
  cursor: pointer;
}

.carousel-prev {
  left: 1px;
}

.carousel-next {
  right: 1px;
}

/* >>>>>> MEDIA QUERIES */

/* Small screens */
@media all and (max-width: 500px) {
body {
  line-height: 1.15;
}
button {
	padding: 4px 6px 3px 6px;
}
}



/* things we were trying before
.fullscreen {
  width: 100%;
  min-height: 100vh;
  border: 5px solid black;
}

.remainingscreen {
  height: 100%;
  min-height: 100%;
} */

.container {
  width: "*";
  height: "100%";
}

/* Extra small devices (phones, 600px and down) are 'as above' or here just below! */
.container, .introwords {
    margin: 2px 0px 2px 0px;
}
.container {
	border: 2px 0px 2px 0px solid var(--border-colour);
	padding: 2px 0px 2px 0px;
    }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
body {
  line-height: 1.2;
}
.container, .introwords {
    margin: 2px 3px 2px 3px;
}
.container {
	border: 3px solid var(--border-colour);
	border-radius: 3px;
	padding: 3px;
    }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
body {
  line-height: 1.25;
}
.container, .introwords {
    margin: 2px 4px 2px 4px;
}
.container {
	border: 3px solid var(--border-colour);
	border-radius: 3px;
	padding: 3px;
    }

.flex-container {
    flex-direction: row;
	align-items: top;
  }
.splitpic {
	width: 40%;
}

.splittxt {
	width: 50%;
}
.carousel {
  min-height: 320px;
}
button {
	padding: 5px 10px 4px 10px;
}
}

/* Large devices (laptops/desktops, 992px and up) */
/* Slightly Larger version of the above - try 1080px */
@media only screen and (min-width: 992px) {
body {
  line-height: 1.3;
}
.container, .introwords {
    margin: 4px 10px 4px 10px;
}
.container {
	border: 5px solid var(--border-colour);
	border-radius: 5px;
	padding: 5px;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}