html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display:block
}
body {
  line-height:1
}
main {
  margin-left: 0;
  margin-right: 0;
  padding: 50px;
  background-color: transparent;
  margin-top: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  overscroll-behavior-x: none;
}
p{
  background: black;
  color: white;
  padding: 10px;
  border: 2px solid white;
  text-align: center;
}
p img{
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.pGraph{
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 15rem;
  width: 95%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-top : calc(var(--bs-gutter-y) * 0.25);
  padding-bottom : calc(var(--bs-gutter-y) * 0.25);
  margin-right: auto;
  margin-left: auto;
}

.aboutStyles{
  background: lightblue url("./imgs/tide.gif") repeat fixed center; 
}
.contactStyles{
  background: lightblue url("./imgs/STARFY.gif") repeat fixed center; 
}
.dogStyles{
  background: lightblue url("./imgs/jelly.gif") repeat fixed center; 
}
@media(max-width: 550px) {
  .Container {
    display:flex;
    align-items:center
  }
}
ol,
ul {
  list-style:none
}
blockquote,
q {
  quotes:none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content:"";
  content:none
}
table {
  border-collapse:collapse;
  border-spacing:0
}
.Landing {
  display:flex;
  justify-content:center;
  align-items:center
}
.Nav {
  --scale: 1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  position:fixed;
  pointer-events:none;
  z-index:1
}
@media(max-width: 550px) {
  .Nav {
    display:flex;
    align-items:center
  }
}
.Nav::before {
  content:"";
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#0077c8;
  background-image:url("./imgs/textures/caustic.jpg");
  
  background-blend-mode:luminosity;
  transition:1s ease-in-out;
  transition-property:opacity;
  position:absolute;
  opacity:0
}
.Nav-items {
  transition:1s ease-in-out;
  transition-property:width,height,top,right;
  position:absolute;
  width:calc(100px*var(--scale)*2);
  height:calc(100px*var(--scale)*2)
}
@media(max-width: 550px) {
  .Nav-items {
    right:-80px
  }
}
@media(min-width: 550px) {
  .Nav-items {
    top:100px;
    right:100px
  }
}
.Nav-menu {
  transition:1s ease-in-out;
  transition-property:margin-top,margin-left;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  animation:Rotate 100s linear infinite forwards
}
.Nav-items:hover .Nav-menu {
  animation-play-state:paused
}
.Nav-itemImage {
  animation:Rotate 100s linear infinite reverse backwards
}
.Nav-items:hover .Nav-itemImage {
  animation-play-state:paused
}
.Nav-itemImage>.funIcon {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:scale(calc(var(--scale) * 0.5))
}
.Nav-itemLabel {
  position:absolute
}
.Nav-itemName {
  animation:Rotate 100s linear infinite reverse backwards
}
.Nav-items:hover .Nav-itemName {
  animation-play-state:paused
}
.Nav-item {
  position:absolute;
  pointer-events:all;
  list-style-type:none
}
.Nav-item:nth-child(1) {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(100px * var(--scale) * cos(0 * 90deg)), calc(100px * var(--scale) * sin(0 * 51.4285714286deg)))
}
.Nav-item:nth-child(1) .Nav-itemLabel {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(60px * var(--scale) * cos(0 * 90deg)), calc(60px * var(--scale) * sin(0 * 51.4285714286deg)))
}
.Nav-item:nth-child(2) {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(100px * var(--scale) * cos(1 * 90deg)), calc(100px * var(--scale) * sin(1 * 51.4285714286deg)))
}
.Nav-item:nth-child(2) .Nav-itemLabel {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(60px * var(--scale) * cos(1 * 90deg)), calc(60px * var(--scale) * sin(1 * 51.4285714286deg)))
}
.Nav-item:nth-child(3) {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(100px * var(--scale) * cos(2 * 90deg)), calc(100px * var(--scale) * sin(2 * 51.4285714286deg)))
}
.Nav-item:nth-child(3) .Nav-itemLabel {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(60px * var(--scale) * cos(2 * 90deg)), calc(60px * var(--scale) * sin(2 * 51.4285714286deg)))
}
.Nav-item:nth-child(4) {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(100px * var(--scale) * cos(3 * 90deg)), calc(100px * var(--scale) * sin(3 * 51.4285714286deg)))
}
.Nav-item:nth-child(4) .Nav-itemLabel {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(60px * var(--scale) * cos(3 * 90deg)), calc(60px * var(--scale) * sin(3 * 51.4285714286deg)))
}
.Nav-item:nth-child(5) {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(100px * var(--scale) * cos(4 * 90deg)), calc(100px * var(--scale) * sin(4 * 51.4285714286deg)))
}
.Nav-item:nth-child(5) .Nav-itemLabel {
  transition:1s ease-in-out;
  transition-property:transform;
  transform:translate(calc(60px * var(--scale) * cos(4 * 90deg)), calc(60px * var(--scale) * sin(4 * 51.4285714286deg)))
}
@keyframes Rotate {
  from {
    transform:rotate(0deg)
  }
  to {
    transform:rotate(360deg)
  }
}
.NavItem {
  transition:1s ease-in-out;
  transition-property:width,height;
  display:flex;
  justify-content:center;
  align-items:center;
  width:calc(80px*var(--scale));
  height:calc(80px*var(--scale))
}
.NavItem:hover,
.WebWorks~.Nav .Nav-webWorks,
.About~.Nav .Nav-about,
.CoolThing~.Nav .Nav-coolThing {
  z-index:1
}
.WebWorks~.Nav .Nav-webWorks a,
.About~.Nav .Nav-about a,
.CoolThing~.Nav .Nav-coolThing a {
  pointer-events:none
}
.NavItem a[target=_blank] {
  cursor:alias
}
.WebWorks~.Nav .Nav-webWorks,
.About~.Nav .Nav-about,
.CoolThing~.Nav .Nav-coolThing {
  cursor:url(./imgs/cursors/sparkles.png) 16 16,not-allowed
}
.NavItem-link {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  transition:transform .2s
}
.NavItem:hover .NavItem-link,
.WebWorks~.Nav .Nav-webWorks .NavItem-link,
.About~.Nav .Nav-about .NavItem-link,
.CoolThing~.Nav .Nav-coolThing .NavItem-link {
  transform:perspective(1000px) translateZ(200px)
}
.NavItem-image {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%
}
.NavItem-name {
  transition:1s ease-in-out;
  transition-property:font-size;
  display:block;
  color:#000;
  font-size:calc(1.3rem*var(--scale));
  text-shadow:pink 2px 0 2px;
  text-align:center;
  transition:opacity .2s,filter .2s
}
@media(max-width: 550px) {
  .NavItem-name {
    opacity:.5
  }
}
@media(min-width: 550px) {
  .NavItem-name {
    opacity:0;
    font-size:calc(2.5rem*var(--scale))
  }
}
.Nav-items:hover .NavItem-name {
  opacity:.5;
  filter:blur(0.5px)
}
.NavItem:hover .NavItem-name,
.WebWorks~.Nav .Nav-webWorks .NavItem-name,
.About~.Nav .Nav-about .NavItem-name,
.CoolThing~.Nav .Nav-coolThing .NavItem-name {
  opacity:1;
  filter:none
}
.Landing {
  display:flex;
  justify-content:center;
  align-items:center;
}
.Landing~.Nav {
  --scale: 2
}
.Landing~.Nav::before {
  opacity:1
}
@media(max-width: 550px) {
  .Landing~.Nav {
    justify-content:center
  }
  .Landing~.Nav .Nav-items {
    right:unset
  }
}
@media(min-width: 550px) {
  .Landing~.Nav .Nav-items {
    top:50%;
    right:50%
  }
  .Landing~.Nav .Nav-menu {
    margin-top:-50%;
    margin-left:50%
  }
}
.LandingTitle {
  position:relative;
  font-size:4rem
}
body {
  position:relative;
  height:100vh;
  line-height:1.2;
  background-attachment:fixed;
  z-index:0
}
.Page {
  background-color:#0077c8;
  background-image:url("./imgs/textures/caustic.jpg");
  background-blend-mode:luminosity;
  overflow:hidden;
  position:relative;
  min-height:100%;
  padding:15px 25px;
  font-size:18px;
  font-family:serif;
  z-index:0
}
@media(min-width: 550px) {
  .Page {
    padding:50px 50px;
  }
}