main {
  --ctrl: 7.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.homeLink, s:target ~ .notHomeLink {display: none;}
s:target ~ a > .homeLink {display: inline-block;}

/*PURE RESPONSIVE CSS3 SLIDESHOW GALLERY by Roko C. buljan http://stackoverflow.com/a/34696029/383904*/
/*modified heavily by hzrn vriska muncee*/

s {position: fixed;}

.sliderBox {
  width: 594px;
  border: 4px solid black;
  background-color: white;
  flex: 1;
  margin-top: 10px;
  padding: 10px;
}
.sliderBox > * {display: none;}
s:target ~ .sliderBox {display: flex; align-items: center; justify-content: space-around;}

.slider {
	height: 15rem;
	width: 15rem;
	display: none;
	background-size: initial;
}
s:target ~ .sliderBox > .slider {display: block;}

#s0:target ~ .sliderBox > .slider {background-image: url('img/abtme.png');}
#s0:target ~ .sliderBox > .slider:hover {animation: gif steps(5) 1.3s infinite;}
#s1:target ~ .sliderBox > .slider {background-image: url('img/blog.png');}
#s1:target ~ .sliderBox > .slider:hover {animation: gif steps(6) 1.3s infinite;}
#s2:target ~ .sliderBox > .slider {background-image: url('img/dreams.png'); height: 252px; width: 252px;}
#s2:target ~ .sliderBox > .slider:hover {animation: gif steps(3) 0.2s infinite;}
#s3:target ~ .sliderBox > .slider {background-image: url('img/gridgame.png');}
#s3:target ~ .sliderBox > .slider:hover {animation: gif steps(9) 1.2s forwards;}
#s4:target ~ .sliderBox > .slider {background-image: url('img/color.png');}
#s4:target ~ .sliderBox > .slider:hover {animation: gif steps(23) 2.4s infinite;}
#s5:target ~ .sliderBox > .slider {background-image: url('img/math.png');}
#s5:target ~ .sliderBox > .slider:hover {animation: gif steps(5) 1.3s infinite;}
#s6:target ~ .sliderBox > .slider {display: none;}
#s7:target ~ .sliderBox > .slider {display: none;}

.sliderBox h2, .sliderBox h3 {
  color: black;
  font-weight: bold;
	text-align: center;
}
span, #splash {font-weight: normal; font-size: 1.2rem;}

s:target ~ .sliderBox > .introText {display: none;}


.introText {
  display: flex;
}
#welcome {
  font-size: 4em;
  margin-top: 0.5em;
}
#splash {
  cursor: pointer;
  user-select: none;
  justify-content: center;
  align-items: center;
  height: 42px;
  margin-top: 2em;
}

h3 {
  width: 288px;
  font-size: 1.67em;
}

#s0:target ~ .sliderBox > .text0 ,
#s1:target ~ .sliderBox > .text1 ,
#s2:target ~ .sliderBox > .text2 ,
#s3:target ~ .sliderBox > .text3 ,
#s4:target ~ .sliderBox > .text4 ,
#s5:target ~ .sliderBox > .text5 {display: block;}
#s6:target ~ .sliderBox {flex-direction: column; justify-content: space-evenly;}
#s6:target ~ .sliderBox > #buttons {display: grid; grid-template-columns: repeat(4, 1fr)}
#s6:target ~ .sliderBox > #myButton {display: flex; justify-content: center;}
#s7:target ~ .sliderBox {flex-direction: column; justify-content: space-evenly;}
#s7:target ~ .sliderBox > .johnGeorge {display: block;}

/*#buttons {display: none;}*/
#buttons > a, #buttons > img {
  width: 88px;
  height: 31px;
}
#myButton {
  /*display: none;*/
  width: 352px;  
}
h4 {
  font-weight: bold;
  color: black;
  font-size: 1.5em;
  line-height: 31px;
  margin-right: 1.5ch;
}

/*.johnGeorge {display: none;}*/

#george {
  border: none;
  height: 50px;
  width: 440px;
}

#johnvertisement {
  max-width: 732px;
  width: 100%;
  height: 94px;
  border: none;
}

.ctrl {
  display: none;
  height: var(--ctrl);
  align-self: stretch;
  margin-top: 2rem;
}
s:target ~ .ctrl {display: block;}
.ctrl > div {
  height: var(--ctrl);
  width: 594px;
  position: absolute;
  display: flex;
  justify-content: space-between;
  z-index: 2;
	visibility: hidden;
}
.ctrl > div > a {
	height: var(--ctrl);
	width: var(--ctrl);
	background-color: #464;
	border: 4px solid black;
	border-radius: calc(var(--ctrl) / 2);
}
.ctrl > div > a:first-child {background-color: #644;}
.ctrl > div > a:nth-child(2) {background-color: #464;}
.ctrl > div > a:last-child {background-color: #446;}
.ctrl > div > a:active {filter: saturate(1.5) hue-rotate(150deg) brightness(1.2);}
#s0:target ~ .ctrl > div:nth-child(1) {visibility: visible;}
#s1:target ~ .ctrl > div:nth-child(2) {visibility: visible;}
#s2:target ~ .ctrl > div:nth-child(3) {visibility: visible;}
#s3:target ~ .ctrl > div:nth-child(4) {visibility: visible;}
#s4:target ~ .ctrl > div:nth-child(5) {visibility: visible;}
#s5:target ~ .ctrl > div:nth-child(6) {visibility: visible;}
#s6:target ~ .ctrl > div:nth-child(7) {visibility: visible;}
#s7:target ~ .ctrl > div:nth-child(8) {visibility: visible;}


.bullets {
	height: var(--ctrl);
  width: 594px;
	display: flex;
	justify-content: space-between;
	align-self: center;
	z-index: 2;
	margin-top: 2rem;
}
s:target ~ .bullets {display: none;}
.bullets > a {
	height: 2.5em;
	width: 2.5em;
	align-self: inherit;
}
.bullets > a:nth-child(1) {background-image: url("img/p0.png")}
.bullets > a:nth-child(2) {background-image: url("img/p1.png")}
.bullets > a:nth-child(3) {background-image: url("img/p2.png")}
.bullets > a:nth-child(4) {background-image: url("img/p3.png")}
.bullets > a:nth-child(5) {background-image: url("img/p4.png")}
.bullets > a:nth-child(6) {background-image: url("img/p5.png")}
.bullets > a:nth-child(7) {background-image: url("img/p6.png")}
.bullets > a:nth-child(8) {background-image: url("img/p7.png")}
.bullets > a:hover {filter: saturate(1.5) hue-rotate(300deg) brightness(13) drop-shadow(0px 0px 8px #660);}