/* For entire html's settings in general */

body {
  font-size: 21px;
  background-color: #ada9eb;
  color: #0c0515;
  font-family: Serif, Verdana;
  /* background-image: url("https://64.media.tumblr.com/41a6831e54baae15670f563caa87e38d/tumblr_inline_ml9dvxK7as1qz4rgp.gif"); */

/* url(https://64.media.tumblr.com/44c185c446acd15614d594b3e26479da/tumblr_inline_n259ydvOvA1qhwjx8.png"); */
}

/* This makes it so links are blue when clicked and purple after they've already been clicked */
a:link {
    color: blue;
}

a:visited {
    color: purple;
}

/* The little aesterix is for if I want the entire webpage to have specific features, like specific text colors, text alignment, background color, etc. This keeps me from having to specify something like h2 and stuff if there's elements in the page that share the same trait */

* {
  text-align: center;
}

/* things that share the same traits such as color, background color, text alignment, border color, etc. can be grouped together with a comma (i.e. "h1, h2, h3, p"); this makes it easier to have less code to deal with and to keep code from getting cluttered*/

h1, h2, h3 {
    color: #ebe7f0;
    background-color: #7e78e4;/* background-color: #5e3692; */
    text-align: center;
    border-color: #4b19a5; /* border-color: #390d70; */
}

h2, h3 {
  font-weight: lighter;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: underline;
  border-style: ridge;
}   

/* These first two h1's are specifically for the main title of the page */

h1 {
    font-style: italic;
    text-align: center;
    text-transform: capitalize;
    line-height: 1.5;
}

h1 {
    border-style: dashed;
    border-width: 10px;
    border-left-width: 10px;
    border-right-width: 10px;
}

/* These two h2's are specifically for the outer ridge outline */

h2 {
     margin: 20px;
     padding: 40px;
}

h2 {
    border-width: 8px;
    border-left-width: 8px;
    border-right-width: 8px;
}

/* These two h3's accomplish the same thing as the h2's */

h3 {
     margin: 10px;
     padding: 30px;
}

h3 {
    border-width: 6px;
    border-left-width: 6px;
    border-right-width: 6px;
    
}

/* The p is for paragraphs on the page in particular */

p {
    letter-spacing: 0.1em;
    word-spacing: 0.1em;
    line-height: 1;
    text-align: center;
}

/* The .center command is specifically for the gifs/images on the page so they can be center aligned like the text (i.e. in the html code, it's where it says, "class="center" at the end of the image/gif url) */

.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
}

/* This affects the top of the site where my title and site construction banners are; also affects the text below the construction banner since I wanted it included with both (i.e. shows up in html code as, "<div id="top"> */

#top, #body {
    background-color: #ada9eb; /* background-color:#b696d4; */
    padding: 20px;
    border-width: thick;
    border-style: solid;
    border-color: #2a0967;
    width: 1000px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-left: 260px;
    
}

/* #updates {
    padding: 5px;
    border-width: thick;
    border-style: solid;
    border-color: #2a0967;
    width: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-left: 80px; 
    */


/* Has the effect I mentioned above (i.e. can find in html as, "<p class="intro"> </p> */

.intro {
    color: #0c0515;
    font-weight: lighter;
    text-align: center;
}

/* Groupings like mentioned above, but for what affects the paragraphs below the main ones; this is where I have my bullet point list */

#p1, #p2, #p3 {
  background-color: #ada9eb; /* background-color: #b696d4; */
}

#p1, #p2 {
  padding: 20px;
}

#p3 {
  padding: 5px;
}