/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



/* This section defines all the fonts on our website, so the other CSS knows how to use them.  */
@font-face { /* Start defining a font face. */
  font-family: "Super Starfish"; /* Specify what the name of it is. */
  src:
    local("Super Starfish"), /* Use the copy local to the computer of whoever's looking at our website if there is one, */
    url("/fonts/Super Starfish.ttf") /* And if not, load the URL of the font. Since there's no "https://example.com" before "/fonts/Super Starfish", the URL it's loading from is implicitly "https://strawberry-sisters.neocities.org/fonts/Super Starfish.ttf" */
}
@font-face {
  font-family: "Blackbold";
  src:
    local("Blackbold"),
    url("/fonts/Blackbold.ttf"),
    url("/fonts/Blackbold.otf")
}
@font-face {
  font-family: "Lovely Bestie";
  src:
    local("Lovely Bestie"),
    url("/fonts/Lovely Bestie.ttf"),
    url("/fonts/Lovely Bestie.otf")
}
@font-face {
  font-family: "Crayon Libre";
  src:
    local("Crayon Libre"),
    url("/fonts/CrayonLibre.ttf")
}
@font-face {
  font-family: "Noir Lullaby";
  src:
    local("Noir Lullaby"),
    url("/fonts/NoirLullaby.otf")
}
@font-face {
  font-family: "Noir Lullaby Stamp";
  src:
    local("Noir Lullaby Stamp"),
    url("/fonts/NoirLullabyStamp.otf")
}


/* Body styling defines the root of the page. Lots of these things (like color, font family & size, etc) will be used as a default for child elements. */

body {
  background-color: #fcdef1;
  background-image: url(/pics/strawbs.png);
  background-repeat: space;
  background-attachment: fixed;
  color: black;
  font-family: Verdana;
  font-size: 1.1em;
}

/* comma separated lists mean "this, and this, and this"  */
header, footer, main {
  background-color: #fcfae3;
  border: 5px outset;
  border-radius: 15px;
  padding: 0px 40px;
  margin-bottom: 2em;
}
header, footer {
  width: 60vw;
  max-width: 60em;
}
header {
  text-align: center;
  margin-left: 10vw;
  margin-right: auto;
  border-color: #04d627;
  font-family: "Crayon Libre";
  color: #540326;
}

/* whereas space-separated lists mean "any x that is somewhere inside y" - in this case, any h1 inside a Header, no matter how far down inside other things it is. */
header h1 {
  font-variant-caps: all-small-caps;
  font-family: "Blackbold";
  font-size: 3rem;
}
header nav ul{
  margin-right: auto;
  margin-left: auto;
}
header nav li{
  display: inline-block;
  margin-right: 1rem;
  margin-left: 1rem;
}

footer {
  text-align: left;
  margin-left: auto;
  margin-right: 30vw;
  border-color: #a5090c;
  font-family: "Noir Lullaby Stamp";
}

main {
  margin-right: auto; /* it depends on the display mode, but usually margin-left and margin-right set to auto will float things into the center. there are other ways to center stuff though! */
  margin-left: auto;
  border-color: #fc0a0e;
  width: 80em;
  max-width: 90vw;
  display: flow-root;
}

/* this block will affect any "p" (paragraph) element directly inside of the main element, but NOT ones that are nested more than once. */
main>p {
} 

main figure {
  border-radius: 20px;
  border-width: 2px;
  border-color: black;
  background: white;
  display: flex; /* this is neat, ask me for an infodump/demonstration sometime or play with https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  flex-flow: column;
  width: auto;
  max-width: 300px;
  filter: drop-shadow(5px 5px 4px black);
}
 
/* the first css class! you can add a class to an element like: <p class="right">blah blah</p> and select it with a period before the class name in the CSS. this is the point where you jump from "styling the whole page" to "styling individual pieces modularly". 
  here's an activity for you: Can you make an equivalent .left class for floating things the other direction?
*/ 
.right {
  float: right;
  text-align: right;
}
/* selecting a specific element type of a specific class is done without spaces. just like this: */
figure.right{
  transform: rotate(.60deg);
}
  
figure img {
  max-width: 300px;
  margin: 10px;
  margin-bottom: 0px;
  border-width:12px;
  border-style:solid;
  border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;       
    
}
figure figcaption {
  margin: 10px;
  margin-bottom: 2px;
  margin-top: 0px;
  text-align: left;
  font-size: 1.3rem;
  line-height: 0.8em;
  font-family: "Noir Lullaby";
}

aside{
   font-size: 0.9rem;
  }
figcaption aside{
   max-width: 150px;
}







/* These are for adding our individual commentary! See the "aside" element I put on the homepage. - Many */
.many {
  color: #5d006d;
  font-family: "Crayon Libre";  
}
  
.many::after{
  content: " — M";
}
/* Copy what I did above, pick a font, a text color, a way to sign! - Many */   
.olivine{
  
}
.olivine::after{
    
}