:root {
  --color-palette: 1;
  --color_1: black; /*UI background*/
  --color_2: black; /*TEXT*/
  --color_3: black; /*Background*/
  --mobile_position: -100vw;
}

body {
  margin: 0px;
  background: var(--color_3);
  transition: 0.25s;
  overflow-y: scroll;
  overflow-x: hidden;

  font-family: Russo One, Days One, Arial Black, serif-sans;
  text-decoration: none;
}

/*HEADER*/

#header {
  min-width: 100vw;
  height: 8vh;
  min-height: 60px;
  background-color: var(--color_1);
}

#logo {
  left: 40px;
  color: var(--color_2);
  font-size: 6vh;
  text-decoration: none;
}
  #logo:hover{
    opacity: 0.5;
  }

#theme_button { 
  margin-left: auto;
  transform: translate(-100%, 0%);
  color: var(--color_2);
  font-size: 6vh;
  text-decoration: none;
  cursor: pointer;
}
  #theme_button:hover{
    opacity: 0.5;
  }

#lh {
  background-color: none;
  color: var(--color_2);

  padding: 2vh;

  border-style: none;
  border-width: 0px;
  border-color: var(--color_1);

  text-decoration: none;
  font-size: 2vh;
}
   #lh:hover {
    background-color: var(--color_2);
    color: var(--color_1);
    scale: 1.5;
    z-index: 10;
   }

 
   div > a, div > span {
 display: inline-block;
}

 div > span {
  margin: 0 2px;
}

#mobile_menu {
  position: absolute;
  top: 0px;
  left: var(--mobile_position);
  height: 100vh;
  width: 100vw;
  background-color: var(--color_1);
  list-style-type: none;
  z-index: 10;
}

#mobile_menu_list {
  position: relative;

  text-decoration: none;
  font-size: 4vh;
  color: var(--color_2);

  display: inline-block;
  vertical-align: top;
  text-align: center;
}

/*BODY*/

#BodyContent {
  position: relative;
  top: 5vh;
  left: 10vw;
  width: 80%;
  display: inline-block;
  text-align: center;
}

div.blocks {
  border-width: 6px;
  border-color: var(--color_1);
  border-radius: 10px;
  border-style: solid;
  display: block;
  transition: 0.25s;
}

/*Cookie*/

#cookie-accept {
  position: sticky;
  bottom: 0px;
  
  display: flex;
  align-items: center;

  z-index: 100;

  width: 99vw;
  height: 20vh;

  font-size: 3vh;
  color: var(--color_2);

  background-color: var(--color_1);
}

#cookie-accept-button {
  background-color: var(--color_3);
  color: var(--color_2);

  padding: 2vh;
  bottom: 0px;
  margin-left: auto;
}

#cookie-accept-button:hover {
  background-color: var(--color_2);
  color: var(--color_3);

  cursor: pointer;
}

/*Main Page*/

#block_header {
  color: var(--color_2);
  font-size: 20px;
  background-color: var(--color_1);
}

#sticker {
  text-decoration: none;
  font-size: 2vh;
  color: black;

  margin: 10px;
  width: 30vh;
  height: 30vh;

  cursor: pointer;
}

#sticker:hover {
  scale: 1.1;
  transform: rotate(2deg);
  z-index: 10;
}

#technical_board {
  background-color: var(--color_1);

  font-size: 2vh;

  width: 70vw;

  border-image: url("/border.png") 85/1vh round;
}

/*Pics*/

#img_holder {
  margin-top: 2vh;
  margin: 10px;
  width: 30vh;
  border-radius: 10px;

  background-color: var(--color_1);
  color: var(--color_2);

  font-size: 2vh;
  text-decoration: none;

  cursor: pointer;
}

#img_holder:hover {
  scale: 1.05;
}

#img_holder_mini {
  position: relative;
  display: inline-block;
  vertical-align: top;

  top: 10px;
  width: 175px;
  margin-left: 2vw;
  border-radius: 5px;

  background-color: var(--color_1);
  color: var(--color_2);

  font-size: 13px;
}

#img {
  max-width: 100%;
  height: auto;
}

#pics_random {
  position: relative;
}

#big_button {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color_1);

  font-size: 3vh;
  color: var(--color_2);

  text-align: center;
  cursor: pointer;

  top: 10px;
  width: 40vw;
  height: 5vh;
  border-radius: 10px;
}

#big_button:hover {
  scale: 1.5;
}

/*Articles*/

#artcl_list {
  display: block;
  float: left;
  margin: 10px;
}

#random_artcl {
}

#in_list {
  background-color: var(--color_1);
  color: var(--color_2);
  font-size: 3vh;
  padding: 2px;
  border-color: var(--color_1);
  text-decoration: none;
}
   #in_list:hover {
    background-color: var(--color_2);
    background: var(--color_2);
    color: var(--color_1);
   }


#article-column, #ad {
  position: relative;
  display: inline-block;

  margin: 1vh;

  font-size: 2vh;
  color: var(--color_2);

  vertical-align: top;
}

#article-p {
  background-color: var(--color_1);
}

#article-pics {
  min-height: 20vh;
  min-width: 20vh;
}

#article-main-pic {
  min-height: 20vh;
  min-width: 30vw;
}

/*FOOTER*/

#footer {
  position: relative;
  top: 12vh;
  width: 100%;
  min-width: 1000px;
  height: 8%;
  min-height: 60px;

  background-color: gray;

  align-content: center;
}

#footer-logo {
  text-align: left;
  transform: translate(0%, 80%);
  line-height: 0.2;
}

#footer-columns {
  display: inline-block;
  vertical-align: top;

  padding: 10px;
  margin: 10px;

  text-decoration: none;
  color: white;
  font-size: 1.8vh;
}

#footer-lines {
  display: flex;
  flex-flow: column wrap;
  text-decoration: none;
  color: white;
}

/*BLOCKS*/

#BodyContent, #sticker, #img_holder, #technical_board {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

#logo, #theme_button, #lh, #header {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}

#header, #logo, #theme_button, #lh, #BodyContent, 
#block_header, #sticker, #img_holder, #img_holder_mini, 
#big_button, #in_list, #technical_board,
#mobile_menu, #mobile_menu_list,
#article-column, #article-p, #ad,
#cookie-accept, #cookie-accept-button {
  transition: 0.25s;
}