/* fonts */

@font-face {
  font-family: "wangi";
  src: url("https://isnotanoctopus.neocities.org/fonts/Wangi-vmYRO.otf")format("opentype");
}

@font-face {
  font-family: "wayfarer";
  src: url("https://isnotanoctopus.neocities.org/fonts/wayfarers-toy-box.ttf")format("truetype");
}

/* end of fonts*/

/* frilled image border */
.mono {
border-width:12px;
border-style:solid;
border-image: url("https://i.imgur.com/Kh6qtcn.png") 11 fill round;
}

/* end of frilled image border*/

/* text styling */

a{
  color: #4CAF50;
  text-decoration: none;
}

a:hover{
  color: #fff;
  text-decoration: none;
}


h1 {
    color: #000;
    text-shadow: 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff;
    font-family: 'Ranga', cursive;
    text-align: center;
  font-size: 20px;
}

h2{
    color: #007B0F;
    text-shadow: 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff;
    font-family: 'Ranga', cursive;
    text-align: center;
}

h3 {
    color: #007B0F;
    text-shadow: 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff;
    text-transform: uppercase;
}

.otherlinks t {
    color: #808080;
    text-transform: uppercase;
    font-size:5px;
    font-family: "wayfarer";
}

#inspo h3{
  font-family: "wayfarer";
}

/* my boxes */

.floatingbanner{
  font-size: 20px;
}

.header{
  font-size: 40px;
  margin-top: 130px;
  margin-left: 280px;
  position: absolute;
  transform: rotate(-15deg);
  z-index: 10;
  font-family: "wangi";
}

.subheader{
  font-size: 15px;
  margin-top: 270px;
  margin-left: 280px;
  position: absolute;
  transform: rotate(-15deg);
  z-index: 10;
  font-family: "ranga";
}

.subheader2{
  font-size: 15px;
  margin-top: 800px;
  margin-left: 280px;
  position: absolute;
  transform: rotate(4deg);
  z-index: 10;
  font-family: "ranga";
}

.infobox{
  width: 200px;
  border: 1px solid white;
  border-radius: 10px;
  background: #000;
  color: #fff;
  padding: 15px;
  margin-top: 250px;
  margin-left: 350px;
  position: absolute;
  font-size: 13px;
  text-indent: 10px;
      z-index: 5;
}

.artbox{
  width: 400px;
  height: 650px;
  margin-top: 250px;
  margin-left: 620px;
  overflow-y: hidden;
  overflow-x: hidden;
  border: 1px solid white;
  background: #000;
  padding: 15px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 0px;
  position: absolute;
  z-index: 5;
}

.latestjournal{
  width: 400px;
  height:200px;
  margin-top: 250px;
  margin-left: 1070px;
  position: Absolute;
  background: #000;
  color: #fff;
  border: solid 1px white;
  border-radius: 10px;
  font-size: 12px;
  padding: 15px;
  text-indent: 20px;
  z-index: 5;
}

.latestjournal h1{
  text-align:left;
  margin-left:-15px;
}

.updates{
  width: 200px;
  margin-left: 1070px;
  margin-top: 500px;
  position: absolute;
  color: #fff;
  background: #000;
  padding: 15px;
  border: 1px solid white;
  border-radius: 10px;
  font-size: 12px;
  z-index: 5;
}

.changelog{
  width: 150px;
  height: 400px;
  overflow-y:scroll;
  margin-left: 1320px;
  margin-top: 500px;
  position: absolute;
  color: #fff;
  background: #000;
  padding: 15px;
  border: 1px solid white;
  border-radius: 10px;
  font-size: 12px;
  z-index: 5;
}

.soontba{
    width: 200px;
    height:180px;
  margin-left: 1070px;
  margin-top: 720px;
  position: absolute;
  color: #fff;
  background: #000;
  padding: 15px;
  border: 1px solid white;
  border-radius: 10px;
  font-size: 12px;
  z-index: 5;
}

.gifypetcontainer{
  padding: 15px;
  background: #000;
  border: 1px solid white;
  border-radius: 10px;
  margin-left: 620px;
  margin-top: 1215px;
  position: absolute;
}


.commentcontainer{
    padding: 15px;
  background: #000;
  border: 1px solid white;
  border-radius: 10px;
  margin-left: 350px;
  margin-top: 860px;
  position: absolute;
}

#buttons{
  width: 300px;
  margin-top: 940px;
  margin-left: 630px;
  height: 30;
  padding:15px;
  position: Absolute;
}


.otherlinks{
  padding: 20px;
  width: 480px;
  background: #000;
  color: #fff;
  border: 1px solid white;
  border-radius: 10px;
  margin-left: 980px;
  margin-top: 940px;
  position: absolute;
  font-size: 16px;
  column-count: 2;
  column-gap: 50px;
  column-fill: balance;
  line-height: 25px;
}

.otherlinks h3{
  font-family: "wayfarer";
}

/* end of my boxes */
/* marquee */

.marqueebox{
  width: 900px;
  height: 50px;
  margin-top: 180px;
  margin-left: 600px;
  overflow-y: hidden;
  overflow-x: hidden;
  background: linear-gradient(to right, 
                    rgba(0,0,0, 0), 
                    rgba(0,0,0, 1) 20%);
  border-top: solid 1px white;
  border-bottom:  solid white 1px;
  position: absolute;
  
}

.marquee{
  width:1500px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.marquee p{
   -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: marquee 30s linear infinite;
 -webkit-animation: marquee 30s linear infinite;
 animation: marquee 30s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes marquee {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

/* end of marquee */
/* web buttons */

#inspobox{
  position:absolute; 
  font-family:'wayfarer';
  margin-top:920px;
  margin-left:700px; 
  z-index:10; 
  transform:rotate(-4deg);
  
}

#inspo:after {
	content: "";
	animation: spin 5s infinite;
    color: #007B0F;
    text-shadow: 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff;
    text-transform: uppercase;
    font-family: "wayfarer";
}

@keyframes spin {
  0% { content:"Inspirations !";}
  33%{ content: "Cool places !"; }
  66%{ content: "Resources !"; }
  100% { content:"Inspirations !";}
}

/* end web buttons */
/* stamps */


#stampsbox{
  position:absolute; 
  font-family:'wayfarer';
  margin-top:985px;
  margin-left:700px; 
  z-index:10; 
  transform:rotate(-4deg);
  
}

#stamps {
    color: #007B0F;
    text-shadow: 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff;
    text-transform: uppercase;
    font-family: "wayfarer";
}

#stamps2{
  width: 300px;
  margin-top: 1010px;
  margin-left: 630px;
  height: 30;
  padding:15px;
  position: Absolute;
}

#stamps3{
  width: 300px;
  margin-top: 1073px;
  margin-left: 630px;
  height: 30;
  padding:15px;
  position: Absolute;
}

#stamps4{
  width: 300px;
  margin-top: 1140px;
  margin-left: 630px;
  height: 30;
  padding:15px;
  position: Absolute;
}

/* end stamps */

/* buttons */

.buttonsidebar {
    color: #ffff;
    margin-top: 400px;
    margin-left: 200px;
    overflow-x: visible;
    font-family: "MS Sans Serif";
    text-align: left;
    position: absolute;
    padding: 10px;
    z-index: 0;

}

.button {
      font-size: 10px;
    background-color: #4CAF50;
    color: white;
    padding: 5px 4px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    text-align: left;
    padding: 10px;
    margin-top: 5px;
    width: 300px;
    border: solid 1px;
    color: white;
    transition: background-color 1s ease-out;
    transition: transform .2s ease-in-out


}

.button:hover{
    background-color: #000;
  transform: translatex(-30px);
}


.socialsidebar {
    font-size: 15px;
    color: #ffff;
    margin-top: 300px;
    margin-left: 1300px;
    overflow-x: visible;
    font-family: "MS Sans Serif";
    text-align: right;
    position: absolute;
    padding: 10px;
    z-index: 0;

}

.button2 {
    background-color: #4CAF50;
    color: white;
    padding: 5px 4px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    font-size: 10px;
    text-align: right;
    padding: 10px;
    margin-top: 5px;
    width: 300px;
    border: solid 1px;
    color: white;
    transition: background-color 1s ease-out;
    transition: transform .2s ease-in-out


}

.button2:hover{
    background-color: #000;
  transform: translatex(30px);
}



/* end of buttons */
/* website credit */
.credit{
  color: #fff;
  margin-top: 1600px;
  padding:70px;
  margin-left: 650px;
  position: absolute;
}

/* floating images */

.img1 {
   position: absolute;
   margin-top: 70px;
   margin-left: 80px;
   transform: rotate(-30deg);
   z-index: 9;
}

.img2{
  position: absolute;
  margin-top: 720px;
  margin-left: 540px;
  z-index: 10;
}
/* background image */

body {
    background-image: url('https://media.discordapp.net/attachments/385553219302195200/1019040842746429501/unknown.png');
}