html,body {
    cursor: url('images/cursor.png'), default;
    overflow-x: hidden;
  width: 100%;
  height: 100%;
    background-image: url('https://media.discordapp.net/attachments/385553219302195200/1019040842746429501/unknown.png');
}

/* MASKS */

.starry {
    -webkit-mask-image: url(https://i.imgur.com/8r4Nx8e.png);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    width: 180px;
    height: auto
}

/* FONTS */

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

@font-face {
    font-family: "wayfarer";
    src: url("https://isnotanoctopus.neocities.org/fonts/JMH%20Cthulhumbus%20Arcade.otf")format("opentype");
}

/* TEXT FORMATTING */

a{
  color: #fff;
  text-decoration: none;
      cursor: url('https://isnotanoctopus.neocities.org/50954.png'), default;
}

a:hover{
  color: #49C458;
      cursor: url('https://isnotanoctopus.neocities.org/50954.png'), default;
}

h2 {
    color: #000;
    text-shadow: 1px 0 0 #49C458, 0 -1px 0 #49C458, 0 1px 0 #49C458, -1px 0 0 #49C458;
    font-family: "venice";
    font-size: 20px;
}

h3 {
    color: #000;
    text-shadow: 1px 0 0 #98DBB3, 0 -1px 0 #98DBB3, 0 1px 0 #98DBB3, -1px 0 0 #98DBB3;
    font-family: "venice";
    font-size: 15px;
}

/*  TITLES / SUBTITLES / HEADERS */

#title1 {
    font-size: 15px;
    color: #000;
    text-shadow: 1px 0 0 #49C458, 0 -1px 0 #49C458, 0 1px 0 #49C458, -1px 0 0 #49C458;
    z-index: 6;
    position: absolute;
    font-family: "wayfarer";
    margin-top: 400px;
    margin-left: 477px;
    animation: rock 7s infinite, glow 5s ease-in-out infinite alternate;
    transform: rotate(2deg);
}

@keyframes rock {
    0% {
        transform: rotate(2deg)
    }

    50% {
        transform: rotate(-2deg)
    }

    100% {
        transform: rotate(2deg)
    }
}

#title2 {
    font-size: 10px;
    color: #000;
    text-shadow: 1px 0 0 #8CDC96, 0 -1px 0 #8CDC96, 0 1px 0 #8CDC96, -1px 0 0 #8CDC96;
    z-index: 6;
    position: absolute;
    font-family: "wayfarer";
    margin-top: 440px;
    margin-left: 480px;
    animation: rock 7s infinite, glow 5s ease-in-out infinite;
    transform: rotate(2deg);
}

@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5;
    }

    70% {
        text-shadow: 0 0 3px, 0 0 3px, 0 0 3px, 0 03px, 0 0 3px, 0 0 3px, 0 0 3px;
    }

    75% {
        text-shadow: 0 0 10px #A3DCA5, 0 0 10px #A3DCA5, 0 0 10px #A3DCA5, 0 0 10px #A3DCA5, 0 0 10px #A3DCA5, 0 0 10px #A3DCA5, 0 0 10px #A3DCA5;
    }

    to {
        text-shadow: 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5, 0 0 3px #A3DCA5;
    }
}

/* IMAGE MASK(S) */

.froggymask {
    -webkit-mask-image: url(https://i.imgur.com/LxuN5HE.png);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    max-width: 150px;
    height: auto;
    border: 1px solid white;

}

.updatehead {
    position: absolute;
    margin-top: 525px;
    margin-left: 490px;
    z-index: 5;

}

.updatehead h2 {
    font-size: 25px;
    transform: rotate(-3deg);
}



/* HEADER IMAGE + FAUX-BG */

#headimage {
    margin-top: 0px;
    margin-left: 240px;
    overflow: visible;
    animation: float 5s infinite;
    position: absolute;
}

.img1 {
    max-width: 900px;
    position: absolute;
}

.img2 {
    max-width: 900px;
    opacity: 0;
    position: absolute;
}

.img2:hover {
    opacity: 1;
    background-image: url('https://cdn.discordapp.com/attachments/385553219302195200/1047347062313844786/giphy.gif');
    background-position: 30% 20%;
    background-repeat: no-repeat;
}

.faux {
    width: 100vw;
    height: 500px;
    margin-left: -.6%;
    margin-top: -10%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 20%);
    position: absolute;
}

@keyframes float {
    0% {
        transform: translatey(0px)
    }

    50% {
        transform: translatey(20px)
    }

    100% {
        transform: translatey(0px)
    }

}

/* SIDEBAR + INFO CONTENT */

#side {
    width: 200px;
    margin-top: 530px;
    margin-left: 200px;
    position: absolute;
    color: #fff;
    font-size: 12px;
    background: #000;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #49C458;
    box-shadow: 0px 0px 10px 1px #A3DCA5;
    z-index: 3;
}

#side p {
    text-indent: 12px;
    magin-left: 0px;
    padding: 5px;
}

/* STATUS + UPDATES */

#updates {
    width: 450px;
    height: 140px;
    padding: 10px;
    margin-top: 530px;
    margin-left: 450px;
    border-radius: 10px;
    position: absolute;
    color: #fff;
    font-size: 15px;
    background: #000;
    border: 1px solid #49C458;
    box-shadow: 0px 0px 10px 1px #A3DCA5;
    text-indent: 20px;
    z-index: 2;
}

#tba {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin-top: 720px;
    margin-left: 450px;
    border-radius: 10px;
    position: absolute;
    color: #fff;
    font-size: 12px;
    background: #000;
    border: 1px solid #49C458;
    box-shadow: 0px 0px 10px 1px #A3DCA5;
    z-index: 2;
}

#status {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin-top: 720px;
    margin-left: 700px;
    border-radius: 10px;
    position: absolute;
    color: #fff;
    font-size: 12px;
    background: #000;
    border: 1px solid #49C458;
    box-shadow: 0px 0px 10px 1px #A3DCA5;
    z-index: 2;
}

#linkbox{
      width: 200px;
    margin-top: 530px;
    margin-left: 940px;
    position: absolute;
    color: #fff;
    font-size: 12px;
    background: #000;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #49C458;
    box-shadow: 0px 0px 10px 1px #A3DCA5;
    z-index: 3;
}

.gifypetcontainer{
  padding: 15px;
  background: #000;
  border: 1px solid #49C458;
  box-shadow: 0px 0px 10px 1px #A3DCA5;
  border-radius: 10px;
  width: 440px;
  margin-left: 450px;
  margin-top: 1370px;
  position: absolute;

}

t{
  font-size: 10px;
  color: #A3DCA5;
}

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

.buttonlink {
    font-size: 12px;
    font-family: "Venice";
    background-color: #000;
    color: white;
    padding: 5px 4px;
    text-align: center;
    display: inline-block;
    text-decoration: none;

    margin-top: 5px;
    width: 80px;
  border: 1px solid #49C458;
  box-shadow: 0px 0px 10px 1px #A3DCA5;

    transition: background-color 1s ease-out;
    transition: transform .2s ease-in-out
}


.buttonlink:hover{
    background-color: #4CAF50;
  color: #fff;
  transform: rotate(-10deg);
    box-shadow: 0px 0px 15px 3px #A3DCA5;
}


.commentcontainer{
  padding: 15px;
  background: #000;
  border: 1px solid #49C458;
  box-shadow: 0px 0px 10px 1px #A3DCA5;
  border-radius: 10px;
  margin-left: 450px;
  margin-top: 960px;
  position: absolute;
}

.changelog{
    padding: 15px;
  background: #000;
  border: 1px solid #49C458;
  box-shadow: 0px 0px 10px 1px #A3DCA5;
  border-radius: 10px;
  margin-left: 700px;
  width: 190px;
  margin-top: 960px;
  height: 360px;
  position: absolute;
  color: #fff;
  font-size: 12px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

/* BUTTONS */

/* web buttons */
#buttons{
  width: 190px;
  margin-top: 990px;
  margin-left: 200px;
  height: 30;
  padding:15px;
  position: Absolute;
}

#inspobox{
  position:absolute; 
  font-family:'wayfarer';
  margin-top: 960px;
  margin-left: 200px;
  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: "venice";
}

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

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


#stampsbox{
  position:absolute; 
  font-family:'venice';
  margin-top:1045px;
  margin-left:200px; 
  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: 190px;
  margin-top: 1050px;
  margin-left: 200px;
  height: 30;
  padding:15px;
  position: Absolute;
}

#stamps3{
  width: 190px;
  margin-top: 1123px;
  margin-left: 200px;
  height: 30;
  padding:15px;
  position: Absolute;
}

#stamps4{
  width: 190px;
  margin-top: 1200px;
  margin-left: 200px;
  height: 30;
  padding:15px;
  position: Absolute;
}

/* end stamps */