/* Adds multiple fonts to body, changes the background color to grey, and adjusts the text */
body {font-family: Arial, sans-serif; background-color: #1224;
  color: #333; margin: 20px; line-height: 1.6; }

/*In ID styled the background color is changed, and adds a border while adjusting the text to fit in the border */
#styled {background-color: #f0f8ff; border: 2px solid #4a90e2;
  border-radius: 10px; padding: 20px; margin-top: 30px;}

/*changes the color of the text and changes the font and size of the text specifically in that class */
.highlightText {color: #e63946; font-family: 'Comic Sans MS', sans-serif; font-size: 1.3em; }

/*makes the class text bold and changes the color */
.emphasis {font-weight: bold; color:#457b9d; }

/*makes it so the text in this class in underlined */
.underline {text-decoration: underline; }

/*makes the text uppercase in this class */
.uppercase {text-transform: uppercase; }

/*changes the font and color while also making in italic for this ID */
#fontExample {font-family: 'Courier New', monospace;
  color: #1d3557; font-style: italic; }

/*gives the background of this class a gradient look while also making a border to give it a shadow backdrop */
.backgroundDemo { background: linear-gradient(135deg, #ffafbd, #ffc3a0);
  padding: 15px; margin: 15px 0; color: #222; border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); }

/*Makes it possible for this class to transition colors while its being hovered over and also aligns it closer to the middle */
.transitionBox { background-color: #48cae4; padding: 15px; margin: 15px 0;
  text-align: center; border-radius: 10px; transition: background-color
    0.5s, transform 0.5s; }

.transitionBox:hover {background-color: #0077b6; transform: scale(1.1); }

/*allows this class to transform by rotating when being hovered over while aligning the text */
.transformBox { background-color: #ffd166; padding: 15px; text-align: center;
  border-radius: 10px; margin: 15px 0; transition: transform 0.5s; }

.transformBox:hover { transform: rotate(10deg) scale(1.2); }

/*adds a key frame to allow the text in class bounce to be able to bounce infinitly */
@keyframes bounce {0%, 100% {transform: translateY(0); } 50% { transform: translateY(-10px); } }

.bounce {display:inline-block; color: #06d6a0; animation: bounce 1s infinite; }

/*adds a backdrop shadow to the image */
.imageShadow { width:400px; height:auto; box-shadow: 0 2px 36px rgba(0, 0, 0, 10); margin: 10px; }

/*Makes the image have rounded edges and a border but also while hovering transforms the image by changing the scale of the image */
.imageRounded { width:500px; height: auto; border-radius: 20px; border: 3px solid #8338ec;
  transition: transform 0.5s; margin:10px; }

.imageRounded:hover {transform: scale(1.1); }
  
/* Changes the size of the letter the color and adds a border to the top of the footer to seperate it from the main body */
footer { font-size: 0.9em; color: #666; border-top: 1px solid #ccc; padding-top: 10px; }

/* adds a specfic color to links when not being used */
a {color: #0066cc; text-decoration: none; }

/* while hovering links changes color and adds underline */
a:hover {color: #003366; text-decoration: underline; }

/* changes color when the link has been visited */
a:visited {color: #800080; }