/*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   */
.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);
}

.text-red {
    color: red;
}

.text-green {
    color: green
}

.text-blue {
    color: blue
}

.text-white {
    color: white;
}

/*   Goal   3:   CSS   Fonts   */
.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.large-text {
    font-size: 22px;
}

.small-text {
    font-size: small;
}

.arial-font {
    font-family: 'Arial';
}

.hangers-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;
}

.margin {
    margin: 20px;
}

.padding {
    padding: 20px;
}

.container {
    width: 90%;
    margin: auto;
}
/*   Goal   5:   CSS   Sizing   */
.shrink-to-viewport {
    max-width: 100%;
    max-height: 100%;
}

.force-full-viewport {
    width: 100%;
    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; 
    /* Fixed means it is attached to the background(it doesnt move when expanding the window) */
}

.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 ;   
}