/*Reminder...in CSS, a dot (.) marks a class selector, while a hashtag (#) marks an ID selector.*/

/* Styles that apply to all screen sizes */

html {
    height: 100%;
    overflow: auto;
	padding: 0;
    margin: 0;  
}
body {
    height: 100%;
	padding: 0;
    margin: 0;
    background-image: url("../web_images/bricks.png");
    font-family: "Comic Sans MS", sans-serif;
}
div#outer {
    display: table;
    height: 100%;
    width: 100%;
}
div#inner {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
div#container {
	display: flex;
	flex-direction: column;
	justify-content: center;
    min-width: 800px;
    min-height: 580px;
}
img {
    width: 200/* was 500*/px;
    height: 100/* was 330*/px;
    margin: 30px 0;
}
p#header {
    font-size: 108px;
/*    color: #323C46;*/
    text-align: center;
    line-height: auto;
    margin-top: 0;
    margin-bottom: 20px;
}
p#paragraph {
    font-size: 20px;
    color: #323C46;
    text-align: center;
  transform: rotate(-10deg); /* Rotate text 45 degrees clockwise */
}

.gradient-text {
  font-size: 120px;
  background: linear-gradient(to right, #512727, #3a0606); /* Gradient direction and colors */
  -webkit-background-clip: text; /* Clip background to text (WebKit browsers) */
  background-clip: text;        /* Standard property (modern browsers) */
  color: transparent;           /* Make text color transparent */
  opacity: 0.6;
  transform: rotate(-10deg); /* Rotate text 45 degrees clockwise */
/*display: inline-block;  Ensures the transform works on inline elements */
}