/* header, footer */

body {
  font-family: Helvetica, sans-serif;
  height: 100vh; margin: 0 auto;
  display: flex; flex-direction: column;
}

header {
  flex: 0 1 auto; display: flex;
  justify-content: center; align-items: center;
  border-bottom: double 6px white;
}

main {
  flex: 1 1 auto;
	display: grid; align-items: center;
	grid-template-columns: 1fr auto auto 1fr;
	grid-template-rows: 1fr auto auto 1fr;
	grid-gap: 1ex;
  background: #131313;
  background-image: url(/images/bg.png);
}

footer {
  flex: 0 1 auto;
  display: flex; flex-direction: row;
  justify-content: center; align-items: center;
  border-top: double 6px white;
}

header, footer {
  background-image: repeating-linear-gradient(-45deg,
      #ffdd00,
      #ffdd00 20px,
      black 20px,
      black 40px);
  height: 12.5%;
}

h1 { 
  font-size: 5rem;
  text-shadow:
    2px 2px white,
    -2px 2px white,
    -2px -2px white,
    2px -2px white;
}

/* links to parts of zone */

a.section {
  background-color: #333;
  padding: 2px 10px 2px 4px;
  border-radius: 4px;
  width: fit-content;
  text-decoration: none;
  text-shadow: 2px 2px transparent;
  animation: bgColor 5s infinite linear;
}

a:hover.section { animation: bgColor 1s infinite linear;}

img.randomweb {
  left: 330px;
}

img.BDVE {
  right: 37%;
}

h2 {
	margin: 0;
  font-style: italic;
  color: white;
}

i { 
  color: white;
  text-shadow:
    1px 1px 4px black,
    -1px 1px 1px black,
    -1px -1px 1px black,
    1px -1px 1px black;
}

div.icon {
  background-color: #333;
  padding: 8px;
  border-radius: 4px;
  height: 16px;
}

div.image {
  display: flex; justify-content: center; align-items: center;
	position: relative; z-index: -1; width: 100%; height: 100%; 
  background-position: center;
  background-size: 180%; /* need to specify a "return" size for the transition */
  transition: background-size ease-in-out 1s, filter ease-in-out 1s;
}

div.shadow:hover > div.image {
  background-size: 200%;
  filter: blur(2px);
} 

div.randomweb {
  background-image: url('/images/randomweb_sample.png');
  /* background-position: 0px 0px; */
}

div.BDVE {
  background-image: url('/images/BDVE_sample.png');
}

/* keyframes for links */
:root {
	--colour-Owen: #0080ff;
	--colour-Liam: #e60000;
	--colour-Aoife: #44a15d;
}

@keyframes bgColor {
  0% {
    text-shadow: 2px 2px var(--colour-Owen);
  }
  50% {
    text-shadow: 2px 2px var(--colour-Liam);
  }
  100% {
    text-shadow: 2px 2px var(--colour-Owen);
  }
}

/* menu link back to main site */

.return {
	float: inline-end;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 40px;
	height: 20px;
}

.return span {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0px;
	border: 2px solid transparent;
	border-radius: 1em;
	transition: background-color .3s;
}

.return #r { background-color: var(--colour-Liam); }
.return:hover #r { background-color: gold; }

.return #g { background-color: var(--colour-Aoife); }
.return:hover #g { background-color: gold; }

.return #b { background-color: var(--colour-Owen); }
.return:hover #b { background-color: gold; }

/* nice button around the button */
.return {
  background-color: #fff;
  padding: 0.5ex;
  border-radius: 4px;
  text-decoration: none;
  outline: solid black;
}

/* adjust for phones */
@media (width <= 499px) {
  h1 { font-size: 2rem; }
  main { grid-template-rows: 2fr auto auto 3fr; }
}
@media (499px <= width <= 899px) {
  h1 { font-size: 3rem; }
  main { grid-template-rows: 2fr auto auto 3fr; }
}