/* THIS CSS PAGE DESIGNED BY JOHN BISHOP is an extremely simple approach to web site design */

/* Independent Selectors */
body {
    background-color: #000;
    overflow-x: hidden;
}

article {
    max-width: 750px;
    margin: 3rem auto;
    padding: 0 2rem;
}

h1, h2, h3, p {
    color: #FFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.2em;
}

h3 {
    font-size: 1em;
}

p {
    font-size: 0.875em;
}

img.rubber {
    height: auto;
    max-width: 100%;
}

table {
    margin: 0 auto;
}
/* the above centres the table */
table {
    border: 0;
}
/* the above styles the border */
#overallContent {
    width: 80%;
    max-width: 1500px;
    min-width: 320px;
    background-color: #000;
    margin: 0 auto;
}

#footerContent {
    background-color: gray;
    text-align: center;
    padding: 0;
    color: white;
    clear: right;
}

/* Grouped Selectors */
p, ul {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #FFF;
    text-align: center;
}

#mainContent p, #mainContent ul {
    padding-bottom: 10px;
    text-align: justify;
}

/* CSS Pseudo Classes - Links */
a img {
    border: none;
}

a:link, a:visited {
    color: #FFF;
}

a:hover {
    color: #FF0;
}

a:active {
    color: #FF0000;
    font-weight: bold;
}

/* Full-screen width images */
.full-screen-width {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    width: 100vw;
}

/* Flex container updaed 9 Feb 2025 at 11pm */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
.container img {
    display: block;
    margin-bottom: -20px; /* Reduced the space between the image and text */
}

.image-container {
	display: flex; 
	flex-wrap: wrap;
	justify-content: space-between;
}

.image-wrapper {
margin: 10px;
flex: 1 1 calc(50% - 20px); /* Adjusts the width of each image-wrapper to take up half the container */
text-align: center;
}

/* Image styling */
img {
    float: left;
    max-width: 100%;
    max-height: 100%;
}

.image-wrap {
    float: left;
    padding-right: 15px;
}

.left {
    float: left;
    padding: 0 15px 0 0;
}

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}

.main-topic {
    border: 1px solid blue;
}

/* Clearfix */
.main-topic::after {
    content: "";
    display: block;
    clear: both;
}

.left-text {
    width: 50%;
    float: left;
}

.right-picture {
    float: right;
    width: 50%;
}

.right-picture img {
    max-width: 100%;
}

/* Text alignment and size modifiers */
.textJustify {
    text-align: justify;
}

.italicText {
    font-style: italic;
}

.textRight {
    text-align: right;
}

.textCenter {
    text-align: center;
}

.textLeft {

	text-align: left;
}
.textLarger {
    font-size: 18px;
}
/* Font size modifier */

.textSmaller {
	font-size: 0.7em; 
}  

.link-wrapper {     
	display: flex;      
	justify-content: flex-end; /* Align content to the right */ 
	align-items: center;
	width: 100%; /* Ensure it takes up the full width available */
}
	
.link-wrapper img {
    margin-left: 8px; /* Adjust spacing between text and image */
}
.link-wrapper a {
	    display: flex;
	    align-items: center;
	    margin-left: 10px; /* Adjust the space between the text and image */
	    text-decoration: none; /* Optional: Remove underline from links */
}

/* Color modifiers */
.textRed { color: red; }
.textRedDark { color: darkred; }
.textRedCrimson { color: crimson; }
.textOrange { color: orange; }
.textOrangeDark { color: darkorange; }
.textYellow { color: yellow; }
.textGreen { color: green; }
.textGreenDark { color: darkgreen; }
.textGreenLawn { color: lawngreen; }
.textGreenLight { color: lightseagreen; }
.textGreenChartreuse { color: chartreuse; }
.textBlue { color: blue; }
.textBlueMedium { color: mediumblue; }
.textBlueSky { color: skyblue; }
.textBlueSkyDeep { color: deepskyblue; }
.textBlueSlate { color: slateblue; }
.textBlueLight { color: lightblue; }
.textBlueCadet { color: cadetblue; }
.textBlueMed { color: #3847F4; }
.textIndigo { color: indigo; }
.textOlive { color: olive; }
.textPurpleR { color: rebeccapurple; }
.textViolet { color: violet; }
.textVioletBlue { color: blueviolet; }
.textVioletDark { color: darkviolet; }
.textShadow { text-shadow: 1 1 3px white; }
.textBackBlueViolet { background-color: blueviolet; }


/* http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fpruart.com%2Fstyle-main.css
No errors found*/