/* Global tags */
*
{
  margin:auto;
}

body
{
  font-family:Helvetica;
  margin:0px;
  background-image:url(images/background.gif);
  background-size:10em;
}

a
{
  color:inherit;
  text-decoration:inherit;
}

div
{
  margin:0px;
}

iframe
{
  display:block;
  width:100%;
  height:6em;
  border:0px;
  margin:0px;
}

h1
{
  font-size:2.75em;
  font-weight:bold;
}

h2
{
  font-size:1.75em;
}

h3
{
  font-style:italic;
  font-weight:bold;
}

button
{
  margin-top:0.5em;
  padding:0.25em;
  border-radius:0.5em;
  font-size:1.5em;
  cursor:pointer;
}

table, th, td
{
  padding:0.25em;
}

table
{
  border-spacing:5px;
  border:0px solid transparent;
  border-radius:1em;
  background-origin:border-box;
  filter:drop-shadow(20px 20px 6px rgba(0, 0, 0, 75%));
  margin-right:1em;
  margin-bottom:3em;
}

th, td
{
  background-color:rgb(251, 239, 252);
  padding: 1em;
}

hr
{
  margin:1em 0em 2em 0em;
  border:0px;
  clear:both;
  height:6px;
  border-radius:1em;
  background-origin:border-box;
  background-image:linear-gradient(to right, rgb(64, 128, 64), rgb(64, 64, 64), rgb(128, 64, 128));
  filter:drop-shadow(6px 6px 4px rgba(0, 0, 0, 75%));
}

/* Classes */
/* Margin and arrows for the nav buttons */
.navButton
{
  margin:2em 3em 1em 3em;
}

.arrow
{
  border:solid black;
  border-width:0 0.25em 0.25em 0;
  display:inline-block;
  padding:0.5em;
}

.right
{
  transform:rotate(-45deg);
}

.left
{
  transform:rotate(135deg);
}

.up
{
  transform:rotate(-135deg);
}

.down
{
  transform:rotate(45deg);
}

.flipY
{
  transform:translateY(-100%) rotate(180deg);
}

/* Float classes */
.rightSide
{
  float:right;
  clear:right;
}

.leftSide
{
  float:left;
  clear:left;
}

/* Font options and colors */
.bigFont
{
  font-size:1.25em;
}

.myGreen
{
  color:#1c7319;
}

.myPurple
{
  color:#452559;
}

.myBackgroundGreen
{
  background-image: linear-gradient(to top left, rgba(252, 252, 252, 100%), rgba(202, 202, 202, 100%), rgba(209, 242, 198, 100%));
}
.myBackgroundGreen:active
{
  background-image: linear-gradient(to right, rgba(209, 242, 198, 100%), rgba(209, 242, 198, 100%));
}
.myHoverGreen
{
  background-image: linear-gradient(to top left, rgba(202, 202, 202, 100%), rgba(209, 242, 198, 100%), rgba(209, 242, 198, 100%));
}

.myBackgroundPurple
{
  background-image: linear-gradient(to top right, rgba(252, 252, 252, 100%), rgba(202, 202, 202, 100%), rgba(251, 219, 252, 100%));
}
.myBackgroundPurple:active
{
  background-image: linear-gradient(to left, rgba(251, 219, 252, 100%), rgba(251, 219, 252, 100%));
}
.myHoverPurple
{
  background-image: linear-gradient(to top right, rgba(202, 202, 202, 100%), rgba(251, 219, 252, 100%), rgba(251, 219, 252, 100%));
}

.myBackgroundRainbow 
{
  background:linear-gradient(to top left, rgba(251, 202, 252, 100%), rgba(202, 202, 202, 100%), rgba(209, 242, 198, 100%));
}
.myBackgroundRainbow:active
{
  background:linear-gradient(to right, rgba(209, 242, 198, 100%), rgba(202, 202, 202, 100%), rgba(209, 242, 198, 100%));
}
.myHoverRainbow
{
  background-image:linear-gradient(to left, rgba(251, 202, 252, 100%), rgba(202, 202, 202, 100%), rgba(209, 242, 198, 100%));
}
.myLinkRainbow
{
  background:linear-gradient(to top right, rgba(251, 202, 252, 100%), rgba(202, 202, 202, 100%), rgba(209, 242, 198, 100%));
}

.myConicEpic
{
  background-image:conic-gradient(
    rgb(64, 64, 64) 35deg,
    rgb(128, 64, 128) 70deg,
    rgb(64, 64, 64) 90deg,
    rgb(64, 128, 64) 125deg,
    rgb(64, 64, 64) 180deg,
    rgb(128, 64, 128) 235deg,
    rgb(64, 64, 64) 270deg,
    rgb(64, 128, 64) 290deg,
    rgb(64, 64, 64) 325deg
    );
}

.myHoverFade
{
  opacity: 1;
  transition: opacity 0.5s;
  position: absolute;
  z-index: 1;
}
.myHoverFade:hover
{
  opacity: 0;
}
.myHoverFade:active
{
  opacity: 1;
}

@media screen and (max-width: 950px)
{
  .myBackgroundRainbow { display: none; } 
  .myHoverRainbow { background:linear-gradient(to top right, rgba(251, 202, 252, 100%), rgba(202, 202, 202, 100%), rgba(209, 242, 198, 100%)); }

  .myBackgroundGreen { display: none; } 
  .myBackgroundPurple { display: none; } 
} 

/* Items unique to my design */
.electronics
{
  position:absolute;
  z-index:-1;
}

.image
{
  filter:drop-shadow(20px 20px 4px rgba(0, 0, 0, 70%));
}

#divMaster
{
  width:960px;
  margin:auto;
  
}

#divMain
{
  background-color:rgba(251, 239, 252, 90%);
  border-radius:4em 6em 4em 6em;
  overflow:hidden;
  margin:1.5em 0em;
  padding:2em;
  display:block;
}