/* This is the Css for Lab2 */

/* 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-self: 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;
}