@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@font-face {
	font-family: "trek_regular";
	src: url(fonts/trek_regular.ttf);
}
@font-face {
	font-family: "keep_on_truckin";
	src: url(fonts/keep_on_truckin.ttf);
}
@font-face {
    font-family: 'final_frontier_old_styleRg';
    src: url('fonts/webfontkit/finalold-webfont.woff2') format('woff2'),
         url('fonts/webfontkit/finalold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.photos .theme {
	font-size: 300%;
}
#header-container {
	padding: 2ex 0 2ex 1em;
	width: 92%;
    display: grid;
    gap: 0;
	grid-template-columns: auto minmax(65%, 2fr);
	grid-template-rows: auto 1fr;
}
#weeMLogoLeft {
	padding-right: 0.5rem;
	grid-row: 2;
	grid-column: 1;
	justify-self: center;
	align-self: center;
}
.photos .superhead {
	color: var(--SlateBlue);
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 100%;
	font-weight: normal;
	text-align: center;
	margin: 0;
	padding: 0 1em 1ex 0;
	grid-row: 1;
	grid-column: 1 / -1;
	justify-self: center;
	text-align: center;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: white;
}
#weem-headings, .photos #weem-headings {
	width: 100%;
	grid-row: 2;
	grid-column: 2;
	align-self: center;
	container-name: headings;
	container-type: inline-size;
	display: grid;
}
.photos .theme {
	font-family: Roboto, Montserrat, Helvetica, Verdana, Arial, "Font Awesome 6 Free", "sans-serif";
	font-size: 375%;
	line-height: 100%;
	margin: 0;
	justify-self: center;
	text-align: center;
	grid-row: 1;
	grid-column: 1;
}
.photos .logo-wide .theme {
	font-size: 400%;
}
.theme.groovy {
	font-family: 'keep_on_truckin', Roboto, cursive;
}
.photos .title {
	font-size: 250%;
	font-weight: bold;
	margin: 0;
	justify-self: center;
	text-align: center;
	align-self: center;
	grid-column: 1;
	grid-row: 2;
}
.photos.w2016 .title {
	font-size: 400%;
}
.photos .date {
	font-size: 100%;
	grid-column: 1;
	grid-row: 3;
}
.photos .date, #weem-headings .date span {
	color: grey;
}

#weem-headings .bits {
	font-family: 'Press Start 2P', cursive;
	font-size: 60%;
}

.photos #header-container {
	width: 88%;
    display: grid;
    gap: 0;
    grid-template-columns: 44% 1fr;
    grid-template-rows: auto;
}
.photos #header-container.logo-small {
	grid-template-columns: 28% 1fr;
}
.photos #header-container.logo-small #weeMLogoLeft {
	padding-right: 2%;
}

.photos.w2023 .superhead, .photos.w2020 .superhead, 
.photos.w2019 .superhead, .photos.w2018 .superhead, .photos.w2017 .superhead, .photos.w2016 .superhead, .photos.w2015 .superhead, 
.photos.w2014 .superhead, .photos.w2013 .superhead, .photos.w2012 .superhead, .photos.w2011 .superhead, .photos.w2010 .superhead,
.photos.w2009 .superhead, .photos.w2008 .superhead, .photos.w2007 .superhead, .photos.w2006 .superhead, .photos.w2005 .superhead, 
.photos.w2004 .superhead, .photos.w2003 .superhead, .photos.w2002 .superhead, .photos.w2001 .superhead, .photos.w2000 .superhead, 
.photos.w1999 .superhead, .photos.w1998 .superhead, .photos.w1997 .superhead {
	-webkit-text-stroke-width: unset;
	-webkit-text-stroke-color: unset;
}

.photos #header-container.logo-wTheme .theme .disappear,
.photos #header-container.logo-wTheme .theme.disappear {
	display: none;
}
.photos #header-container.logo-wDate .disappear {
	display: none;
}

.photos.w2021 .title {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: white;
	opacity: 60%;
}

.photos.w2019 .date, .photos.w2018 .date, .photos.w2017 .date, .photos.w2016 .date, .photos.w2015 .date, .photos.w2014 .date, 
.photos.w2014 .date, .photos.w2013 .date, .photos.w2012 .date, .photos.w2011 .date, .photos.w2010 .date, 
.photos.w2009 .date, .photos.w2008 .date, .photos.w2007 .date, .photos.w2006 .date {
	color: grey;
}

.photos.w2022 .title {
	font-size: 180%;
}

@media screen and (max-width: 1280px) 
{
	.photos .theme {
		font-size: 350%;
	}
	.photos .logo-wide .theme {
		font-size: 300%;
	}
}
@media screen and (max-width: 1150px) 
{
	.photos .theme {
		font-size: 325%;
	}
	.photos .logo-wide .theme {
		font-size: 250%;
	}
	.header .menu_bar_icon > p, .header .menu_bar_icon > p:hover {
		font-size: 500%;
	}
	.photos #header-container.logo-short.at1150 {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		width: 95%;
	}
	.photos #header-container.logo-short.at1150 .weeMLogoLeft {
		padding: 0;
	}
	.photos #header-container.logo-short.at1150 #weem-headings {
		grid-column: 1;
		grid-row: 3;
	}
	.photos.w2013 #weem-headings {
		margin-top: -2.5ex;
	}
	.photos.w2016 .title {
		font-size: 375%;
	}
}

@media screen and (max-width: 1000px) 
{
	.photos .theme {
		font-size: 300%;
	}
	.photos .logo-wide .theme {
		font-size: 275%;
	}
	.photos.w2022 .theme {
		font-size: 250%;
	}
	.header .menu_bar_icon > p, .header .menu_bar_icon > p:hover {
		font-size: 400%;
	}
	.photos #header-container.logo-short {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		width: 95%;
	}
	.photos #header-container.logo-short .weeMLogoLeft {
		padding: 0;
	}
	.photos #header-container.logo-short #weem-headings {
		grid-column: 1;
		grid-row: 3;
	}
	.photos.w2009 #header-container.logo-short #weem-headings {
		margin-top: -2ex;
	}
	.photos.w2016 .title {
		font-size: 350%;
	}
}

@media screen and (max-width: 999px) 
{
	.photos .theme {
		font-size: 300%;
	}
	.photos .logo-wide .theme {
		font-size: 275%;
	}
}

@media screen and (max-width: 850px) 
{
	.header .menu_bar_icon > p, .header .menu_bar_icon > p:hover {
		font-size: 350%;
	}
	.photos.w2022 #header-container, .photos.w2023 #header-container {
		padding-top: 1ex;
		padding-bottom: 1ex;
		grid-template-columns: 100%;
		grid-template-rows: auto;
		width: 95%;
	}
	.photos.w2022 #header-container .weeMLogoLeft, .photos.w2023 #header-container .weeMLogoLeft {
		padding: 0;
	}
	.photos.w2022 #header-container #weem-headings, .photos.w2023 #header-container #weem-headings {
		grid-column: 1;
		grid-row: 3;
	}
	.photos .theme {
		font-size: 250%;
	}
	.photos .logo-wide .theme {
		font-size: 200%;
	}
	.photos.w2003 .theme {
		font-size: 200%;
	}
	.photos.w2022 .theme, .photos.w2023 .theme {
		display: none;
	}
	.photos.w2020 #weeMLogoLeft {
		margin-top: -2ex;
	}
	.photos .title {
		font-size: 200%;
	}
	.photos.w2016 .title {
		font-size: 300%;
	}
	.photos .theme.hide.early, .photos. theme span.hide.early, .photos .date span.hide.early {
		display: none;
	}
}
@media screen and (max-width: 800px) 
{
	.photos .theme {
		font-size: 200%;
	}
	.photos .logo-wide .theme {
		font-size: 175%;
	}
	.photos.w2021 .theme {
		font-size: 250%;
	}
	.photos.w2016 .title {
		font-size: 350%;
	}
}
@media screen and (max-width: 650px) 
{
	.photos.w2009 #header-container.logo-short, .photos.w2021 #header-container  {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		width: 95%;
	}
	.photos.w2009 #header-container.logo-short .weeMLogoLeft, .photos.w2021 #header-container .weeMLogoLeft {
		padding: 0;
	}
	.photos.w2009 #header-container #weem-headings, .photos.w2021 #header-container #weem-headings {
		grid-row: 3;
		grid-column: 1;
	}
	.photos .theme {
		font-size: 175%;
	}
	.photos .logo-wide .theme {
		font-size: 165%;
	}
	.photos.w2009 #weem-headings .theme span.hide {
	 	display: none;
	}
	.photos.w2021 #header-container #weeMLogoLeft {
		max-width: 85%;
	}
	.photos.w2021 #header-container #weem-headings {
		margin-top: -6ex;
	}
	.photos.w2021 .theme {
		display: none;
	}
}

/* Small Screen Rules */
@media screen and (max-width: 515px) 
{	
	.header .menu_bar_icon > p, .header .menu_bar_icon > p:hover {
		font-size: 250%;
	}
	.photos #header-container, .photos #header-container.logo-small {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		width: 95%;
	}
	.photos #header-container .weeMLogoLeft {
		padding: 0;
	}
	.photos #weem-headings {
		grid-column: 1;
		grid-row: 3;
	}
}
@media screen and (min-width: 1100px) 
{
	.photos.w2021 .theme {
		font-size: 400%;
	}
	.photos.w2016 .title {
		font-size: 500%;
	}
}

@media screen and (min-width: 850px) 
{
	.photos .superhead {
		font-size: 130%;
	}
}