/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import url(https://fonts.googleapis.com/css?family=Kiwi+Maru);

html {
  background-image: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(17, 0, 255));
  padding-top:2vw;

  cursor: url("cursors/point.png"), auto;
}

html:active
{
  cursor: url("cursors/point_low.png"), auto;
}

/*rgb(11, 0, 95), rgb(17, 0, 255);
rgb(0, 81, 170), rgb(0, 3, 36)
rgb(0, 3, 36), rgb(0, 81, 170)
*/


body {
  background-image: linear-gradient(to bottom ,rgb(56, 56, 232), rgb(0, 0, 128));
  color: #eeeeee;
  font-size: 20px;
  padding-left: 40px;
  padding-top:20px;
  outline: 6px ridge rgba(255, 255, 255, 1);border-radius: 12px;
  border: 3px solid rgba(32, 80, 136, 1);
  display:inline-block;
  /*margin-left: 10vw;*/
  z-index: 0;
  position:static;
}

a
{
  cursor: url("cursors/hand_open.png"), auto;
}

a:active
{
  cursor: url("cursors/grab.png"), auto;
}

a:visited {
 color: yellow;
}

a:link{
  color:white;
}

h1, h2, h3 {
  font-family: "Noto Sans", sans-serif;
  text-shadow: 3px 3px 8px black;
  z-index: 6;
  position:relative;
}

h4
{
  display:block;
  font-size:24px;
  background-image: linear-gradient(to right ,rgba(145, 0, 0, 1), rgba(189, 189, 0, 0.5));
  font-family: "Noto Sans", sans-serif;
  text-shadow: 3px 3px 8px black;
  width:12vw;
  left:-1vw;
  margin:30px;
  z-index: 7;
}

/*outline: 8px ridge rgba(183, 183, 183, 0.958);border-radius: 12px;*/
p{
  font-family: "Kiwi Maru", serif;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  outline: 6px ridge rgba(255, 255, 255, 1);border-radius: 6px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 20px;
  text-shadow: 1px 1px 4px black;
  margin:12px;
  line-height: 1.6;
  display:inline-block;
  position:relative;
  z-index: 6;

}
@media only screen and (max-width:900px)
{
  p
  {
    max-width: 66vw;
  }
  html
  {
    padding-left:1vw;
  }
  body
  {
    width:80vw;
  }
}

@media only screen and (min-width:901px)
{
  p
  {
    max-width: 33vw;
  }
  html{
    padding-left:7.5vw;
  }
  body
  {
    width: 80vw;
  }
}

img {
    max-width: 100%;
    max-height:75vh;
    height: auto;
    width:auto;
} 
iframe
{
  max-width:100%;
}
td
{
  text-align:end;
  padding:10px;
}

table, th, tr, td
{
  border: 2px solid white;
  border-collapse: collapse;
}

button
{
  font-family: "Kiwi Maru", serif;
  padding: 5px 8px;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  outline: 1px ridge rgb(158, 158, 158);border-radius: 6px;
  margin: 3px;
  text-shadow: 1px 1px 4px black;
}

#currentImage
{
  display:inline-block;
  margin:20px;
}