// Buttons
.button {
	margin-right: 10px;
    margin-bottom: 25px;
	@media only screen and (max-width: 600px) {
		margin: auto;
	}
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
    border-radius: 32px;
	text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
	border-radius: 10px;
	background: $background-color;
	box-shadow:  5px 5px 10px scale-color($background-color, $lightness: -35%),
             -5px -5px 10px scale-color($background-color, $lightness: +5%);

    &:hover {
		background: linear-gradient(145deg,
		scale-color($background-color, $lightness: -35%),
		scale-color($background-color, $lightness: +5%));

		box-shadow:  5px 5px 10px scale-color($background-color, $lightness: -35%),
        	-5px -5px 10px scale-color($background-color, $lightness: +5%);
    }
    &:active {
		background: linear-gradient(145deg,
		scale-color($background-color, $lightness: -35%),
		scale-color($background-color, $lightness: +5%));

		box-shadow:  5px 5px 10px scale-color($background-color, $lightness: -35%),
        	-5px -5px 10px scale-color($background-color, $lightness: +5%);
	}
}

a {
	color: $accent-color;
}

a:visited {
	color: $light-color;
}

ul, ol {
	color: #C3BAC6;
}

blockquote {
  	margin-left: 5mm;
  	padding-left: 2mm;
	color: scale-color($foreground-color, $lightness: -10%);
}

blockquote {
  border-left: 4px solid #F28FAD;
}

blockquote blockquote {
  border-left: 4px solid #F8BD96;
}

blockquote blockquote blockquote {
  border-left: 4px solid #FAE3B0;
}

blockquote blockquote blockquote blockquote {
  border-left: 4px solid #ABE9B3;
}

blockquote blockquote blockquote blockquote blockquote {
  border-left: 4px solid #B5E8E0;
}

blockquote blockquote blockquote blockquote blockquote blockquote {
  border-left: 4px solid #96CDFB;
}

blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
  border-left: 4px solid #DDB6F2;
}

code, pre {
	font-family: "Fira Code", monospace;
	overflow: auto;
	border-radius: 10px;
	padding: 10px;

	background: $background-color !important;
box-shadow: inset 5px 5px 10px scale-color($background-color, $lightness: -35%),
            inset -5px -5px 10px scale-color($background-color, $lightness: +5%);
	@media only screen and (min-width: 600px) {
		display: inline-block;
		max-width: 18cm;
	}
}

code {
	display: inline;
	font-size: 14px;
}

p code {
	border-radius: 5px;
	padding: 5px;
}

@media only screen and (max-width: 600px) {
	code {
		display: inline-block;
		max-width: 95%;
	}
}


h1 {
  font-size: 30px;
  font-weight: normal;
  border-bottom: 4px solid #F28FAD;
}

h2 {
  font-size: 25px;
  font-weight: normal;
  margin-top: 1cm;
  margin-bottom: 0;
  border-bottom: 2px solid #F8BD96;
}

h3 {
  font-size: 22px;
  font-weight: normal;
  margin-top: 1cm;
  margin-bottom: 0;
}

::selection {
	color: $background-color;
	background: $foreground-color;
}

.tags {
	font-size: 14px;
}