/* 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."
   */
   
@import url(morestyles.css);

@media print {
  body{
    font-size: 10pt;
    font-family: times, seriff;
  }
  
  #navigation{
    display: none;
  }
}

@font-face { /* this adds a font if you have it , change url  to local if you want it to grab the font from the user, we can grab some from https://fonts.google.com/*/
    font-family: "font of all knowledge";
    src: url(fontofallknowledge.woff);
}



abbr[title] { border-bottom: 1px dotted #ccc}

input[type=text] { width: 200px; }
input[type=text][disabled] { border: 1px solid #ccc}

p { font-family: "font of all knowledge", arial, sans-serif; }

   
h1{
  text-align: center;
  color: rgb(250, 250, 15);
  margin: 20px;
  margin-top: 40px;
  border-style: dashed;
  border-width: 2px;
  border-radius: 6px 20px 20px 20px;
  border: 5px solid #8b2;
  box-shadow: 5px 5px 3px 1px #999;
  /* horizontal offset, vertical offset, blur radius, spread distance, color for box shadow */
  box-shadow: inset 0 0 7px 5px rgb(5,5,5);
  text-shadow: -2px 2px 2px rgb(5,5,5);
} 

* {
  margin: 0;
  padding: 0;
}

#contact * {
  display: block;
}

/* advanced CSS */
#genus_examples > li { border: 1px solid red }
h1 + p { font-weight: bold }


 /* intermediate CSS */ 
#top{
  background-color: rgb(5,1,3);
  padding: 20px;
} 
/* this removes the need or classes or IDs on the p and h1 tags */
#top h1{
  color: rgb(255,255,255);  
}

#top p{
  color: red;
  font-weight: bold;
}

.intro{
  color: white;
  font-weight: bold;
}

/* p.jam {  whatever here  } */

/* pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the fform of selecctor:pseudo_class { property:value; }   simply with a colon in between the selector and the pseudo class, such an example could be unvisited and visited links */


/* transition properties
transition
transition-propery which property or properties will transition 
transition-duration how long the transition takes
transition-timing-function if the transition takes place at a constant speed or if it accelerates or decelerates
transition-delay how long to wait until the transition takes placem, it can have ease or linear or ease-in and ease-out
*/

/* background-size allows you to stretch or compress a background image, values can be:
auto, lenghts (such ass 100px 50px) percentages, combination of both with auto, contain, cover
you can also use background-origin , so adding background-origin: border-box can cause the origing of the background image to be tucked up inside a border
*/
#burrito  {
  background-image: url(https://www.urieldana.com/wp-content/uploads/2017/03/Fragonard-The-Fountain-of-Love-672x372.jpg), url(https://nordicwallart.com/cdn/shop/products/product-image-842395606.jpg?v=1569117891&width=832), url(https://fineartconnoisseur.com/wp-content/uploads/2018/07/acrylic-paintings-Linda-Wilder-Rundle-from-Vermillion-696x459.jpg);
}

/* transform
transform and transform-origin
*/

.note { /* this results in a square orange box with all of its contents inside */
  width: 300px;
  height: 300px;
  background: hls(36,100%,50%);
  transform: rotate(-10deg); /* this will rotate ALL of this content inside here*/
  transform: skew(20deg, 10deg); /* this will skew 20 degrees on the x axis and 10 on the y */
  transform: scale(2); /* scaling, you can also do it separetly like (1,2) x,y axis */
  transform: translate(100px,200px); /* this will move the box 100 px to the right and 200px down */
  /* in reality if you want to combine these, you should do like "transform: rotate (-10deg) scale(2) translate(100px,200px);" */
  transform: matrix(2, -0,35, 0.35, 2, 0 ,0); /* these values arent entirely straightforward and involve maths or just one math but its to complex imo */
  transform-origin: 0, 0 /* this will tell the rotation wher to rotate on its pivot, you can use center, top, right, bottom and left, icluding lenght and percentage values including negatives */
}

/* gradients */
/* background: linear-gradient(yellow, red); 
you can manipulate the angle by saying "to" and the destination you want the transition to head to "(to right, orange, red);"
(to bottom right)
or any angles that tickles your fancy too
background: linear-gradient(20deg, orange, red)

you can also do something like
background: linear-gradient(hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%));

to make gradients work in as many browsers as you can you want to use -webkit-linear-gradient to cover safari and older versions of chrome

so all the gradients might look something like this
body {
    background: #666 url(fade.png) 0 0 repeat-y;
    background: -webkit-linear-gradient(right, #000, #666); 
    background: linear-gradient(to right, #000, #666);
    
    
you also have radial-gradients
background: radial-gradients(yellow, green);
or can also be
background: radial-gradients(circle, yellow, green);

Using “closest-side”, “closest-corner”, “farthest-side” and “farthest-corner” you can also specify if the gradient is contained by the sides or corners of the box nearest to or furthest away from the origin

background: radial-gradient(circle closest-side, yellow, green)

or if you wanted to place the origin of the gradient somewhere specific you can also use at

background: radial-gradient (at top left, yellow, green);

COLOR STOPS
    linear-gradient(black 0, white 100%) is the equivalent of linear-gradient(black, white)
    radial-gradient(#06c 0, #fc0 50%, #039 100%) is the same as radial-gradient(#06c, #fc0, #039)
    linear-gradient(red 0%, green 33.3%, blue 66.7%, black 100%) will have the same result as linear-gradient(red, green, blue, black)

REPEATING GRADIENTS
background: repeating-linear-gradient(white, black 15px, white 30px)

background: repeating-radial-gradient(black, black 15px, white 15px, white 30px);
}*/

/* MEDIA QUERIES 
this can make different design choices depending on screen size such as phones, tablets or window sizes

@media screen {
  body { font: 12px arial, sans-serif}
  #nav { display: block }
}

BROSWER SIZE SPECIFIC CSS
@media screen and (max-width: 1000px){
  #content { width: 100%}
}
  
this will tell the browser to apply a block of css when its viewport is less than 1000px wide, this can be used to do something as simple as making a content area or navigation narrower or you could completely rearrange a page layout like stacking page sectins of top of one another instead of displaying them in columns

you can apply more than one @media rule so you oucld have anumber of different designs that are browser size dependent


@media screen and (max-width: 1000px) {

    #content { width: 100% }

}

@media screen and (max-width: 800px) {

    #nav { float: none }

}

@media screen and (max-width: 600px) {

    #content aside {
        float: none;
        display: block;
    }

} in this case, for the layout area 600 or less, all of these 3 would be aplpied because they are less or equal to 600px then all would be accepted too


ORIENTATION-SPECIFIC CSS
@media screen and (orientation: landscape) {

    #nav { float: left }

}

@media screen and (orientation: portrait) {

    #nav { float: none }

}

DEVICE SPECIFIC CSS
@media handheld isnt widely supported

so we have though Width and height
device-width, device-height, min-device-width, max-device-width, min-device-height and max-device-height can be used to target the computed resolution of a device:
@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {

     You can apply numerous conditions separated by "and"

///

PIXEL RATIO
@media (device-pixel-ratio: 2){
  body { background: url(twiceasbig.png) }
  
  
You might also want to fiddle with a device’s viewport to get it to play how you want (this next example on html)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


OTHERS 
can also apply styles depending on a devices resolution:

@media screen and (resolution: 326dpi) { /// }

@media screen and (min-resolution: 96dpi) { /// }

or in its aspect ratio:

@media screen and (device-aspect-ratio: 16/9)
{  }

}
*/

a:link {
  transition: all .5s linear 0;
  color: hsl(36,50%,50%);
}

a:visited {
  color: purple;
}

a:active {
  color: red;
}

a:hover {
  text-decoration: none;
  color: hsl(36,100%,50%);
  background-color: yellow;
}

input:focus, textarea:focus{
  background: #eee;
}

/* Dynamic pseudo classes
commonly used for links, the dynamic pseudo classes can be used to apply styles when something happens to something
we have these terms
-active is for when something is activated by the user, such as when a link is cliked one
-hover is for when something is passed over by an input from the user, such as when a cursor moves over a
link
-focus is for when something gains focus, that is when it is selected by, or is ready for, keyboard input
*/

/* First children
this will target something only if it is the very first descendant of an element
*/

p:first-child {
  font-weight: bold;
  font-size: 40px;
}
/* we also have last-child, target, first-of-type and some more */

/* Margins and padding
margin allows you to amalgamate margin-top margin-right, etc, in the form of property:top right bottom left
*/

/* p {
  margin-top: 1px;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 20px;
} 
this can easily be made like the example below instead
*/
p {margin: 1px 5px 10px 20px;}

/* padding can be used in exactly the same way, by statnig just two values such as padding: 1em 10em;) the first vallue will be the top adn bottom and the second value will be right and left */

/* borders */
/* border-width can be used in the same way as margin and padding too, you can also combine border-width, border-color and border-style with the border property so like this:  

isntead of this:
p {
  border-style: 1px;
  border-color: red;
  border-width: solid;
}

again you can simplify it like this
p {border: 1px red solid;} THIS IS PLAINLY RIDICULOUS AND BEAUTIFUL AAAA
*/

/* fonts */
/* font related properties can also be gathered together with the font property */

p {font: italic bold 12px/2 courier;}

/* this combines font style, font weight, font size, line height and font family */

/* so putting this to use all together it would look like this code which is magistral

p{
  font: 14px/1.5 "Times New Roman", times, serif;
  padding: 30px 10px;
  border: 1px black solid;
  border-width: 1px 5px 5px 1px;
  border-color: red green blue yellow;
  margin: 10px 50px;
}
*/

/* Background images 
Used in a very different way to the img html element, css background images are a powerful way to add detailed presentation to a page

to jump in at the deep end, the shorthand property background can deal with all of the background image manipulation aspects
such as saying

body {
  background: white url(http://www.htmldog.com/images/br.gif) no-repeat top right;
  
  this would amalgamates all of these properties below:
  background-color 
  background-image (which is the location of the image itself)
  background-repeat (which is how the image repeats itself, the values can be: repeat, repeat-y, repeat-x, no-repeat)
  background-position (whic can be top, center, left, right, a lenght, or a percentage, or any sensible combination such as top right)
  
thisi can actually be used to specify a few other background ffeatures too, notable attachment, clip, origin and size, though color, image, repeat and position are by far the most fundamental aspects of that you would want to manipulation most often
}
*/

h1 {
  background: black url(https://www.urieldana.com/wp-content/uploads/2017/03/Fragonard-The-Fountain-of-Love-672x372.jpg) repeat center;
  color: rgba(0,0,0,0.8);
}

#smut { color: hsla(36, 100%, 50%,0.5)}

body {  
  line-height: 1.2;
  font-size: 16px;
  background-color: rgba(25,14,15,0.5);
  color: white;
  border: 5;
  font-family: fantasy, Serif, Verdana, Helvetica; /* Arial, Helvetica, Serif, fantasy, cursive you can also put a comma, 
  and make a queue so if the user doesnt have a specific font, it will use the next one in the queue*/
}

h2, .thisOtherClass, .yetAnotherClass{ /* You can have multiple classes being affected by the same parameters like this in this way, remember to use the . */
  margin: 10px;
  padding: 20px;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 1.3em; 
  font-family: fantasy, Serif, Verdana;
  font-style: italic;
  text-transform: capitalize;
  text-decoration: underline;
  color: rgb(220, 200, 15);
  background-color: rgb(30, 25, 25);
  
}

table {
  background-color: rgb(60, 30, 40);
  color: rgb(250, 250, 250);
}

cite {
  color: rgb(250, 250, 50);
}

img{
  border-style: ridge;
  border-width: 2px;
  border-color: grey;
  
}

alternative{
  color: rgb(250, 250, 50);
  background-color: rgb(30, 25, 25);
}

/* specificity
If you have two or more conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out

for larger and more complex CSS files are, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts arising

be more specific for greater precedencce
just to understand: if the selectors are the same, then the last one will always take precedence

conficts usually come out when you have nested selectors


div p { color: red }
p { color: blue }

In this example this is okay and will work as intended, this is because the more specific a selector is the more preference it will be given when it comes to conflicting styles
*/

/* Calculatinig specificity
The actual specificity of a group of nested selectors take some calculating. You can give every ID selector a (#whatever) a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. When you add them all up you have a specificity value

p has a specificity of 1(1 HTML selector)
div p has a specificity of 2 (2 HTML selectors, 1+1)
.tree has a specificity of 10(1 class selector)
div p.tree has a specificity of 12(2 HTML selectors + a class selector,, 1+1+10)
#baobab has a specificity of 100 (1 id selector)
body #content .alternative p has a specificity of 112(HTML selector + id selector + class selector + HTML selector + 1+100+10+1
*/

/* Display
A key trick to the manipulation of HTML elements is understanding that theres nothing at all special about how most of them work. Most pages could be made up from a few tags that can be styled any which way you choose. The browsers default visual representation of most HTML elements consist of varying font styles, margins, padding and essentially, display types

The most fundamental types of display are inline, block, and none, and they can be manipulated with the display property and the shockingly surprising values inline, block and none
*/

/* inline
does what it says, boxes that are displayed inline follow the flow of a line. Anchor (links) and emphasis
are examples of elements that are displayed inline by default
*/

li { display: inline }
/* this will cause that all list items in a list to appear next to each other in one continuous line rather than each one having its own line */

/* block makes a box standalone fitting entire width of its containing boxx with an effective line break before and after it, unline inline boxes, block boxes allow greater manipulation of height, maring and padding, heading and paragraph elements are examples that are displayed this way by default in browsers

the next example will make all links in "nav" large clickable blocks
*/

#navigation a {
  display: block;
  padding: 20px 10px;
}

/* none
none doesnt display a box at all, but can be used with dynamic effects such as switching extended infformation on and off at the click of a linnk or in an alternative stylesheets

the following code, for example, could be used in a print stylesheet to basically "turn off" the display of the elements such as navigation that would be useless in that situation
*/

#navigation, #related_links {display: none}

/* display: none and visibility: hidden vary in that the first one takes eleemnts box completely out of play, whereas the latter keeps the box and its flow in space without visually representing its contents, for example if the second paragraph of 3 were set to display none, the first paragraph would run straight into the third whereas if it were set to the latter one, there would be a gap where the paragraph should be*/

/* tables
maybe the best way to understand the table related display property values is to think of html tables.
table is the initial display and you can mimic the tr and td elements with the table-row and table-cell property values respectively

The display property goes further by offering: table-column, table-row-group, table-column-group, table-header-group, table-footer-group, and table-caption

Other display types
list-item displays a box in the way that you would usually expect an li HTML element to be displayed, to work properly then, elements displayed this way should be nested in a ul or el elements
run-in makes a box either in-line or blocck depending on the display of its parent
*/

/* this is to use color coding for the people to know if they are putting something valid or not in the input, 
or a cute png background for the search */


/* Pseudo elements
pseudo elements suck on to selectors much like pseudo classes taking the fform of selector:pseudoelement { property: value; } there are four of these

First Letters and First Lines
the first-letter pseudo element applies to the first letter inside a box and first-line to the top most displayed line in a box

as an example, you could create drop caps and a bold first-line for paragraphs with something like this:
p { 
font-size: 12px;
}
p:first-letter {
  font-size: 12px;
  float: left;
}
p:first-line {
    font-size: 24px;
    float: left;
}

the CSS3 specs suggest pseudo elements should include two colons, so p::first-line as oposed to p:first-line. This is to differentiate them with pseudo classes. Aiming for backwards-compatibility (whereby older web pages will still work in new browsers) browsers will still behave if they comme across the single colon approach and this remains the best approach in most ciircumstances due to some older browsers not recognizing the double colon
*/

/* before and after content
the before and after pseudo elements are used in conjunction with the content property to place content either side of a box without touching the HTML

use adding content here sparingly, you are borrowing content to use solely as presentation, such as using "!" beccause it looks pretty, not because you actaully want to exclaim anything

the value of the content property can be open-quote, close-quote, any string enclosed in quotation marks or any image using url(imagename)
*/

blockquote:before {
  content: open-quote;
}

blockquote:after {
  content: close-quote;
}

li:before {
  content: "POW! ";
  background: red;
  color: #fc0;
}

p:before {
  content: url(images/jam.jpg);
}

/* the content property effectively creates another box to play with so you can also add styles to the "presentational content"  */

/* page layout
you can place chunks absolutely or relative to another chunk 

positioning

The position property is used to define whether a box is absolute, relative, static or fixed:
-static is the default value and renders a box ini the normal order of things, as they appear in HTML
-relative is much like static but the box can be offfset from its original position with the properties top right bottom and left
-absolute pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute box can be placed anywhere on the page using top, right, bottom and left
-fixed behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the webpage, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled
*/

/* layout using absolute positioning
you can creaate a traditional two-column layout with absolute positioning if you have vsomething like the following HTML:

<div id="navigation">
  <ul>
    <li><a href="this.html">This</a></li>
    <li><a href="that.html">That</a></li>
    <li><a href="theOther.html">The Other</a></li>
  </ul>
</div>

<div id="content">
  <h1>Ra ra banjo banjo</h1>
  <p>Welcome to the ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
  <p>(Ra ra banjo banjo)
</div>
*/

#navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
}

#navigation2 {
 float: left;
 width: 200px;
}

#content {
  margin: 0 200px;
}

/* Floating
floating a box will shift it to the right or left of a line, with surrounding content flowing around it.
floating is normally used to shift around smaller chunks withing a page, such as pushing a navigation link ot the right of a container, but it can also be used with bigger chunks such as navigation columns.

using float you can float: left or float: right

then if you do not want the next box to wrap around the floating objects, you can apply the clear property:
clear: left will clear left floated boxed
clear: right will clear right floated boxed
clear: both will clear both left and right boxes
*/

#footer {
  clear: both;
}

input[type=search]{ background:url(magnifyingglass.png) right no-repeat}
input[type=email]:valid{ background:green }
input[type=email]:invalid{ background:red }

input[type=number]:valid{ background:green }
input[type=number]:invalid{ background:red }

p {
  text-align: center;
  color: rgb(255, 150, 150);
} 

a {
  text-align: center;
  color: rgb(150,150,255);
}
strong {font-style: italic;
text-transform: uppercase;
}