/*This is the CSS for Lab 2: CSS Crash Course */
/* Goal 1: CSS Selectors */
body {
    background-color: lightgrey;
}
.t1{
    text-align: right;
}
#t2{
    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 */
.bold{
    font-weight: bold;
}

.italic{
    font-style: italic;
}

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

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

/* font families - Google*/
.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;
}

.grid-parameterized{
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    grid-template-rows: auto;
    justify-items: center;
}