/*This is the CSS for Lab 2: CSS Crash Course */

/* Goal 1: CSS Selectors */
body {
    background-color: lightgray;
}

.class-selector {
    text-align: right;
}

#id-selector{
    text-align:center;
}

/* Goal 2: CSS Colors */
/* background colors */
.bg-white {
    background-color: rgb(255,255,255);
}
.bg-green{
    background-color:rgb(0,255,0);
}
.bg-red{
    background-color: rgb(255,0,0);
}
.bg-blue{
    background-color: rgb(0,0,255);
}
.bg-yellow{
    background-color: rgb(255,255,0);
}
.bg-dark{
    background-color: rgb(0,0,0);
}

/* font colors */
.text-red{
    color: red;
}
.text-blue{
    color: blue;
}
.text-green{
    color: green;
}
.text-white{
    color: white;
}


/* Goal 3: CSS Fonts */
/* font properties */
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.large-text {
    font-size: 22px;
}
.small-text {
    font-size: small;
}

/* font families */
.arial-font {
    font-family: "Arial";
}
.bangers-font { 
    font-family: 'Bangers';
}


/* Goal 4: CSS Spacing */
.outline {
    outline-width: 3px;
    outline-style: dashed;
    outline-color: red;
}
.border {
    border-width: 3px;
    border-style: solid;
    border-color: blue;
}
.padding {
    padding: 20px;
}
.margin {
    margin: 20px;
}
.container {
    width: 90%;
    margin: auto;
}


/* Goal 5: CSS Sizing */
.force-full-viewport {
    width: 100%;
    height: 100%;
}

.shrink-to-viewport {
    max-width: 100%;
    max-height: 100%;
}


/* Goal 6: CSS Backgrounds */
.background-image {
    background-image: url('../assets/bg-image.jpg')
}
.background-image-without-repeat {
    background-image: url('../assets/bg-image.jpg');
    background-repeat: no-repeat;
    background-position: center;
}
.background-image-fixed {
    background-image: url('../assets/bg-image.jpg');
    background-attachment: fixed;
}
.background-gradient {
    background-image: linear-gradient(red,yellow);
}


/* Goal 7: CSS Customizations (to Default HTML Styles) */
a {
    text-decoration: none;
}
a:hover {
    color: red;
}
button:hover {
    background-color: red;
}
ul {
    list-style-image: url('../assets/list-item-image.png');
    list-style-position: inside;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    text-align: center;
    padding: 5px;
}
tr:nth-child(even) {
    background-color: white;
}
tr:nth-child(odd) {
    background-color: silver;
}
th {
    background-color: green;
    color: white;
}


/* Goal 8: CSS Aligning with Flexbox */
.center {
    display: flex;
    justify-content: center;
}

.left {
    display: flex; 
    justify-content: flex-start;
}

.right {
    display: flex;
    justify-content: flex-end;
}

.justify-space-between {
    display: flex;
    justify-content: space-between;
}

.justify-space-around {
    display: flex;
    justify-content: space-around;
}

.justify-space-evenly {
    display: flex;
    justify-content: space-evenly;
}


/* Goal 9: CSS Aligning with Gridview */
.grid-1col {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    justify-items: center;
}
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    justify-items: center;
}
.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    justify-items: center;
}