/********************************************************************************************/
/* SITE-WIDE */
    @font-face{
     font-family:'Dayrom';
     src: url('/style/fonts/DAYROM.ttf');
    }
    
    @font-face{
     font-family:'Chomsky';
     src: url('/style/fonts/Chomsky.otf');
    }
    
    @font-face{
     font-family:'AktivGrotesk';
     src: url('/style/fonts/AktivGroteskW01-Regular.woff2');
    }
    

body {
        font-family: Dayrom;
        text-align: center;
        position: absolute;
        margin: 0;
        left: 20%;
        width: 60%;
        align-items: center;
        background-image: url("/img/background.jpg");
        padding-bottom: 3%;
}

h1, h2, h3, h4, h5 {
        font-family: Chomsky;
        font-size: 150%;
}

hr {
        border: 1px solid rgb(10,10,10); 
}

#content iframe {
        display: block;
}

#menu {
        padding-bottom: 1%;
        font-size: 125%;
}

#menu img {
        width: 100%;
}

#menulinks {
        padding: 0.5%;
        color: rgb(30,30,30);
        font-family: Chomsky;
        text-decoration: none;
        font-size: 200%;
}

#menulinks a {
        color: rgb(30,30,30);
        font-family: Chomsky;
        text-decoration: none;
}

#menulinks a:hover {
        color: rgb(90, 90, 90);
        text-decoration: underline;
        font-weight: bold;
        animation: big 0.3s forwards;
}

@keyframes big {
  from {font-size: 100%;}
  to {font-size: 110%;}
}

subtext {
        font-size: 12px;
        font-style: italic;
}

ul, ol {
        list-style-position: inside;
}

/********************************************************************************************/
#main div {
  margin: 5px; 
}

/* HEAVEN SEVEN MAG */

#heaven-seven {
  float:left;
  background-image: url('https://ruminationsnc.neocities.org/other/shitwelike/denim-2.png');
  width: 25%;
  padding: 2%;
  border-radius: 25px;
  color: white;
  background-color: black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border: 3px black;
}
@keyframes star-jitter {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(4px, -3px) rotate(3deg); }
  100% { transform: translate(-4px, 3px) rotate(3deg); }
  }
#star-home:hover {
  width: 100%;
  animation: star-jitter 0.2s steps(1) infinite;
}
#star-home img {
  width: 100%;
  animation: star-jitter 1s steps(1) infinite;
}

/* A THOUSAND PLATEAUS */

#a-thousand-plateaus {
  float:left;
  background-color: black;
  font-family: AktivGrotesk;
  padding-top: 4%;
  padding-bottom: 2%;
  padding-left: 8%;
  padding-right: 8%;
  border-radius: 15px;
  font-size: 80%;
  color: white;
}

#a-thousand-plateaus:hover {
  color: lightgrey;
  background-color: darkgrey;
}

/* MIDIS */
#midis {
  background-color: rgb(255,255,255);
  border-radius: 5px;
  padding: 2%;
  color:black;
  width:29%;
  font-size: 100%;
  font-family:"Courier New";
  font-weight: bold;
  float:left;
  margin: 1%;
  animation: movinaround 1s infinite linear;
}

#midis:hover {
  background-color: rgb(200,200,255);
  animation: movinaround 0.2s infinite linear;
}

@keyframes movinaround {
  0%   { transform: translate(0px, 0px)}
  25%  { transform: translate(3px, 0px)}
  50%  { transform: translate(3px, 3px)}
  75% { transform: translate(0px, 3px)}
  100% { transform: translate(0px, 0px)}
}

/* FIXATIONS */
#fixations {
  float:left;
  background-color: rgb(255,255,255);
  padding: 2%;
  color:black;
  width:34%;
}

#fixations:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

#fixations img {
  width:100%;
}

/* MOTOCROSSED */
#motocrossed {
  float:left;
  width:50%;
  animation: movinaround 0.8s infinite linear;
}

#motocrossed:hover {
    -webkit-filter: saturate(250%);
    filter: saturate(250%);
}

#motocrossed img {
  width:100%;
  border-radius: 15px;
}

/* MARBLE BLAST */
#marbleblast {
  float: right;
  width:25%;
}

#marbleblast img {
  width:100%;
  border-radius: 15px;
}

#marbleblast:hover img {
  animation: borderradius 1s;
}

@keyframes borderradius {
  0%   { border-radius: 15px;}
  50%  { border-radius: 60px; -webkit-filter: invert(100%); filter: invert(100%);}
  100% { border-radius: 15px;}
}

/* SUCHBEAUTIFULNEWS */
#suchbeautifulnews {
  width:25%;
}

#suchbeautifulnews:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

#suchbeautifulnews img {
  width:100%;
}

/* demonology and witchcraft */
#demonologyandwitchcraft {
  height: 219px;
   width: 469px;
  float: left;
  background-image: url('https://ruminationsnc.neocities.org/other/shitwelike/demonology%20and%20witchcraft.jpg');
  border-radius: 20px;
}

#demonologyandwitchcraft:hover {
    background-image: url('https://ruminationsnc.neocities.org/other/shitwelike/demonology%20and%20witchcraft%20hover.jpg');
}

#demonologyandwitchcraft img {
  width:100%;
}

/* hallogallo */
#hallogallo {
  width:15%;
  float:right;
}

#hallogallo:hover {
    -webkit-filter: sepia(1) hue-rotate(-50deg);
filter: sepia(1) hue-rotate(-50deg);
}

#hallogallo img {
  width:100%;
}

/* sects */
#sects {
  width:20%;
  display: inline-block;
}

#sects:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

#sects img {
  width:100%;
}

/* rateyourmusic */
#rateyourmusic {
  width:20%;
  display: inline-block;
}

#rateyourmusic:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

#rateyourmusic img {
  width:100%;
  border-radius: 25px;
}

/* friends& */
#friendsand {
  width:22%;
  float:left;
}

#friendsand:hover {
    -webkit-filter: invert(100%);
    width: 24%;
    animation: movinaround 0.1s infinite linear;
}

#friendsand img {
  width:100%;
}

/* memorycard */
#memorycard {
    float:left;
  width:22%;
}

#memorycard:hover {
    -webkit-filter: hue-rotate(100deg);
    filter: hue-rotate(100deg);
}

#memorycard img {
  width:100%;
}

/* judebird */
#judebird {
    float:left;
  width:24%;
}

#judebird:hover img {
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0%   { width: 100%;}
  50%  { width: 105%;}
  100% { width: 100%;}
}

#judebird img {
  width:100%;
}

/* monofeo */
#monofeo {
  float:left;
  width:48%;
}

#monofeo:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

#monofeo img {
  width:100%;
}

/* exit333 */
#exit333 {
    float:left;
  width:24%;
}

#exit333:hover {
    animation: hueshift 1s infinite;
}

@keyframes hueshift {
  0%   { filter: hue-rotate(0deg);}
  50%  { filter: hue-rotate(100deg);}
  100% { filter: hue-rotate(200deg);}
}

#exit333 img {
  width:100%;
}

/* hellowhirled */
#hellowhirled {
  float:left;
  width:24%;
}

#hellowhirled:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

#hellowhirled img {
  width:100%;
}

/* goodflyingbirds */
#goodflyingbirds {
  width:45%;
  display: inline-block;
}

#goodflyingbirds:hover {
    -webkit-filter: sepia(1) hue-rotate(-50deg);
filter: sepia(1) hue-rotate(-50deg);
}

#goodflyingbirds img {
  width:100%;
}


/********************************************************************************************/
/* MOBILE VIEW */
@media only screen and (max-width: 999.99px){
  
  @keyframes big {
  from {font-size: 200%;}
  to {font-size: 225%;}
}
  
  body {
        left: 5%;
        width: 90%;
        font-size: 125%
}

#menulinks a {
        font-size: 200%;
}
  
  #menu img {
        width: 100%;
}

  subtext {
        font-size: 12px;
        font-style: italic;
}

  #menulinks {
        font-size: 80%;
}

  
}