/*  
1. CSS stands for Cascading Style Sheets
    2.We can target a particular tag (every div or paragraph regardless of location for example
    3. The most specific selector (tag) takes priority
    4. Ties go to the lowest one on the CSS file but is still overwritten by styles in the HTML file 
    */

/*this is called an element selector*/
header {
    /*This is called a property*/
    font-size: 36px;
    color: blue;
    /*This is called a value*/
    text-align: center;
}

/*this whole thing is called a ruleset*/
nav,
p {
    color: darkgreen;
}

nav {
    text-align: center;
}

.makered {
    color: darkred;
}

ul li {
    padding-left: 15px;
    color: darkblue;
}

ul {
    list-style-type: "😎";
}

dl dt {
    font-weight: bold;
    color: blue;
    margin-top: 10px;
}

dl dd {
    margin-left: 20px;
    font-style: italic;
    color: #2d3436;
}

table {
    width: 50%;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

th,
td {
    padding: 12px 20px;
    text-align: left;
}

th {
    background: blue;
    color: white;
    font-weight: 600;
}

tr:hover {
    background-color: #c9d9f8;
    transition: background-color 0.3s ease;
}

footer {
    text-align: center;
    font-size: 25px;
}

table {
    border-collapse: collapse;
    width: 60%;
}

th,
td {
    border: 1px solid #333;
    padding: 8px 12px;
    text-align: center;
}

menu {
    background-color: #81D4FA;
    list-style-type: none;
    margin: 5px;
}

/*We use . in order to target classes*/
.outer {
    display: flex;
    flex-flow: row nowrap;
}

.outer>li {
    margin: 0px 50px;
}

.inner {
    background-color: #81D4FA;
    display: none;
}

.inner li:hover {
    background-color: white;
    color: #01579B;
}

.outer li:hover .inner {
    display: flex;
}

/*We use # in order to target IDs*/
#menuheader {
    text-align: center;
    font-size: 30px;
}

menu li {
    font-size: 20px;
}

img {
    width: 200px;
    height: auto;
}

span {
    color: darkblue;
}

.bgred {
    background-color: lightcoral;
}

#notblue {
    color: black;
}

caption {
    font-size: larger;
}