/* inspired by Repth: theme 12 [https://repth.neocities.org/theme12] and Frutiger Aero at CARI */
/* BASIC TEXT FILE */

/* GOAL: to get up a text-based blogpost asap, with an elegant and traditional look */

* {
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(150, 221, 243, 0.8) 100%), url("y2k.jpg"); 
  background-position: cover;
  background-blend-mode: hue;
  background-attachment: fixed;
  background-size: cover;
  cursor: crosshair;
}

/* background-size: 100% 100%;
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
background-image: radial-gradient(18% 28% at 24% 50%, #CEFAFFFF 7%, #073AFF00 100%),radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, #073AFF00 100%),radial-gradient(70% 53% at 36% 76%, #73F2FFFF 0%, #073AFF00 100%),radial-gradient(42% 53% at 15% 94%, #FFFFFFFF 7%, #073AFF00 100%),radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%, #073AFF00 100%),radial-gradient(18% 28% at 35% 87%, #FFFFFFFF 7%, #073AFF00 100%),radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%),radial-gradient(21% 37% at 72% 23%, #D3FF6D9C 24%, #073AFF00 100%),radial-gradient(35% 56% at 91% 74%, #8A4FFFF5 9%, #073AFF00 100%),radial-gradient(74% 86% at 67% 38%, #6DFFAEF5 24%, #073AFF00 100%),linear-gradient(125deg, #4EB5FFFF 1%, #4C00FCFF 100%); */


article {
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
  padding:15px;
}

section {
  border: 1px solid pink;
  background-color:#fcf9f0; 
  border-radius: 10px;
  margin-bottom: 4em;
  /* From https://css.glass 
background: rgba(255, 255, 255, 0.83);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.3px);
-webkit-backdrop-filter: blur(6.3px);
border: 1px solid rgba(255, 255, 255, 0.83); */
}

section p {
  padding-left: 2em;
  padding-right: 2em;
}

.smol-sidebar {
  display: grid;
  grid-template-columns: fit-content(20ch) minmax(min(50vw, 30ch), 1fr);
}

p, ul,ol {
  font-size: 0.9em;
  color: #333333;
  font-family: 'Source Sans Pro', sans-serif;
}

h1, h2 {
  background-image: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
  border-radius: 10px;
  margin-top: 0;
  padding-left: 1em;
  color: white;
}

/* TEXT TYPES */

section h1, h1 { /*h1s inside sections behave oddly so you must set their size explicitly */
  font-size: 3em;
  font-family: 'Bruno Ace', cursive;
  color: white;
}

h2, h4, h5, h6 {
  font-family: 'Bruno Ace', cursive;
  font-weight: normal;
  color: white;
}


h3, h4 {
  font-size: 1.25em;
  font-variant-caps: small-caps; 
  color: black;
  text-align: center;
}

img, figure {
  max-width:60ch;
  margin-left: auto;
  margin-right: auto;
 
}

a {
  color: blue;
  text-decoration: underline; 
  font-family: 'Bruno Ace', cursive;
  font-size: 0.8em;
}


/* LISTS */

ul,ol {
  margin-left: 2em;
  margin-right: 2em;
}

ul li::marker {
  content: '🢒 ';
  font-size: 1.5em;
  }

li {
  margin-bottom: 2px;
}

dl {
	max-width:60ch;
	margin-left: auto;
	margin-right: auto;
}

/* Blockquotes */

blockquote p {
  font-family: 'Libre Baskerville';
  font-size: 0.8em;
}

blockquote cite {
  font-weight: bold;
  text-align: right;
  margin-top: 0.5em;
}

blockquote {
  margin: 2.5em;
}


/* FANCY QUOTES */

blockquote {
  border:none;
}

blockquote:before{
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    margin-bottom: 1em;
    border-bottom: 5px double black; 
}

blockquote:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 50%; 
    padding-top: 1em;
    border-bottom: 5px double black; 
}

/* Attractive Quotes */

q::before {
  content: "‘"
}

q::after {
  content: "’"
}

q {
  font-style: italic;
}

  /* Title of a book or film */

q-t, cite, dt {
  text-decoration: underline dotted orangered;
  font-variant-caps: small-caps;
}
/* Admonitions */

/* from http://boundedinfinity.github.io/2017/09/admonitions-in-css/ */

ad-monition {
  display: block;
  padding: 15px;
  margin-bottom: 21px;
  border-left: 10px solid transparent;
}

ad-monition h4 {
  margin: 0;
  text-transform: uppercase;
  padding-left: 3px;
  border: 1px solid;
  border-style: hidden hidden solid;
}

ad-monition p {
  padding-left: .75em;
  padding-right: .75em;
  padding-top: 0.5em;
  margin-left: 0;
  border-left: 0;
  border-top: 0;
  min-height: 0;
}

.hint {
  border-color: olive;
  background-color: #f6fffe;
}

.hint h4 {
  color: olive;
  border-color: olive;
}

.note {
  border-color: orangered;
  background-color: #fffeec;
}

.note h4 {
  color: orangered;
  border-color: orangered;
}

/*
.tip {
  border-color: blue;
  background-color: #f6fcff;
}

.tip .title {
  color: blue;
  border-color: blue;
}


.important {
  border-color: red;
  background-color: #fffbfb;
}

.important .title {
  color: red;
  border-color: red;
}
*/