/* Center child elements */
body,
.website-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

body {
  height: 100vh;
}

/* Styles for website counter container */
.website-counter {
  background-color: #ff4957;
  height: 50px;
  width: 80px;
  color: white;
  border-radius: 30px;
  font-weight: 700;
  font-size: 25px;
  margin-top: 10px;
}

/* Styles for reset button */
#reset {
  margin-top: 20px;
  background-color: #008cba;
  cursor: pointer;
  font-size: 18px;
  padding: 8px 20px;
  color: white;
  border: 0;
}

/* for the style of my webpage, i liked the idea of a more montone/monochromatic
colour palette. being a rabbit, i settled on shades of green, grey and dark brown (though i chose to use slightly different
colours for the secondary webpages to show variety). I chose typewriter-type fonts because I like it, and because I thought that
because Bugs Bunny was born in the 1940's - he would be familiar with typewriter fonts...
no other justifiable reason, lol. I decided on a mixture of bolded fonts, darker/lighter colours
and lists to establish a hierarchy to the viewer/user to lead their eye around the webpage. 

I decided to throw as much variability into my css as possible to practice and learn different
styles and ways of doing things, and i also used lots of classes, https://www.w3schools.com/cssref/sel_class.php, 
as it seems to be a very popular way to write CSS from what I found
while researching for this project. I did find the CSS portion the most difficult by far, and probably spent
the most amount of time formatting the webpage to look the way it does. It isn't as intuitive (for me, at least) as HTML
and a lot of the phrases used in CSS don't make sense without googling. The youtube channels "BroCode" and "Dani
Krossing" aided in a lot of what I implemented throughout my CSS which will be specifically mentioned throughout. I used general videos
such as https://www.youtube.com/watch?v=0PUmPHkQfcE&list=PL0eyrZgxdwhwP0AxnbBiDBCi53LK9uCMZ&index=7&ab_channel=DaniKrossing that explain
all of the different CSS styles, and would try to emulate my own based off of their guidance (not explicitly copy/paste though)

i also had a hard time, (by my own doing but using divs) remembering what i had named all my classes, and having to go back and forth between
HTML and CSS to see which was which when making style changes... so something to remember for the future, because i found a lot of my errors
were due to my own mis-remembering and getting confused.

i also watched these tutotials, as mentioned in my HTML code,
to get a better idea of CSS styles and how much variation you have when designing how
your webpage looks -https://www.youtube.com/watch?v=HGTJBPNC-Gw&ab_channel=BroCode,
https://www.youtube.com/watch?v=FHb9JobDs2o&ab_channel=WEBCIFAR
https://www.youtube.com/watch?v=wRNinF7YQqQ
https://www.youtube.com/watch?v=46ghtEML280&pp=ygUPZmlyc3QgY2hpbGQgY3Nz
https://www.youtube.com/watch?v=FazgJVnrVuI&ab_channel=BrianDesign*/

/* css body tag https://www.w3schools.com/tags/tag_body.asp sets up some general attributes for the body section, 
as most browers will display the body element with default values if not specified (as learn in w3 schools) */
body { margin: 0;
       padding: 0;
       background-color: #fff;
       font-size: 12px;
       font-family: 'Courier New', sans-serif;
}
/* i learned that the * sign can be used for css universal selector - selecting any and all types of elemnts in the html
webpage https://www.geeksforgeeks.org/what-is-the-use-of-asterisk-selector-in-css/#:~:text=The%20asterisk%20(*)%20is%20known,the%20elements%20on%20the%20page.,
i am using this * sign for the box sizing property, which allows us to include padding and border in the elements
height and width https://www.w3schools.com/css/css3_box-sizing.asp . 
*/
* { box-sizing: border-box;
}

/*
breaking down my title/heading, subheading and "sub-subheading" sections to allocate
various style decisions. ~24:00 minute mark in this video breaks down each of the listed
sections in h1/h2/h3 https://www.youtube.com/watch?v=wRNinF7YQqQ&ab_channel=BroCode which
i used to structure my CSS and learn how these style elements work.

I also used my beloved W3 schools with the following links:
border radius - https://www.w3schools.com/cssref/css3_pr_border-radius.php - border radius i thought would round 
corners, can't tell if they are rounded or not..?
padding- https://www.w3schools.com/css/css_padding.asp, creates space around an element
and it's content... this was a lot of trial and error for me because it's hard for me to
think in px - i used padding in different directions (left, top, etc). 
line height - https://www.w3schools.com/cssref/pr_dim_line-height.php
*/
h1 { font-weight: 300;
     background-color:#E5F6DF;
     margin: 5px 0 0;
     font-size: 40px;
     color:#023226;
     padding: 0 10px 10px;
     border-radius:2px;
    font-family: 'Courier New', serif;
}
h2 { color: #057f5f;
     width: 150px;
     font-size: 18px;
     padding-left: 20px;
     padding-top: 12px;
     font-weight:700;
     font-family: 'Courier New', serif;
}
h3 { font-size: 18px;
     font-weight: bold;
     margin-bottom: 0;
     line-height: 28px;
     font-family: 'Courier New', serif;
}
 
/* using ID to change one section of my table to be yellow, to match the text */
#yellow {
       background-color:#FFFF00;
}

/* margin top - https://www.w3schools.com/cssref/pr_margin-top.php 
display - https://www.w3schools.com/css/css_inline-block.asp, https://www.youtube.com/watch?v=9T8uxp5hQ60&ab_channel=BroCode - allows to set height and width on an element.
text decoration - https://www.w3schools.com/cssref/pr_text_text-decoration.php - i had tried wavy and dashed,
but found them too distracting here so i removed it.
*/
h2, h3 { margin-top: 5px }
a { color: #057f5f;
    display: inline-block;
    padding:2px 4px;
    border-radius:2px;
    margin-right:-2px;
}

/* border collapse https://www.w3schools.com/cssref/pr_border-collapse.php, 
https://css-tricks.com/almanac/properties/b/border-collapse/,
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
determines whether table borders should collapse into single border or seperated each
element into it's own borders

***CSS validator says that it is error/invalid but w3 schools says elsewise? */

table, th, td {
       border-collapse: seperate;
       padding: 30px;
       border-spacing: 20px;
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
https://www.w3schools.com/cssref/pr_border-collapse.php
https://www.digitalocean.com/community/tutorials/how-to-style-a-table-with-css

^ links i used to style my table/learn how. i split the styling into the entire table's
outline and colour, and then the table header and table data so they could look slightly 
different from each other*/
table {
       background-color:#E5F6DF;
       width: 100%;
       border: 4px solid #000;
       border-style: outset;       
}
th {
       background-color:#C4A484;
       font-weight: bold;
       text-decoration: underline;
       font-size: 20px;
       border: 3px solid;     
}
td {
       background-color:#FAF0E6;
       font-weight: bold;
       font-size: 18px;
       border: 2px solid;     
}

/* FigureOption Starts */
/* for my images, i decided to add some padding and a small two tone border around my i
nserted images, but other than that left them as is.
https://www.w3docs.com/snippets/css/how-to-add-border-to-image-in-css.html */ 
img {
        padding: 5px;
        border: 8px solid #E5F6DF;
        background-color: #013220;
}
/* FigureOption Ends */

/* MenuOption Starts */
/* when making my menu at the top of each page, i liked the idea of it changing a different colour
to make sure the reader knows it's a clickable link - implemented through W3 schools tutorial
here https://www.w3schools.com/cssref/sel_hover.php */
a:hover {
  background-color:#FFB6C1;
  color:#fff;
}
/* Menu Option Ends */ 

/* introducing first and last child selectors, which i first saw on https://www.w3schools.com/cssref/sel_firstchild.php, then researched learning
https://www.youtube.com/watch?v=a69OMEJXaJo&ab_channel=KevinPowell and how it can be utilized, as well as combining classes together
first and last child are "pseudo classes" and means "if this element is the first child of its parent". 
:last-child means "if this element is the last child of its parent */

/* key class is used for my "interests" section, with the first-child being used to select
the first item in my list with the margin left at 0, then subsequent items with a margin of
0 on top and 10px to the right and the position chosen as relative, to my understanding, allows for the
element to be positioned according to the normal flow of the webpage https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://teamtreehouse.com/community/clarification-margin-0-0-10px#:~:text=Css%20margin%20short%20hand%20code,Bottom%20margin%20%3D%2010px%20or%20pixels
learning about position: https://www.youtube.com/watch?v=Pp7UXS3P6jY&ab_channel=BroCode */

.key:first-child { margin-left: 0 }
.key { margin: 0 10px;
       position: relative;
}
/* the before selector inserts something in front of the content of the next element, 
https://www.w3schools.com/cssref/sel_before.php in this case, i wanted to use a symbol to divide the interests, instead of a dash like i had initially. i chose
it's position to be absolute so it would stick beside the word accompanying it and not move around. for the size
and position, i trialled and errored until i found something that looked okay.

(oct 19 - i am finding on some browsers my symbol works and  others it doesn't, but do not have time to make changes and it shows up on my 2 computers well )*/
.key::before { content: '◆';
               position: absolute;
               left: -15px;
               color: #555;
               font-size: 12pt;
}
/* this is to put a space before the first word in this section */
.key:first-child::before { content: '' }
/* used this section class to create a cohesive border and padding throughout, so i could then combine classes that will all match, even if their style changes. */
.section { border-bottom: 1px solid #ddd;
           padding: 10px 0 15px;
}
/* as described above, using last child to give no border to the last element in the class - i don't know if it worked as i intended though? */
.section:last-child { border: none }
/* this class is for my text sections of certain classes, determining the look of the text in regards to size, height, margin, etc */
.section-text { width: 80%;
                font-size: 18px;
                line-height: 24px;
                margin: 10px 0 10px;
                padding: 0 10px;
}

.subsection { margin: 10px 0 5px }
/* this is for my paragraph-type section descriping Bugs' work experience */
.desc { font-size: 16px; 
        font-family: 'Courier New', 
        sans-serif; color:#444;
}

/* MenuOption starts */
.contact-info { font-size: 18px;
                text-align: right;
}
/* MenuOption ends */
/* this class is for text that i wanted in a lighter colour font and secondary font style to
contrast the courier new font that is the primary throughout my webpage. i also wanted to make it all
uppercase, to switch things up a little. making the .light class allowed me to
easily switch between different font styles/colour in my html sections */
.light { color: #aaa;letter-spacing:1px;
         font-size: 14px;
         line-height:28px;
         font-family: 'Source Sans Pro', sans-serif;
         text-transform:uppercase;
}
/* beginning my list classes */
ul{
  padding-left:15px;
}

/* class for the listed section under 'skills' - both the padding/margins/spacing etc and the font preferences. once i learned of the
first and last child, https://www.geeksforgeeks.org/how-to-select-first-and-last-td-in-a-row-with-css/, https://www.youtube.com/watch?v=a69OMEJXaJo&pp=ygUPZmlyc3QgY2hpbGQgY3Nz
i implemented it in various classes such as in this list. used this link to learn more about css and lists https://www.youtube.com/watch?v=jcThx0U066w&ab_channel=DaveGray  */
ul.skills{
  float:left;
  width:30%;
  padding-left:0px;
  margin: 0 20px 0 0;
}

ul.skills li{
  list-style: none;
  font-size:16px;
  margin-bottom:10px;
}

ul.skills li:last-child{
  margin:0;
}

/* setting up my 'float' rules as i learned about at the following links: https://developer.mozilla.org/en-US/docs/Web/CSS/float
https://blog.hubspot.com/website/css-float, https://www.digitalocean.com/community/tutorials/css-understanding-css-float,
https://www.youtube.com/watch?v=MxEtxo_AaZ4&ab_channel=SlayingTheDragon, https://www.youtube.com/watch?v=LrdkRMZhgZg&ab_channel=KevinPowell
i learned that the float property has a very special role in CSS and  it does something that no other CSS property can do - which is
essentially pulling an element to a certian spot/location so other elements move around it. in my case, i created columns which
i used throughout my webpage to structure it */

/* https://css-tricks.com/almanac/selectors/a/after-and-before/ before and after to insert 'nothing' content by 
using "" to put space, and https://developer.mozilla.org/en-US/docs/Web/CSS/display for the display-table as if it acts like a table  */
.row:before, .row:after { content: "";
                          display: table;
}
.row:after { clear: both }
.col { float: left }
.col-right { float: right }

/* setting up my page's 'rules' that i determined using 
https://www.youtube.com/watch?v=P-bDFt2wZDA&ab_channel=O%27Reilly */
.page { width: 1000px;
        min-height: 29.7cm;
        margin: 1cm auto;

        background: white;
        padding: 20px 50px;
}
.subpage { padding: 1cm;
           border: 1px red solid;
           height: 297mm;
}
/* setting up page, determining size to be intended for A4 paper (normal
printer paper, 8.5x11) https://www.w3.org/TR/css-page-3/, https://www.geeksforgeeks.org/css-page-rule/, 
https://www.tutorialspoint.com/css/css_paged_media.htm */
@page { size: A4;
        margin: 0;
}

/* when i was learning about responsive screens (which i didn't end up
implementing, i learned about the media option for print. I thought this would be cool to include
as a resume webpage, as employees/yourself may want to print out your resume and you would 
want it to scale to fit your printer paper. i used these sources to write the print CSS section: 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries, 
https://css-tricks.com/a-complete-guide-to-css-media-queries/
https://www.youtube.com/watch?v=CAgLAeykOyU&ab_channel=freeCodeCamp.org ~6 mins in
https://www.youtube.com/watch?v=9eRj1802p90&t=184s&ab_channel=UtahTechSE-1400Videos ~3 mins in
but a lot of the final numbers of font size etc was with me trial and erroring it using the w3 schools
"try it" to be able to visualize size and proportions.

*/
@media print {
       /* https://www.w3schools.com/cssref/pr_border.php i learned about the initial property value, which means
       that it sets this value to it's default, which is already written in your CSS above. this is helpful so you 
       don't need to rewrite all the same values twice. i used the videos cited above and trial and error to determine
       what fit best, mostly in regards to font sizes */
    .page { margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
    }
       /* https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
       https://blog.logrocket.com/css-breakpoints-responsive-design/ */
    .page-break{
      page-break-before: always;
      padding-top:30px;
    }

    body { font-size: 12pt;}
    h1{
      font-size: 23pt;
    }

    h2{
      font-size:10pt;
      width: 3cm;
      padding-left: 10px;
    }

    h3 { font-size: 10pt; line-height:11pt}

    .section-text { font-size: 9pt; line-height: 14pt; }

    .light { font-size: 7.5pt; line-height:12pt; color:#ddd; }
    
    .page { width: 21cm }
    ul {margin:5px 0 0}
    .section { padding: 5px 0 8px }
    .section-text { width: 15cm; margin: 5px 0 5px;}
    .subsection { margin: 5px 0 0 }
    .desc { font-size: 9pt }

/* in hindsight i wish i split up his phone number/email and the different pages into different menus,
       so i could choose to hide the menu when printed */
    .contact-info { font-size: 8pt}
    
    ul.skills{margin: 0 10px 0 0;}
    ul.skills li{ font-size: 9pt; margin-bottom:0}

}