@charset "UTF-8";

/*my entire purpose is to make html look pretty*/

/*
selector{
    property: value;
    property2: value;
    property3: value;
}

------------
TAG SELECTORS
tag {
    property:value;
}

p {
    color:blue;
    font-size: 1.25rem;
    font-famiy: Gotham, "sans-serif";
}

<p>Paragraph content goes here.</p>

------------
CLASS SELECTORS
.class {
    property: value;
}

.pink {
    height: 100px;
    backround-color: pink;

}

<footer class="pink">

    Footer content goes here.

</footer>

-------------
ID SELECTORS

#id {

    property: value;

}

#vegan {
    background-color: green;
    color: darkgreen;
    font-size: 3rem;

<article id"vegan">

    Article content goes here.

</article>

------------
PSEUDO-CLASS SELECTORS

selector:pseudo-class {
    property: value;
}

a:hover {
    color: red;
}

<a href="#" target="_blank">Click HERE for 1 million bucks</a>

------------
ATTRIBUTE SELECTORS

tag[attribute] {
    property: value;
}

a[target="_blank"] {
    color: cornflower;
}

<a href="#" target="_blank">Click HERE to view all the best monkey</a>

-------------
COMPOUND SELECTORS (Very specific)

Inside of

.class tag #id .class2 tag {
    property; value;
}

main .fishy p {
    color: salmon;
}

<main>
    <article class="fishy">
        <p>I am a salmon.</p>
    <article>
</main>
 
main .fishy p span {
    color: salmon;
}
<main>
    <article class="fishy">
        <p>I am a <span>salmon<span>.</p>
    <article>
</main>

-----------------
And COMPOUND SELECTOR (listing the tags applies to not compounding them to specifc, general not specific)

.class, tag, #id, .class2, tag {
    property; value;
}

main, .fishy, p, span {
    background-color: salmon;
}

<article class="fishy">
    I have a salmon background
</article>

<main class="fishy">
    I have a salmon background
</main>

<p class="fishy">
    I have a salmon background
</p>

<span class="fishy">
    I have a salmon background
</span>

*/

html, body {
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    background-color: black;
    color: rgb(226, 226, 226);
    font-family: monospace ;
}

header {
    background-color: #999999
}

nav {
    height: 100px;
    position: relative;
    z-index: 1000;
}

nav ul {
    width: 50%;
    background-color: rgb(0, 0, 0);
    list-style-type: none;
    list-style-image: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: black;
    position: relative;
    height: 75px;
    flex-grow: 1;
    font-family: monospace;
    font-size: 30px;
    top: 10px;
    left: 30px;
    align-items: center;
    justify-content: center;
}

nav ul li a {
    display: flex;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif
}

ul {
    text-align: left;
    color: rgb(8, 255, 8);
}

main {
    width: 80%;
    margin-left: auto;
    margin-right:auto;
}

article ul{
    text-align: left;
}

.rollover-text {
    font-size: 2rem;
    line-height: 35px;
    font-family: monospace;
    text-decoration: underline rgb(8, 255, 8);
}

.positioning-cage {
    font-size: 5rem;
    background-color: black;
    position: relative;
    left: 300px;
}

.pos-square {
    background-color: rgb(0, 0, 0);
    position: relative;
    left: 100px;
}


.rollover-text a:link {
    color: rgb(8, 255, 8);
}

.rollover-text a:visited {
    color: rgb(7, 170, 7);
}

.rollover-text a:hover {
    color: blue;
}

.rollover-text a:focus {
    color: rgb(110, 43, 226);
}

p{
    text-align: left;
    font-size: 1.1rem;
}


footer {
    height: 100px;
    background-color: black;
    color: green;

}