@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');

:root {
    --text: rgba(229, 198, 106, 1);
    --links: rgba(255, 255, 255, 1);
    --main: rgba(137, 9, 8, .75);
    --header: rgba(0, 0, 0, 1);
    --footer: rgba(112, 128, 144, .75);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background-color: black;
}

img {
    max-width: 85%;
    height: auto;
}

/*containers
==========*/
.container {
    width: 95%;
    margin: 0 auto;
    background: linear-gradient(#890909, #690707, #310303);
    padding-top: 5.5rem;
	padding-bottom: 1em;
	padding-left: .5em;
	padding-right: .5em;
}

.container-bulls {
	background: linear-gradient(#890909, #690707, #310303);
	width: 95%;
	margin: 0 auto;
	padding: 1em 1em;
}

@media screen and (min-width: 768px) {
    .container {
        width: 75%;
        padding-top: 14em;
		padding-left: 1em;
		padding-right: 1em;
    }
}

@media screen and (min-width: 1200px) {
    .container {
        width: 85%;
        padding-top: 25em;
    }
	.container-bulls {
		width: 85%;
	}
}

@media screen and (min-width: 1500px) {
    .container {
        width: 55%;
        padding-top: 28em;
    }
	.container-bulls {
		width: 55%;
	}
}

/*typography
==========*/
h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 1.55em;
    background: -webkit-linear-gradient(#eee, #efc66a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
	font-size: 1.25em;
	font-weight: 700;
	color: var(--text);
}

.small {
    font-size: .65rem;
    color: var(--text);
}

p {
	color: var(--text);
}

.bull a {
	color: var(--links);
	text-decoration: none;
}

.bull a:hover {
	font-weight: 600;
	text-decoration: underline;
}

.epds {
	color: var(--text);
}

.epd_label {
	color: white;
	font-size: .75rem;
	font-weight: 700;
}

.epd_num {
	color: var(--text);
	font-size: .75rem;
	font-weight: 700;
}

@media screen and (min-width: 768px) {
    h1 {
        font-size: 2em;
    }
}

@media screen and (min-width: 1200px) {
    h1 {
        font-size: 2.5em;
    }
}

@media screen and (min-width: 1500px) {
    h1 {
        font-size: 3em;
    }
	h2 {
		font-size: 1.75em;
	}
}

/*pictures
==========*/
.picture {
    filter: drop-shadow(.35em .35em .35em);
    padding: 1em;
}
.rcalf-picture {
    max-width: 30%;
    filter: drop-shadow(.35em .35em .35em);
    padding: 1em;    
}

@media screen and (min-width: 768px) {
    .rcalf-picture {
        max-width: 15%;
    }
}

@media screen and (min-width: 1200px) {
    .rcalf-picture {
        max-width: 10%;
    }
}

/*header-nav
==========*/
	header {
		background: var(--header);
		font-family: Acme, sans-serif;
		text-align: center;
		position: absolute;
		margin-top: auto;
		z-index: 999;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
	}

	.logo {
		margin: 0;
		grid-column: 2/7;
	}

	.nav-toggle {
		display: none;
	}

	.nav-toggle-label {
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 1em;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.nav-toggle-label span,
	.nav-toggle-label span::before,
	.nav-toggle-label span::after {
		display: block;
		background: white;
		height: 2px;
		width: 2em;
		border-radius: 2px;
		position: relative;
	}

	.nav-toggle-label span::before,
	.nav-toggle-label span::after {
		content: '';
		position: absolute;
	}

	.nav-toggle-label span::before {
		bottom: 7px
	}

	.nav-toggle-label span::after {
		top: 7px
	}

	nav {
		position: absolute;
		text-align: left;
		top: 100%;
		left: 0;
		background: var(--header);
		width: 100%;
		transform: scale(1,0);
		transform-origin: top;
		transition: transform 400ms ease-in-out;
	}

	nav ul {
		margin: 0;
		padding: .25em;
		list-style: none;
	}

	nav li {
		display: block;
		margin-bottom: 1em;
		margin-left: 1em;
	}

	nav a {
		color: var(--text);
		text-decoration: none;
		font-size: .90em;
		font-weight: 900;
		padding: 0.25rem;
		text-transform: uppercase;
		opacity: 0;
		transition: opacity 150ms ease-in-out;
	}

	nav a:hover {
		color: #fff;
	}

	.nav-toggle:checked ~ nav {
		transform: scale(1,1) 
	}

	.nav-toggle:checked ~ nav a {
		opacity: 1;
		transition: opacity 250ms ease-in-out 250ms;
	}

    @media screen and (min-width: 1200px) {
		.nav-toggle-label {
			display: none;
		}

		header {
			display: grid;
			grid-template-columns: 1fr;
			font-size: .65em;
		}

		.logo {
			grid-column: 1;
			grid-row: 1;
			margin: auto;
			max-width: 75%;
			height: auto;
		}

		nav {
			all: unset;
			grid-column: 1;
			grid-row: 2;
			margin: auto;
			display: flex;
			align-items: center;
		}

		nav a {
			opacity: 1;
			position: relative;
			font-size: 1.25em;
		}

		nav ul {
			display: flex;
		}

		nav li {
			margin-left: 3em;
			margin-bottom: 0;
		}

		nav a::before {
			content: '';
			display: block;
			height: 5px;
			background: #fff;
			position: absolute;
			top: -.75em;
			right: 0;
			left: 0;
			transform: scale(0, 1);
			transition: transform ease-in-out 250ms;
		}

		nav a:hover::before {
			transform: scale(1, 1);
		}
	}

	@media screen and (min-width: 1500px) {
		header,
        nav a {
			font-size: .9em;
		}
	}

    @media screen and (min-width: 2000px) {
		header,
        nav a {
			font-size: 1.25em;
		}
	}

/*footer
==========*/

	footer {
		background: var(--footer);
		font-size: .75rem;
		font-weight: 700;
		color: var(--text);
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: repeat(3, auto);
		justify-content: center;
		align-items: center;
		gap: 1em;
		margin-top: 2em;
		padding: 1em;
	}

	footer a {
		color: inherit;
	}

	.footer-nav {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		list-style: none;
		margin: .5em;
		padding: .5em;
	}

	.footer-nav a {
		text-decoration: none;
	}

	.footer-nav a:hover {
		text-decoration: underline;
	}

	.footer-social {
		grid-column: 2/3;
		grid-row: 1/2;
	}

	.footer-nav,
	.footer-social {
		list-style: none;
		margin: .5em;
		padding: .5em;
	}

	.design {
		font-size: .5rem;
		margin-right: .5em;
		grid-column: 2 / 3;
		grid-row: 2/3;
	}

	.design2 {
		font-size: .5rem;
		margin-right: .5em;
		grid-column: 2 / 3;
		grid-row: 1 / 3;
		align-items: center;
	}

	.counter {
		font-size: .5rem;
		margin-right: .5em;
		grid-column: 1/3;
		grid-row: 3/4;
	}

	@media screen and (min-width: 1200px) {
		footer {
			font-size: 1em;
		}
	}

	/*bulls
	==========*/
	.bulls {
		padding-top: 5.5em;
		padding-bottom: .5em;
		margin: auto;
		align-content: center;
	}

	.epds {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.td {
		background-color: black;
	}

	.footnote p {
		font-size: .85rem;
	}

	@media screen and (min-width: 800px) {
		.bulls {
			padding-top: 12em;
		}
		.bull {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;
			justify-content: center;
		}
		.picture {
			grid-column: 1/2;
			grid-row: 1/3;
			align-self: flex-start;
		}
		.info {
			grid-column: 2/3;
			grid-row: 1/2;
		}
		.epds {
			grid-column: 2/3;
			grid-row: 2/3;
		}
		.footnote {
			grid-column: 1/3;
			grid-row: 3/4;
		}
	}

	@media screen and (min-width: 1200px) {
		.bulls {
			padding-top: 23em;
		}
	}

	@media screen and (min-width: 1500px) {
		.bulls {
			padding-top: 25em;
		}
	}

	@media screen and (min-width: 2000px) {
		.bulls {
			padding-top: 27em;
		}
		.footnote p {
			font-size: 1.25em;
		}
		.footnote {
			padding-left: 2em;
			padding-right: 2em;
		}
	}

/*horizontal rule
==========*/
	hr.bull_hr {
		border: 2px solid white;
		border-radius: 5px;
  	}

/*champions
==========*/
.champion_page p {
	font-size: .75em;
}

@media screen and (min-width:800px) {
	.champion_page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}
}
 @media screen and (min-width:1200px) {
	.champion_page {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1em;
	}
	.champion_page p {
		font-size: .85em;
	}
}

/*history
==========*/
.history_page p {
	font-size: .75em;
}

@media screen and (min-width:800px) {
	.history_page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(5, 1fr);
		align-items: center;
		padding-left: 1em;
		padding-right: 1em;
	}
	.history_page p {
		font-size: .85em;
	}
	.line1_text {
		display: grid;
		grid-row: 1/2;
		grid-column: 1/2;
	}
	.line1_picture {
		grid-row: 1/2;
		grid-column: 2/3;
	}
	.line2_text {
		grid-row: 2/3;
		grid-column: 2/3;
	}
	.line2_picture {
		grid-row: 2/3;
		grid-column: 1/2;
	}
	.line3_text {
		grid-row: 3/4;
		grid-column: 1/2;
	}
	.line3_picture {
		grid-row: 3/4;
		grid-column: 2/3;
	}
	.line4_text {
		grid-row: 4/5;
		grid-column: 2/3;
	}
	.line4_picture {
		grid-row: 4/5;
		grid-column: 1/2;
	}
	.line5_text {
		grid-row: 5/6;
		grid-column: 1/2;
	}
	.line5_picture {
		grid-row: 5/6;
		grid-column: 2/3;
	}
}

/*hunting
==========*/
@media screen and (min-width:800px) {
	.hunting_page {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: repeat(2, auto);
		align-items: center;
		padding-left: 1em;
		padding-right: 1em;
	}
	.hunting_text {
		grid-row: 1/2;
		grid-column: 1/3;
	}
	.hunting_picture1 {
		grid-row: 2/3;
		grid-column: 1/2;
	}

	.hunting_picture1 img {
		max-width: 75%;
		height: auto;
	}
	.hunting_picture2 img {
		max-width: 65%;
		height: auto;
	}
}