@import "gruvbox.css";

@font-face {
	font-family: 'Geist';
	src: url('/assets/fonts/Geist-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Geist Black';
	src: url('/assets/fonts/Geist-Black.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Geist Mono';
	src: url('/assets/fonts/GeistMonoNerdFont-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

body {
    font-family: Geist, sans-serif;
}

code {
	font-family: Geist Mono, monospace;
}

div.container {
    margin: 0 auto;
	zoom: 1.4;
}

div.content {
    width: 50%;
    height: auto;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 1440px) {
    div.content {
        width: 60%;
        height: auto;
        margin: 0 auto;
        position: relative;
    }
	div.container {
    	margin: 0 auto;
		zoom: 1.3
	}
}

@media screen and (max-width: 1080px) {
    div.content {
        width: 80%;
        height: auto;
        margin: 0 auto;
        position: relative;
    }
	div.container {
    	margin: 0 auto;
		zoom: 1.2
	}
}

@media screen and (max-width: 768px) {
    div.content {
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: relative;
    }
	div.container {
    	margin: 0 auto;
		zoom: 1.1
	}
}

body {
    //background-color: #242424;
    background-color: #000000;
    color: #E7D7AD;
}

pre {
    background-color:#32302F;
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    white-space: pre-wrap;
    white-space: pre-wrap;
}

a {
	color: #E7D7AD;
	text-decoration: none;
	border-bottom: 2px solid #FABD2F;
	border-radius: 1px;
}

a:hover {
	color: #000000;
	background: #FABD2F;
	text-decoration: none;
	border-bottom: 2px solid #FABD2F;
	border-radius: 1px;

	img {
	filter: brightness(0) saturate(100%);
	}
}

img {
    max-width:70%;
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

::selection {
  color: #000000;
  background: #FABD2F;
}

span.growshrink {
  display: inline-block;
  animation-duration: 5s;
  animation-name: grow-shrink;
  animation-iteration-count: infinite;
}

@keyframes grow-shrink {
  25%,
  75% {
    scale: 100%;
  }

  50% {
    scale: 110%;
    color: #FABD2F;
  }
}

body {
	font-size: 14px
}

h1 {
	font-size: 24px
}

hr {
	color: #32302F;
	border-color: #32302F
}

blockquote {
    /* background-color:#32302F; */
	color: #A89984;
	font-style: italic;
	margin: 20px 0 30px;
  	padding-left: 20px;
  	border-left: 3px solid #A89984;
    max-width:90%;
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

figcaption {
	color: #A89984;
	text-align: center;
    max-width:70%;
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
	font-size: 12px;
	font-style: italic;
	padding-top: 10px
}
