/* This stylesheet was made by Alexadner Durkin
    Macomb Community College, ITWP 1050 (CSS)
    Date 4-13-2025
    Professor: Wanner */

body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    background-color: #FFEBCD; /* Borrowed this from Homework #2 The Kei Trucks */
}
* { /* This is the universal selector! */
    color: #000000; /* I just went with black because of the current background color */
}
/* This is the element that controls the header.*/
.header {
    /* I thought this would look nice as a contrast */
    background: url('https://www.pixelstalk.net/wp-content/uploads/2016/10/Diamond-Pattern-Backgrounds-For-Desktop.jpg') center/cover no-repeat;
    color: white;
    background-clip: border-box;
    border-radius: 10px;
    background-repeat: no-repeat;
    min-height: 50px;
}
h1 {
    font-family: Arial, Helvetica, sans-serif;  /* Font family for font control */
    text-align: center;
    font-weight: 600; /* Makes H1 bold */
    font-size: 36px; /* Makes the text bigger */
    letter-spacing: 2px; /* Letter spacing for better reading */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Text shadow */
    white-space: nowrap; /* Prevents text from doing that wrapping stuff */
    color: #000000;
    margin: 10px 0;
}
.left-align-buttons {
    text-align: left;  /* Aligns buttons to the left! */
}
.text-box {
    color: black;
    padding: 10px;
    border-radius: 10px;
    display: inline-block; /* Makes box text wrap around */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Adds a black shadow around the box */
}

/* NOTE: I did use multiple div elements to have a cleaner and less confusing CSS document. */

.div1, .div2 { /* I put div1 and div two here to keep the formating */
    width: 250px; /* Ensures consistant width */
    height: 200px; /* Keeps aspect ratio */
    transform: skew(-10deg);
}
/* This covers the skew function outlined in the homerwork requirements */
.div2 {
    transform: skew(10deg); /* Skews in the opposite direction */
}
.div3, .div4 {
    width: 250px; /* Makes for consistant width */
    height: 200px; /* Keeps aspect ratio */
    border: 1px solid black;
    rotate: z 10deg;
}
/* this covers the requirement for the rotation function */
.div4 {
    rotate: z -10deg;
}
/* This also covers the scale function requirement in the homework */
.div5 {
    scale: 0.7;
}
.image-container {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1px; /* Adds spacing between images */
    text-align: center;
    justify-content: center; /* Centers images */
    align-items: center; /* Aligns images vertically */
}

.image-container figure { /* Contains the code for the captions */
    text-align: center;
    width: 250px;
}
img {
    max-width: 100%; /* Makes the image fit in its container */
    height: auto;
    border: 2px solid black;  /* Adds a border to the images of the game titles */
    border-radius: 10px;  /* This tells how much to round the corners */
}
.xbox {
    transform: rotate(180deg) scale(1.2) skewX(10deg);
}
/* This is the transistion element for the cool PC effect. */
/* This covers the transition function outlined in the homerwork requirements */

.transition {
    width: 200px;
    height: 150px;
    background: red;
    /* I made it transision out rather than up */
    transition-property: width;
    transition-duration: 2s;
    transition-delay: 1s;
}
/* This tells the pervious element how much to expand out */
.transition:hover {
    width: 400px;
}
/* This is for the PlayStation element */
/* This covers the transform function outlined in the homerwork requirements */

.transform {
    transform: rotate(180deg) scale(1.1) skewX(8deg);
}
/* This controls the footer */
footer {
    margin-top: 20px;  /* Sets the top margin to 50 pixels */
    margin-bottom: 20px;  /* Sets the bottom margin to 50 pixels */
    text-align: center;
}