/*Note: this CSS is ugly and coded as fast as I can, just to validate the idea. I didn't figure out why @apply doesn't work.
* A number of !important is actually necessary because we are overriding the style imposed by tailwind typography.
* */

/* @import "tailwindcss"; */

.btn {
  @apply rounded border border-gray-300;
}

.card > h4 {
    margin-top: 10px !important;

}
.card {
    border: 2px solid #1aa78280; /*left color of the logo*/
    border-radius: 10px;
}

/* Border types with the 2 right colors of the logo gradient */

.border1 {
    border: 2px solid #1ccd92;
    border-radius: 10px;
}
.border2 {
    border: 2px solid #20a8c3;
    border-radius: 10px;
}

/* Use strong marker as a way to make it colored */
h2 strong, h3 strong {
    color: #1aac84 !important;
}

/* Use em marker as a way to make it colored */
h2 em, h3 em {
    color: #1fb5b2 !important;
    font-style: normal;
}

#delibaylogo {
    max-width: 400px;
}

/* To keep the style of logo on old.md */
#olddelibaylogo {
    display: inline;
    max-width: 200px;
}

.nicecode-big {
    width: 100%;
    max-width: 1100px !important;
    border: 1px gray solid;
    padding: 10px;
    border-radius: 10px;
}

.nicecode {
    width: 100%;
    max-width: 700px;
    border: 1px gray solid;
    padding: 10px;
    border-radius: 10px;
}

.prose .mockup {
    width: 100%;
    max-width: 1000px;
}
.prose .mockup-big {
    width: 100%;
    max-width: 1100px;
}

.prose img {
    width: 100%;
    max-width: 800px;
}

.prose img {
    margin: 0;
}

.prose h1 {

		background: linear-gradient(to right, #1aa782 0%, #1ccd92 36%, #20a8c3 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
    /*To make the gradient adapt to length of heading but wrap on mobile*/
		width: fit-content;
    max-width: 100%;

    padding-bottom: 10px;
    margin-bottom: 10px;
}

.gradient, h2 {
		background: linear-gradient(to right, #1aa782 0%, #1ccd92 36%, #20a8c3 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
    /*To make the gradient adapt to length of heading but wrap on mobile*/
		width: fit-content;
    max-width: 100%;
}

.bloc h3, .bloc p {
    margin: 0
}

label {
    margin-right: 20px;
    display: block;
    width: 100%;
}

input, textarea {
    margin-bottom: 10px;
    width: 100%;
    padding: 5px;
}


/*Remove Tailwind typography's double quotes around quotes block */
blockquote p::before, blockquote p::after {
	content: none !important;
}