/* 2024-olympics-final.html = 2024-olympics-main.css */
html, body {
	font-family:arial,sans-serif; 
	font-size:1rem; 
	background:#e5edf6;
}
* {
	margin:0;
	padding:0;
}
s {
	text-decoration:none;
}
#wrapper {
	width:calc(100vw - 16px); 
	margin:0 auto; 
	background:#e5edf6; 
	overflow:visible;
}
#content {
	width:1155px; 
	margin:0 auto; 
	overflow:auto;
}
table#medals {
	width:100%; 
	border-collapse:collapse;
}
table caption {
	background-image:url('images/2024-olympic-rings-alfa.png'), url('images/2024-olympic-rings-alfa.png');
	background-repeat:no-repeat, no-repeat;
	background-size:10%, 10%;
	background-position:2% 20px, 98% 20px;
	}
caption h1 {
	text-align:center; 
	font-size:3rem; 
	font-weight:bold; 
	color:transparent; 
	-webkit-text-stroke:1px #d00; 
	padding:20px 0 0 0;
}
h1 {
    background-image:url('images/red-white-blue-bg.png');
	background-repeat:no-repeat;
	background-position:left center;
	background-clip:text;
	background-size: 200% 100%;
	background-color:#f00;
	filter:brightness(120%) saturate(150%) hue-rotate(0deg) blur(0px);	
	animation: heading 120s linear infinite;
	line-height:1.25;
	white-space:no-wrap;
	color:transparent;
}
@keyframes heading {
    0% {
        background-position:0% 50%;
    }
    50% {
        background-position:100% 50%;
    }
    100% {
        background-position:0% 50%;
    }
}
caption h2 {
	font-size:2.25rem; 
	font-weight:bold; 
	color:#002395; 
	text-align:center; 
} 
caption h3 {
	font-size:1.5rem; 
	font-weight:normal; 
	margin:15px auto; 
	color:#d00; 
	text-align:center;
}
th, td {
	border:solid 1px #ddd; 
	line-height:3;
	}
th {
	font-size:1.25rem; 
	position:relative; 
	background:#444; 
	color:#fff;
}
th i {
	display:block; 
	width:100%; 
	line-height:1; 
	padding:3px 0; 
	background:#444; 
	text-align:center; 
	font-size:1rem; 
	font-weight:normal;
}
.cenMed {
	width:100%;
	background:transparent;
}
.cenMed sup {
	position:relative; 
	font-size:1.5rem; 
	background:transparent;
}
#medals, caption {
	background:#fff;
}
th:nth-of-type(7) i sup {
	position:relative; 
	top:0px; 
	font-size:small;
}
th:nth-of-type(3), 
th:nth-of-type(4), 
th:nth-of-type(5) {
	position:relative;
}
th:nth-of-type(3) span, 
th:nth-of-type(4) span, 
th:nth-of-type(5) span {
	display:inline-block; 
	text-align:center;
}
th:nth-of-type(3) span {
	color:gold;
}
th:nth-of-type(4) span {
	color:silver; 
	filter:brightness(120%);
}
th:nth-of-type(5) span {
	color:#cd7f32; 
	filter:brightness(150%);
}
tr td:not(td:nth-of-type(2)) {
	text-align:center;
}
tr td:nth-of-type(2) {
	padding-left:120px; 
	font-weight:bold; 
	background-repeat:no-repeat; 
	background-position:5px 5px;
}
td:last-child {
	padding:0 10px;
	text-align:right !important;
}
th:hover, th:hover > i {
	background:#b00; 
	cursor:pointer;
}
td:nth-of-type(1), 
td:nth-of-type(7) {
	font-weight:bold;
}
.sortable-icon {
    position:absolute;
    right:0;
    top:84%;
	font-size:1rem;
    transform:translateY(-50%);
	background:transparent;
  }
  .asc .sortable-icon::before {
    content:'\25E2';
	font-size:125%;
	color:#ff0; /* Highlight color for ascending */
  }
  .desc .sortable-icon::before {
    content:'\25E5';
	font-size:125%;
	color:#fff; /* Highlight color for descending */
  }
#footer{
    min-height:130px; 
	margin:0 auto;  
	display:-webkit-flex; 
	display:flex; 
	font-size:100%; 
	box-sizing:border-box;
	max-width:1155px;
} 
#s1, #s2, #s3 { 
	box-sizing:border-box; 
	min-height:130px; 
	line-height:1.5; 
	float:left; 
	border:solid 1px #ddd; 
	border-top:none; 
	padding:15px 0; 
	background:#fff !important;
}
h4 {
	text-align:center;
}
#s1 {
	width:32.4%;
}
#s2 {
	width:45.975%;
}
#s3 {
	width:21.625%;
}
#s2, #s3 {
	border-left:none;
}
#o1 {
	margin-left:50px;
}
#footer a:link {
	color:#35c;
}
#footer a:visited {
	color:#aaa;
}
#footer a:hover {
	color:#d00;
}
#footer a:active {
	color:purple;
}
#o2 {
	margin-left:26px;
}
#s2 p, #s3 {
	text-align:justify;
	padding:0 10px;
}
#s3 {
	padding:15px 10px;
}
#s3 li:first-child {
	position:relative;
	}
#s3 li:first-child a {
	color:#35c;
}
#s3 li:first-child a:hover {
	color:#d00; 
	cursor:pointer;
}
#o2 li:last-child {
	position:relative;
} 
#copy {
	position:relative; 
	left:0rem; 
	top:0.125rem; 
	font-size:125%; 
	font-weight:bold; 
	color:inherit;
	padding:0 1px; 
	margin:top:-3px; 
	line-height:1;
}
#copy s {
	display:inline-block;
	text-decoration:none;
}
#copy s b {
	display:inline-block; 
	font-size:75%; 
	position:absolute; 
	z-index:5; 
	left:0.3125rem; 
	top:0.125rem; 
	transform:rotate(-45deg);
} 

#notice {
	reset: all;
	margin: 0; 
	padding: 0;
	display: none;
	opacity: 1;
	position: fixed;
	left: 50vw;
	top: 50vh;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 500px;
	height: auto;
	padding: 10px 15px;	
	background: #012169;
	border: solid 1px #444; /*#012169;*/
	border-radius: 6px;
	box-shadow: 5px 5px 20px 2px rgba(0, 10, 15, 0.8);
	font-size: 112.5%;
	font-weight: normal;
	letter-spacing: normal;
}
#notice h3 {
	text-align: center;
	color: #fff;
	margin: 3px 0;
}
#notice hr {
	background: #fff;
	line-height: 0;
	border: 0;
	height: 2px;
	width: 80%;
	margin: 0px auto;
}
#notice p {
	margin-top: 12px;
	padding: 0 8px;
	color: #fff;
	font-size: 100%;
	line-height: 1.3;
	text-indent: 0;
	text-align: justify;
}
#notice h3,
#notice p,
#notice p s {
	filter:brightness(150%);
}
#notice p s {
	text-decoration:none; 
	color:#ff0;
}
#notice {
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: linear;
}
#notice span {
	position: absolute;
	right: 4px;
	top: 4px;
	line-height: .85em;
	font-family: 'comic sans ms';
	font-size: 1em;
	color: #fff;
	//font-weight: bold;
	border: solid 1px #fff;
	border-radius: 4px;
	padding: 2px 3px 3px 3px;
	background: #e00;
}
#notice span:hover {
	cursor: pointer;
	background: #f00;
}