@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Space+Grotesk:wght@600&display=swap');

/* global styles */
:root{
	--colour-bg-dark: #24272b;
	--colour-bg-normal: #2B2F35;
	--colour-bg-light: #383d45;
	--colour-light: #808080;
	--colour-text-light: #fff;
	--colour-text-dark: #d3d3d3;
	--colour-text-xdark: #24272b;
	--colour-text-orange: #ffb700;

	--colour-primary: #00d8ff;
	--colour-primary-dark: #008299;
	--colour-secondary: #06ffd9;
	--colour-secondary-dark: #009982;

	--link-not-visited:rgb(96, 115, 224);
	--link-visited:rgb(159, 11, 218);

	--animation-time: 1s;
	--short-animation-time: 0.1s;
}

a{
	color: var(--link-not-visited);
}
a:visited{
	color: var(--link-visited);
}

body {
	margin: 0;
	background: var(--colour-bg-normal);
	min-height: 100vh;
	font-family: 'Space Grotesk', sans-serif;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

a:focus-visible{
	outline: 2px solid var(--colour-primary);
}

/* header */

header {
	overflow: hidden;
	background-color: var(--colour-bg-dark);
	/* padding: 20px 10px; */
	border-bottom: 1px solid var(--colour-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 15;
	position: relative;
	grid-row: 1;
}

header .logo{
	transition: scale var(--short-animation-time);
}

header .logo:hover,
header .logo:focus-visible{
	scale: 1.05;
	outline: none;
}

header .logo:focus-visible > img{
	outline: 3px double var(--colour-primary);
}

header .logo > img {
	border-radius: 5px;
	width: 64px;
	height: 64px;
	display: block;
}

header .title {
	color: var(--colour-text-light);
	font-size: 40px;
	margin: 0;
	height: min-content;
}

header .menu {
	width: 64px;
	cursor: pointer;
	height: 64px;
}

header .menu>img{
	width: 100%;
	display: block;
}

#menuCheckbox{
	display: none;
}

header > a,
header > label{
	padding: 20px 10px;
}

/* menu */

.burger-bar{
	transform-origin: center;
	transition: transform var(--animation-time);
}

.menu{
	transition: scale var(--short-animation-time);
}

.menu:hover,
.menu:focus-visible{
	scale: 1.075;
	outline: none;
}

.menu:focus-visible > svg{
	outline: 2px solid var(--colour-primary);
}


#menuCheckbox:checked + header > label .burger-menu .burger-bar.top{
	transform: rotate(45deg) translate(0,calc(4 / 18 * 100%));
}

#menuCheckbox:checked + header > label .burger-menu .burger-bar.mid{
	transform: rotate(45deg);
}

#menuCheckbox:checked + header > label .burger-menu .burger-bar.low{
	transform: rotate(315deg) translate(0,calc(4 / 18 * -100%));
}

#menuCheckbox:checked + header > label .burger-menu{
	transform: rotate(180deg);
	/* transform: rotate(360deg); */
	/* transform: rotate(720deg); */
	/* transform: rotate(1080deg); */
	/* transform: rotate(2160deg); */
}

.burger-menu{
	transition: transform var(--animation-time);
	width: 100%;
	color: var(--colour-text-light);
	transform-origin: center;
}

#menuCheckbox:not(:checked) ~ .menu-content{
	transform: translateY(-100%);
}
.menu-content{
	color: var(--colour-text-light);
	grid-row: 2;
	grid-column: 1;
	display:flex;
	flex-direction: column;
	background:var(--colour-bg-dark);
	z-index: 10;
	width:20em;
	height:min-content;
	border: 1px solid var(--colour-light);
	border-top: none;
	border-bottom: none;
	transform: translateY(0);
	transition: transform var(--animation-time);
	justify-self: end;
}
#menuCheckbox:checked ~ .menu-content{
	animation: slide var(--animation-time);
	display:flex;
}
#menuCheckbox:not(:checked) ~ .menu-content.hidden{
	display: none;
}
@keyframes slide {
	0%{
		transform: translateY(-100%);
	}
	100%{
		transform: translateY(0);
	}
}

.menu-link-button{
	padding: 0.5em 0;
	width:100%;
	height:min-content;
	background:var(--colour-bg-normal);
	text-align:center;
	color:var(--colour-text-light);
	border-bottom: 1px solid var(--colour-light);
	text-decoration: none;
}

.menu-link-button > span{
	display: inline-block;
	transition: scale var(--short-animation-time);
}

.menu-link-button:hover > span,
.menu-link-button:focus-visible > span{
	scale: 1.1;
}

.menu-link-button:focus-visible{
	z-index: 20;
}

nav.menu-content a{
	color: currentColor;
}

/* main */

main{
	display: flex;
	gap: 3em;
	padding: 3em;
	flex-wrap: wrap;
	justify-content: space-between;
	grid-row: 2;
	grid-column: 1;
}

/* link panels */

.panel-link {
	width: 18em;
	height: fit-content;
	background: var(--colour-bg-light);
	opacity: 70%;
	font-size: 1.2rem;
	border: 1px solid var(--colour-light);
	transition: scale var(--short-animation-time),opacity var(--short-animation-time);
	padding: 0.5em;
	text-decoration: none;
	cursor: pointer;
}

.panel-link *{
	cursor: inherit;
}

.panel-link:hover,
.panel-link:focus-visible {
	scale: 1.05;
	opacity: 100%;
}

.panel-link>h2 {
	text-align: center;
	padding: .25em;
	color: var(--colour-text-light);
}

.panel-link>p {
	text-align: center;
	margin: 0;
	color: var(--colour-text-dark);
	font-family: 'Roboto', sans-serif;
}

/* download panels */

.download-panel{
	display: grid;
	grid-template-areas:"title title title"
						"img subtitle info"
						"details details info";
	background-color: var(--colour-bg-light);
	grid-template-columns: min-content 2fr 1fr;
	grid-template-rows: min-content min-content 1fr;
	color: var(--colour-text-light);
	border-radius: .5em;
	align-items: start;
	width: 100%;
}
.download-panel p{
	margin: 0;
}
.download-panel h3{
	margin: .5em 0;
}
.download-panel > h2{
	grid-area: title;
	border-bottom: 2px solid var(--colour-primary);
	margin: 0;
	padding: .8em;
}
.download-panel > .icon{
	grid-area: img;
	height: 3em;
	aspect-ratio: 1/1;
	margin:.5em;
}
.download-panel > .icon > img{
	max-height: 100%;
	max-width: 100%;
	height: 100%;
	width: 100%;
}
.download-panel > .title{
	grid-area: subtitle;
}
.download-panel > .details{
	grid-area: details;
	margin: 0.5em;
	border-top: 1px solid var(--colour-light);
}
.download-panel > .download-info{
	grid-area: info;
	background-color: var(--colour-primary-dark);
	margin: 1em;
	display: flex;
	flex-direction: column;
	border-radius: .5em;
	overflow: hidden;
	color: var(--text-colour-light-dark);
}
.download-panel > .download-info > h3{
	margin: 0;
	background-color: var(--colour-secondary-dark);
	/* color: var(--colour-text-xdark); */
	padding: .3em .5em;
	font-size: 1.3rem;
}
.download-panel > .download-info > ul{
	list-style-type: none;
	padding: 0;
	margin: .5em;
}
.download-panel > .download-info > ul > li{
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--colour-secondary-dark);
	gap: 1em;
}
.download-panel > .download-info > button{
	margin: .5em;
	padding: 1em;
	border: none;
	background-color: var(--colour-secondary-dark);
	color: var(--colour-text-light);
	border: 1px solid var(--colour-secondary);
	border-radius: .5em;
	transition: margin 0.05s, padding 0.05s;
}
.download-panel > .download-info > button:hover,
.download-panel > .download-info > button:focus-visible{
	cursor: pointer;
	margin: .45em .4em;
	padding: 1.05em 1.1em;
	/* not a scale as it messes with text */
}
.download-panel > .download-info > button:focus-visible{
	outline: 3px solid var(--colour-primary);
}
.download-panel .sub-text{
	font-size: .8rem;
	color: var(--colour-text-orange);
}
footer{
	grid-row: 3;
	background-color: var(--colour-bg-dark);
	padding: .5em;
	color: var(--colour-text-dark);
}