/*
[website] https://www.nerdbude.com
[mail] post@nerdbude.com
[mastodon] @0x17@corteximplant.com
[github] https://www.github.com/nerdbude
*/
@font-face {
   font-family: 'din_condensed';
   src: url('/fonts/D-DINCondensed.woff') format("woff"),
        url('/fonts/D-DINCondensed.woff2') format("woff2");
}

@media (max-width: 1024px) {
	body {
		width: 95%;
		font-size: 18px;
		}
	h1 { font-size: 28px; }
  h2, h3 { font-size: 20px; }

  .mockup {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
body {
    width: 94%;
    margin: 15px auto;
    padding: 15px;
    border-radius: 15px;
    font-size: 16px;
  }

  h1 { font-size: 24px; }
  h2, h3 { font-size: 18px; }

  p {
    margin: 0 0 15px 0;
  }

  .men-button {
    display: block;
    margin: 10px 0;
    text-align: center;
  }

  img {
    max-width: 100%;
  }

  .mockup {
    max-width: 100%;
    margin: 0 auto;
  }

  #cssyn {
    width: 100%;
  }
}

@media (max-width: 480px) {

  body {
    font-size: 15px;
    padding: 12px;
  }

  h1 { font-size: 20px; }
  h2, h3 { font-size: 16px; }
}


body {
  font-family: 'din_condensed';
  max-width: 1200px;
  width: 92%;
  color: #d7d7d7;
  font-size: 20px;
  font-weight: 100;
  background-color: #282A36;
  min-height: 100%;
  margin: 20px auto; 
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 8px 0 #282a36;

 -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

html {
  background-image: url("/img/bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#content {
  margin-left: 0;
  margin-right: 0;
}

.men-button {
  background: linear-gradient(135deg, #bd93f9, #ff79c6);
  border: none;
  text-decoration: none;
  color: #0f0f0f;
  margin: 0 5px 0 5px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 6px 20px rgba(189, 147, 249, 0.25);
}

.men-button:hover {
  background: linear-gradient(135deg, #bd93f9, #ff79c6);
}

}

pre {
  padding: 0;
  margin: 0 0 0px 0;
}

ul {
  padding: 0;
}

h1 {font-size: 36px; color: #ff79c6; background-color: #282a36; font-weight: 100; text-align: center;}
h2 {font-size: 22px; color: #ff79c6; background-color: #282a36; font-weight: 100; text-align: center;}
h3 {font-size: 22px; color: #ff79c6; background-color: #282a36; font-weight: 100; text-align: center;}

span {
  padding: 0;
  margin: 0;
}

b {
color: #F1FA8C;
}

a {
  /* text-decoration: underline; */
  color: #ff79c6;
  transition-duration: 0.2s;
  padding-top: 3px;
}

a.front {
  text-decoration: none;
  color: #d7d7d7;
  transition-duration: 0.2s;
  padding-top: 3px;}

a:hover {
  color: #272727;
  background-color: #ff79c6;
}

a.front:hover {
  color: #272727;
  background-color: #bd93f9;
}

a:active {
  color: #bd93f9;
}

a.front:active {
  color: #bd93f9;
}

p {
  padding: 0;
  margin:  0 5% 0 5%;
  text-align: justify;
}

img {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 0px;
  border-radius: 15px;
}

.mockup {
		max-width: 70%;
		margin-left: 5%;
		margin-right: 5%;
}

header {
  width: 100%;
  top: 0;
  background-color: #282a36;
  height: auto;
  padding-bottom: 10px;
  margin-bottom:10px;
  letter-spacing: 0px;
  border-bottom: 1px dashed #bd93f9;
}

th {
  text-align: left;
  font-weight: 100;
}

#content {
  margin-left: 15%;
  margin-right: 15%;
}

#footer {
  width: 100%;
  /* position: fixed; */
  bottom: 0;
  margin-bottom: 10px;
  z-index: 1;
  background-color: #272727;
}

#cssyn {
  background: transparent;
  padding: 15px 15px 15px 0px;
  margin: 0 0 2px 0;
  width: 70%;
  border-style: solid;
  border-color: #875fff;
  border-width: 1px;
  counter-reset: line;
  }

pre		{font-family: 'din_condensed';
		 padding-left: 15px;}

.label		{background-color: #875fff;
		 border-style: solid;
		 border-width: 1px;
		 border-color: #875fff;
		 padding-left: 15px;
		 padding-right: 15px;
		 color: #272727;
	 }


.unixshell 	{color: #87afd7; font-style: italic;}
.comment	{color: #8a8a8a;}
.url		{color: #00ffd7; font-style: italic; text-decoration: underline;}
.value		{color: #875fff;}
.header-file	{color: #afd75f;}
.selector	{color: #ff5f5f;}
.subselector	{color: #ffff5f;}
.unit		{color: #ff5f87;}

.tag            {color: #afd75f;}
.important      {margin-left: -18px;}
.link		{color: #afd75f; background: #272727;}
.subtitle       {display: inline-block; margin: 20px 0;}
.filter         {display:block; margin-bottom: 30px; margin-top: -20px;}
.description    {background: #272727; padding: 10px 0 10px 10px; margin-top: 0px;}

/* EPISODE GRID */
.episodegrid {
  display: grid;
}