* {
  box-sizing: border-box;
}

@keyframes slide {
  0% {
    top: 1%;
    left: 1%;
  }
  20% {
    top: 1%;
    left: 1%;
  }
  30% {
    top: 1%;
    left: 90%;
  }
  40% {
    top: 1%;
    left: 90%;
  }
  50% {
    top: 90%;
    left: 90%;
  }
  60% {
    top: 90%;
    left: 90%;
  }
  70% {
    top: 90%;
    left: 1%;
  }
  80% {
    top: 90%;
    left: 1%;
  }
  90% {
    top: 1%;
    left: 1%;
  }
  100% {
    top: 1%;
    left: 1%;
  }
}
@keyframes fadeout {
  from {opacity: 1;transform:translate(-100vw, 20vh) scale(1.5)}
  to {opacity: 0;transform: translate(100vw, -20vh) scale(0.75)}
}

@keyframes focus {
		0% {
			filter: blur(0);
		}
		35% {
			filter: blur(0);
		}
		40% {
			filter: blur(3px);
		}
		50% {
			filter: blur(0);
		}
		65% {
			filter: blur(0);
		}
		70% {
			filter: blur(1px);
		}
		80% {
			filter: blur(0);
		}
		88% {
			filter: blur(0);
		}
		90% {
			filter: blur(2px);
		}
		93% {
			filter: blur(0);
		}
		100% {
			filter: blur(0);
		}
	}
	@keyframes bob {
		0% {
    font-size: 1.25rem;
}
50% {
    font-size: 1.35rem;
    transform: scale(1.05);
}
100% {
    font-size: 1.25rem;
}
	}
    @keyframes shimmer {
        0% {
            transform: skew(0deg, 0deg);
            filter: blur(0px);
        }
        88% {
            transform: skew(0deg, 0deg);
            filter: blur(0px);
        }
        90% {
            transform: skew(1deg, 1deg);
            filter: blur(1px);
        }
        92% {
            transform: skew(-1deg, -1deg);
            filter: blur(0px);
        }
        94% {
            transform: skew(0deg, 0deg);
            filter: blur(0px);
        }
        100% {
            transform: skew(0deg, 0deg);
            filter: blur(0px);
        }
    }


svg {
  position: absolute;
  left: 1%;
  top: 1%;
  animation: 25s infinite alternate ease-in-out slide;
  margin: 0% 1%;
  z-index: 1000;
}

@keyframes hues {
  0% {border: 15px solid hsl(0, 100%, 50%)}
  5% {border: 15px solid hsl(18, 100%, 50%)}
  10% {border: 15px solid hsl(36, 100%, 50%)}
  15% {border: 15px solid hsl(54, 100%, 50%)}
  20% {border: 15px solid hsl(72, 100%, 50%)}
  25% {border: 15px solid hsl(90, 100%, 50%)}
  30% {border: 15px solid hsl(108, 100%, 50%)}
  35% {border: 15px solid hsl(126, 100%, 50%)}
  40% {border: 15px solid hsl(144, 100%, 50%)}
  45% {border: 15px solid hsl(162, 100%, 50%)}
  50% {border: 15px solid hsl(180, 100%, 50%)}
  55% {border: 15px solid hsl(198, 100%, 50%)}
  60% {border: 15px solid hsl(216, 100%, 50%)}
  65% {border: 15px solid hsl(234, 100%, 50%)}
  70% {border: 15px solid hsl(252, 100%, 50%)}
  75% {border: 15px solid hsl(270, 100%, 50%)}
  80% {border: 15px solid hsl(288, 100%, 50%)}
  85% {border: 15px solid hsl(306, 100%, 50%)}
  90% {border: 15px solid hsl(324, 100%, 50%)}
  95% {border: 15px solid hsl(342, 100%, 50%)}
  100% {border: 15px solid hsl(360, 100%, 50%)}
}
    
        body * {
	transition: 300ms;
    font-family: 'MuseoModerno', cursive;
}
html, body {
    font-size: 0.9rem;
}
body {
    position: absolute;
    width: 100vw;
    height: 100vh;
    /* top: 10px; */
    /* left: -10px; */
    /* right: 5px; */
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
    align-items: center;
}
body, .main-content {
/* 	color: black; */
	    background-image: url('backgroundwd.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100% 100%;
}
.main-content {
    text-align: center;
    display: flex;
    height: 100vh;
    padding: 1.125vw;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 90%;
}
.head-div {
  margin-top: -1rem;
	width: 94%;
	min-height: 34vh;
  max-height: 36vh;
}
p, #pdj {
    color: white;
	line-height: 1.35em;
	transition: 800ms;
	padding: 1.5vw;
    font-size: 1.25rem;
	border: 1px solid black;
	border-radius: 1rem;
}
p:hover, #pdj:hover {
	filter: drop-shadow(0 0 4px #ffd700bb);
	background-color: #222;
	border: 1px solid #111;
	border-radius: 2rem;
}
h1, h2, h3, h4, h5 {
    transition:2s;
	color:gold;
}
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover  {
	text-shadow: 1px 1px 1px white;
}
h1 {
	font-size: calc(100% * 3);
}
h3 {
	font-size: calc(100% * 2);
}
.sthx {
  flex-shrink: 1;
}
.sthx h3 {
	max-height: 0vh;
	padding: 0.5rem 0.5rem 2.5rem 0.5rem;
	margin: 1rem;
}
#pdj {
    text-align: center;
    margin: 0.5rem 2rem;
    padding: 0.75rem 1rem;
}
.moj-btn {
	position: relative;
	left: 0.75vw;
	font-size: 0.8rem;
	padding: 0.35vw;
	background-color: #eeee44;
	color: #000;
	border-radius: 6px;
    margin: 0.25rem 0rem 0rem -0.25rem;
    transition: 200ms ease-in-out all, 2s filter, 3s background-color;
}
.moj-btn:hover {
    filter: drop-shadow(0px 0px 12px #8800aaaa);
	font-size: 1.25rem;
	padding: 0.5vw;
	background-color: #ffeb00;
	color: #000;
	border-radius: 14px;
	cursor: pointer;
    transform: translate(0.75vw, 0.75vh) scale(0.99);
    margin: -0.25rem -0.125rem -0.125rem -0.25rem;
    text-shadow: 1px 1px 1px #a0f;
}
.mo2-btn {
	position: relative;
	left: 0.75vw;
	font-size: 0.8rem;
	padding: 0.35vw;
	background-color: #000;
	color: #000;
	border-radius: 6px;
    margin: 0.25rem 0rem 0rem -0.25rem;
    transition: 200ms ease-in-out all, 2s filter, 3s background-color;
}
.mo2-btn:hover {
    filter: drop-shadow(0px 0px 12px #8800aaaa);
	font-size: 1.25rem;
	padding: 0.5vw;
	background-color: #000;
	color: #000;
	border-radius: 14px;
	cursor: pointer;
    transform: translate(0.75vw, 0.75vh) scale(0.99);
    margin: -0.25rem -0.125rem -0.125rem -0.25rem;
    text-shadow: 1px 1px 1px #a0f;
}
.page-head {
	text-align: center;
}
.sthx p, #pdj {
  transition: 2s;
	text-align: left;
	border: 1px solid gold;
	padding: 1.5vw;
	font-size: 0.8rem;
}
.foot-div {
	position: absolute;
	bottom: 0;
	width: 100%;
}
.footertext {
	color:green;
}
.abs {
	position:absolute;
	z-index:1;
}
.xhair {
	border: 1px solid green;
}
#xh-g {
	top: calc(50%);
	left: 0;
	width: 100%;
	height: 1px;
}
#xh-v {
	bottom: 0;
	left: calc(50%);
	width: 1px;
	height: 100%;
}
.xhair {
	display: none;
	opacity: 0;
}
#learning {
	line-height: 2em;
    animation: 11s infinite alternate forwards running cubic-bezier(0, 1.67, 0.13, -0.54) focus;
}
.lrn-span {
    animation: 2s infinite ease-in-out bob;
}
.lower-inner {
    text-align: center;
    padding: 0;
    margin: 1vh;
    margin-bottom: 2vh;
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lower-outer {
    position: sticky;
    bottom: -10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}
.echo-btn {margin: 0.25vw;}
.lower-p {
  margin: 0;
  padding: 0.5rem;
    width:90%;
    font-size: 0.8125rem;}
.echo-btn {
  max-height: 15vw;
  margin: 0.5rem;
  padding: 0.325rem;
  border: 1px solid gold;
  color: #000;
  border-radius: 0.5em;
  text-shadow: 0px 0px 1px black;
  background-color:#ffc800;
  filter: drop-shadow(20px, 20px, 20px, #440000);
}
.thx-ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
ul.thx-ul li {
    display: block;
    width: 51%;
}

p {
  background-image: url('/b');
    background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}


* {
  box-sizing: border-box;
}
body {
  position: absolute;
  /* right: 5px; */
  /* margin: auto; */
  /* padding: 1rem 1% 1%; */
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: center;
  align-items: center;
  }

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  animation: 30s infinite linear forwards hues;
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  flex: 3 1 auto;
  
  /* Then we define how is distributed the remaining space */
  justify-content:center;
  align-content: center;
  align-items: center;
  /* Then I proceed to get totally carried away and just go apeshit with the css */
  border: 15px solid turquoise;
  margin: 0;
  padding: 4vh 5vw;
  list-style: none;
  border-radius: 5vw;
  position: relative;
  transition: 400ms;
  min-height: 80vh;
}

.flex-item {
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  transition: 240ms linear all, 1.5s ease font-size, 10s linear background, 6s filter, 3s border-radius, 1.5s border-color;
  background: hsl(var(--base-color), 70%, 50%);
  width: 9.5vw;
  font-weight: bold;
  font-size: 5vh;
  border: 4px solid transparent;
  border-left-width: 4px;
  border-right-width: 4px;
  border-top: 10px ridge transparent;
  border-bottom: 4px outset transparent;
  border-top-color: hsl(calc(var(--base-color) - 90) 90% 50%);
  border-bottom-color: hsl(calc(var(--base-color) - 85) 96% 50%);
  border-right-color: hsl(calc(var(--base-color) - 85) 96% 50%);
  border-left-color: hsl(calc(var(--base-color) - 85) 96% 50%);
  box-shadow: 4px 6px 5px #00000084;
  color: hsl(calc(var(--base-color) + 280) 100% 70%);
  text-shadow: 1px 1px 1px teal;
  max-width: 60%;
  min-width: 15%;
  max-height: 30vh;
  padding: 3rem;
  min-height: 20vh;
  margin: 1.5rem 2rem;
  border-radius: 1.75rem;
  outline: 3px solid #f0bc00aa;
}

.flex-item:hover {
  transform: scale(1.3) skew(0.25deg, -0.5deg);
  box-shadow: 8px 12px 10px  #00000084;
  border-radius: 3em;
  color: hsl(calc(var(--base-color) * 1.75) 100% 70%);
  text-shadow: 2px 2px 2px #005500;
  filter: hue-rotate(420deg) /* nice */;
  cursor: wait;
}

p {transition: 240ms linear all, 1.5s ease font-size, 5s linear background, 6s filter, 3s border-radius, 1.5s border-color;}

.flex-item:hover p {
     transform: scale(1.9);
}

.flex-item:last-child{
  min-width: 34%!important; 
  max-width: 70%!important;
}

h1 {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 2 auto;
  line-height: 6vw;
  font-size: 6vh;
  height: 0;
  position:  relative;
  bottom: 1rem;
  margin: 0.5rem;
  padding: 0.5rem 0;
  align-self: baseline;
  align-items: center;
  justify-content: space-evenly;
}

.main-content {
  background-image: url('backgroundwd.jpg');
/*   background-image: url('https://i.imgur.com/C4crbwx.jpg'); */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}