@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap');

/* SELECTION */

::-moz-selection { 
  color: red;
  background: white;
}

::selection {
  color: red;
  background: white;
}

/* GENERAL */

html, body {
  background-color: black;
  color: white;
  text-align: center;
  margin: 1rem;
  padding: 0 15%;
  font-family: 'IBM Plex Mono', monospace;
}

@media screen and (max-width: 767px) {
  html, body {
    margin: 0;
    padding: 0 2vw 2vw 2vw;
  }
}

a {color: red;text-decoration: none;}
a:hover {color: white;}

hr {
border: 1px solid red;
}

.cifras {
  padding: 1rem 0 1rem 0;
  text-transform: uppercase;
}

/* CORNERS */

.info {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
}
  
  .colophon {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
  }

/* BUTTON */

button {
  background-color: transparent;
  border: 1px red solid;
  color: white;
  margin: 1rem 2rem;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
}

button:hover {
  background-color: transparent;
  border: 1px white solid;
  color: red;
}

/* SCROLL BAR */

::-webkit-scrollbar {
  width: 0px;
  display: none;
}

::-webkit-scrollbar-track {
  background: transparent; 
}
 
::-webkit-scrollbar-thumb {
  background: transparent; 
}

::-webkit-scrollbar-thumb:hover {
  background: transparent; 
}

.scroller {
  overflow-y: scroll;
  scrollbar-color: transparent red;
}

/* LOADING */

body {
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
	   -moz-animation: fadein 1s; /* Firefox < 16 */
		-ms-animation: fadein 1s; /* Internet Explorer */
		 -o-animation: fadein 1s; /* Opera < 12.1 */
			animation: fadein 1s;
  }
  
  @keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }
  
  /* Firefox < 16 */
  @-moz-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }
  
  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }
  
  /* Internet Explorer */
  @-ms-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }
  
  /* Opera < 12.1 */
  @-o-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }