/* Style sheet and documennt made by: Alexander Durkin
    Course: Macomb Community College, ITWP1050
    This assignment showcases Roblox from the past vs Roblox from the present and why some people prefer the past. */
body {
    background: linear-gradient(to right, 
    #36E1E6 0%,   /* Starts with Teal */
    #5D96E2 50%,  /* Then goes to a light blue */
    #5260FF 100%  /* Darker blue at the end */
);

    line-height: 1.8; /* Bumps up line spacing, better readability. */
    font-size: 1.1em;
    color: #000000; /* Black Text Color */
    text-align: center;
}

* { /* This is the universal selector! */
    line-height: 1.6; /* Sets the line height for the entire document using the universal selector! */
}

@font-face { /* This contain the code for the font-face requirement */
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.woff2') format('woff2'),
         url('fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  /* I had some trouble applying the clip properties so i did look some elements up to debug this */
  .header {
    background: url('https://media.forgecdn.net/attachments/546/824/preview-day-2.png') center/cover no-repeat;
    background-clip: border-box;
    border-radius: 10px;
    background-repeat: no-repeat;
    min-height: 50px;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
h1 {
  font-family: 'Poppins', Arial, sans-serif;  /* Font family, Poppins looked good */
  text-align: center;
  font-weight: 600; /* Makes H1 bold */
  font-size: 36px; /* Seems big enough */
  letter-spacing: 2px; /* Letter spacing for better reading */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Text shadow */
  font-variant: small-caps; /* Small caps for text */
  white-space: nowrap; /* Prevents text from doing that wrapping stuff */
  color: #000000;
  margin: 10px 0;
}
.image-container { /* The three elements below are the roblox titles, borrowed from Homework 2 Kei trucks */
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* This Adds spacing between images */
    text-align: center;
}
.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 white;  /* Adds a border to the images of the game titles */
    border-radius: 10px;  /* This tells how much to round the corners */
}
.left-align-bullets {
    text-align: left;  /* Aligns the bullet points to the left! */
}
.left-align-buttons {
    text-align: left;  /* Aligns buttons to the left! */
}
footer {
    margin-top: 50px;  /* Sets the top margin to 50 pixels */
    margin-bottom: 50px;  /* Sets the bottom margin to 50 pixels */
}
/* Style for the text box with white background and black text */
.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 */
}
.source-linkA::after { /* I put an A here for external links out to the internet */
    content: " (external)";
    color: #da2626; /* I chose red here */
}
.source-linkB::before { /*I also put a B for internal and colored it blue, meaning sites within the macomb server. */
    content: " (internal)";
    color: #1043eb; /* I chose blue here because it links to my course homepage, and the college color is blue! */
}
footer {
    margin-top: 20px;  /* Sets the top margin to 50 pixels */
    margin-bottom: 20px;  /* Sets the bottom margin to 50 pixels */
    text-align: center;
}