/* **************************************** */
/* Colors
	 blue* = rgb(69,159,242)
	 pink* = rgb(252,61,147)
	 purple* = rgb(56,42,174)
	 lt blue = rgb(152, 230, 230)
	 lt pink = rgb(255, 204, 255)
	 green = rgb(153, 230, 153)
	 mint = rgb(128, 255, 229)
	 yellow-green = rgb(206,240,135)
	 orange = rgb(237,123,69)		
	 
	 about = #aaaaaa
	 fiber = #993333
	 music = #009999
	 culinary = #66AA33
	 running = #FF6633
	 data = #996666
	 contact = black*/
/* **************************************** */



:root {
	--content_w: 640px;
	--ratio: 1;
}

@media screen and (max-width: 700px) {
   :root {
    --ratio: .525;
    --content_w: 600px;
  }
}

*{ 
    margin: 0px;
    padding: 0px;
}


body {
	font-family: "Gantari", sans-serif;
	background: white;
	background-image: url("images/2021_bg.jpg");
	background-size: cover;
	background-position: left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
}

#nav {
	z-index: 100;
	top: 0px;
	width: 100%;
	padding: 0px;
	background: black;
	font-family: "Leckerli One", cursive;
	color: white;
	position: sticky;

	display: fixed;
	visibility: hidden;
	opacity: 0;

	transition: 0.2s;
}
#nav p {
	cursor: pointer;
}

#wrapper {
	z-index: 0;
	background-image: url("images/mtd_bg_flower.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right -100px bottom 0px;
	background-attachment: fixed;
	filter: grayscale(100%);
	position: fixed;
	margin: 0px;
	width: 100%;
	height: 100%;
	padding: 0px;
	top: -5;
	left: -5;
	overflow-x: hidden;
	transition: 0.2s;
	/*because i'm not sure if I want to flip the flower or not...*/
	    -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
} 


#heading, #content {
	z-index: auto;
	width: calc(var(--content_w) * var(--ratio));
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow-x: hidden;
}

#heading {
	top: 0px;
	margin-bottom: 10px;
	padding-left: calc(32px * var(--ratio));
	filter: drop-shadow(1px 1px white);
	transition: all 0.2s;
	height: calc(160px * var(--ratio));
	background-image: url("images/mtd_title.png");
	background-size: 95% auto;
	  -webkit-background-size:  95%  auto;
	  -moz-background-size:  95%  auto;
	  -o-background-size:  95%  auto;
	background-repeat: no-repeat;
	background-position: left 15px bottom;
}
#heading:hover {
	filter: drop-shadow(calc(2px*var(--ratio)) calc(2px*var(--ratio)) calc(2px*var(--ratio)) gray);
}



h1, h3, h4, #nav {
	font-size: calc(42pt * var(--ratio));
	font-family: "Leckerli One", cursive;
	font-weight: 400;
	font-style: normal;	
}
h1, h3, h4 {
	margin: 10px auto;
}
h1 {
	font-size: calc(42pt * var(--ratio));
	color: rgba(255,255,255,0);
}

h3, #nav {
	font-size: 18pt;
}
h4 {
	color: black;
	font-size: 14pt;
	border-bottom: 1px dotted black;
	padding-top: 10px;
}

#content p {
	padding-top: 7px;
}

hr {
	border-top: 1px dotted gray;
	padding: 20px auto 15px auto;
	display: block;
	position: relative;
	clear: both;
}


#content {
	height:100%;
	margin-bottom: 100px;
}

#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    background-color: rgba(0,0,0,0.45);
	z-index: 2;
	cursor: zoom-out;
	overflow:hidden;
}
#centerImg {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	cursor: zoom-out;
}
#centerImg img {
	width: calc(var(--content_w) * var(--ratio)); 
	height: calc(var(--content_w) * var(--ratio));
	border-radius: 5px;
	}
.zoom {
	cursor: zoom-in;
	border-radius: 5px;
	width: calc(115px * var(--ratio));
	height: calc(115px * var(--ratio));
}
.caption {
	font-size: 8pt;
	width: 100%;
	position: absolute;
	color: white;
	background-image:linear-gradient(to right, rgb(0,0,0,.5) , rgb(0,0,0,0));
	margin: 2px 0 0 0;
	padding: 5px;
	border-radius: 5px;
	font-weight: bold;
}
.ext-logo {
	border-radius: 5px;
}

details {
	background-color: #ffffffcc;
	border-radius: 15px;
	margin: 4px;
}
	
summary {
	list-style: none;
	display: block;
	padding: 8px 8px 8px 8px;
	border-radius: 15px;
	border: 2px solid white;
	transition: 0.2s;
	cursor: pointer;
}
summary::-webkit-details-marker {
	display: none;
}
article {
	padding: 0px 20px 40px 20px;
}
article ul {
	display: contents;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
article li {
	list-style-type: none;
	padding: 8px 0px 4px 0px;
	clear: both;
}


summary:hover {
	box-shadow: 0px 0px 5px gray;
}
summary:focus {outline: none;}
summary:focus-visible {outline: 2px dotted #000000;}

.sec_title {
	font-weight: calc(400 * (1/var(--ratio)));
	font-size: calc(16pt * (var(--ratio)^.35 ));
	line-height: calc(24pt * var(--ratio) );
	display: inline-block;
	vertical-align: middle;
}
.sec_icon {
	display: inline-block;
	width: 75px;
	height: 75px;
	background-color: white;
	border-radius: calc(75px /2);
	background-image: url("images/section_icons_2025.png");
	background-size: cover;
	background-repeat: no-repeat;
	border: 1px solid white;
	margin: 2.5px 10px 2.5px 2.5px;
	vertical-align: middle;
}
.sec_icon_small {height: 25px; width: 25px; }
.sec_icon_about { background-position-x: 0.18%; }
.sec_icon_fiber { background-position-x: 16.67%; }
.sec_icon_music { background-position-x: 33.34%; }
.sec_icon_culinary { background-position-x: 50%; }
.sec_icon_running { background-position-x: 66.68%; }
.sec_icon_data { background-position-x: 83.35%; }
.sec_icon_contact { background-position-x: 100%; }

#about summary {
	background: #aaaaaacc;
	color: black;
}
#about summary:hover {
	background: #ffffff;
	color: black;
}
#fiber summary {
	background: #993333cc;
	color: white;
}
#fiber summary:hover {
	background: white;
	color: black;
}

#music summary {
	background: #009999cc;
	color: white;
}
#music summary:hover {
	background: white;
	color: black;
}

#culinary summary {
	background: #66AA33cc;
	color: white;
}
#culinary summary:hover {
	background: white;
	color: black;
}

#running summary {
	background: #FF6633cc;
	color: white;
}
#running summary:hover {
	background: white;
	color: black;
}

#data summary {
	background: #996666cc;
	color: white;
}
#data summary:hover {
	background: white;
	color: black;
}

#contact summary {
	background: #333333cc;
	color: white;
}
#contact summary:hover {
	background: white;
	color: black;
}

#personal_bests {
	font-size: 10pt;
}
#personal_bests th {
	text-align: right;
}



.year, .goal {
	font-weight: bold;
	width: 50px;
	padding-right: 5px;
	text-align: left;
	clear: both;
}
.goal {
	color: inherit;
}
.milestone {
	display: inline-block;
	width: 87%;
	text-align: left;
	float: right;
	height: auto;
}

#personal_bests {
	border: 1px dotted orange;
}
#personal_bests td, #personal_bests th {
	vertical-align: top;
}

.external, .external:visited
{
	padding: 0px 3px 0px 3px;
	text-decoration: none;
	color: black;
	text-decoration-style: wavy;
	text-decoration-color: black;
	text-decoration-line: underline;
}
.external:hover {
	box-shadow: silver;
	background-image: url('images/link_arrow.png');
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 10px;
	text-decoration-style: solid;
	text-decoration-color: inherit;
	text-decoration-line: underline;
	transition: all .25s;
}

.close {
	padding: 10px;
	margin: 2px;
	opacity: .67;
	text-align: right;
	color: #ffffff;
	cursor: pointer;
}
.close a {
	padding: 3px;
	cursor: pointer; 
	bottom: 0; right: 0;
	border-radius: 10px;
}
.close a:hover { 
	box-shadow: 0px 0px 5px gray; 
	border-radius: 10px; 
	border: 1px dotted black;
}


#footer {
	font-size: calc(10pt  * (var(--ratio) * .9));
	width: 100%;
	position: fixed;
	bottom: 0px;
	background: #ffffffcc;
	margin: 0px;
	overflow-x: hidden;
}
#footer p, #nav p {
	width: calc( var(--content_w) * var(--ratio));
	margin: auto;
    padding: calc(5px * var(--ratio)) 0px 5px 20px;
}