/* General Reset */
body, h1, h2, h3, p, ul, li, a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

/* Global Styles */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    background: #f1f1f1;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
header {
    text-align: center;
    background: #acbfbd;
    color: #fff;
    padding: 1rem 0;
    width: 100%;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

header .highlight {
    color: #ffd700;
}

header p {
    font-size: 1.2rem;
}

/* Main Layout */
main {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    gap: 1rem;
}

/* Image Section */
.image-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-section img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#tux.flip {
    transition: transform 1s ease-in-out; /* Smooth flipping effect */
}

.flip {
    transform: rotateZ(360deg);
}

/* Content Section */
.content-section {
    flex: 2;
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.content-section h2 {
    font-size: 1.8rem;
    //color: #005bb5;
    //color: #008080;
    color: #0c94a6;
    margin-bottom: 1rem;
}

.content-section p, .content-section ul {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.content-section ul li {
    margin-left: 1.5rem;
    list-style: circle;
}

.content-section a {
    color: #0c94a6;
    text-decoration: none; /* Optional: Removes the underline */
}

.content-section a:hover {
    text-decoration: underline; /* Optional: Adds underline on hover */
    color: #007f8c; /* Optional: Slightly darker color on hover */
}


/* Footer */
footer {
    background: #acbfbd;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
    width: 100%;
}

footer a {
    color: #00838f; /* Slightly lighter teal */
    text-decoration: none; /* Optional: Removes the underline */
}

footer a:hover {
    text-decoration: underline; /* Optional: Adds underline on hover */
    color: #006064; /* Deep teal */
}


/* Responsive Styles */
@media (max-width: 768px) {
    main {
        flex-direction: column;
    }

    .image-section {
        order: 1;
    }

    .content-section {
        order: 2;
    }

    .image-section img {
        max-width: 80%;
    }
}


/* trademark disclaimer */
.popup {
	display: none; /* Hidden by default */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	border: 1px solid #ccc;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	z-index: 1000;
}

.popup p {
	margin-bottom: 1em;
}

.overlay {
	display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

#closePopup {
	/* pointy finger when hovering over close button */
	cursor: pointer;
}