body {
    font-family: Verdana, sans-serif;
}

a {
    color: inherit;
}

h1, h2, h3 {
    font-family: "Major Mono Display", monospace;
}

.mainp,
.footp {
    font-size: large;
}

/* Layout stuff */

.fullWidth {
    position: relative;
    width: 100%;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

.responsiveBox {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.flexBreak {
    flex-basis: 100%;
    height: 0;
}

.indent {
    padding-left: 2em;
}

.logoImage {
    width: 192px;
    height: 192px;
    background-image: url('assets/tm-icon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.12s ease-in-out, transform 0.22s ease-out;
}

.logoImage:hover {
    background-image: url('assets/tm-rainbow.png');
    transform: scale(1.1);
    transition: transform 0.22s cubic-bezier(0.34, 1.7, 0.64, 1);
}

.yearBar {
    background: #000;
    color: white;
    font-size: xxx-large;
    font-family: "Major Mono Display", monospace;
    font-weight: 900;
    padding: 0.2em 0;
    display: flex;
    justify-content: center;
    text-shadow:
        -2.5px 1px 0 rgba(255, 0, 0, 1),
        2.5px -1px 0 rgba(0, 230, 230, 1);
}

.gameTitle {
    font-size: xxx-large;
    font-weight: 900;
    padding: 0.2em;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gameContent {
    font-size: large;
    padding-bottom: 12px;
}

.navBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: lightgray;
    padding: 0.5em;
    row-gap: 12px;
}

.navBar div,
.contactBox div {
    font-family: "Major Mono Display", monospace;
    font-weight: 900;
    font-size: xx-large;
    padding: 0.5em;
    margin: 0 6px;
    border: 0.1em solid black;
	border-image-slice: 1;
    transition: background-color 0.06s ease-out, transform 0.06s ease-out;
}

.navBar div:hover,
.contactBox div:hover {
    border-image-source: linear-gradient(
        60deg,
        red, orange, yellow, green, blue, indigo, violet
    );
    background-color: rgba(255,255,255,0.6);
    transform: scale(1.14);
}

.navBar a,
.contactBox a {
	text-decoration: none;
	color: inherit;
}

.appStoreBadge {
	height:70px !important;
	max-width: 95%;
	margin: 0px 12px;
}

.appStoreBadgeSm {
	height:40px !important;
	margin: 0px 12px;
}

.comingSoonGrey{
	filter: saturate(0%) brightness(20%) contrast(50%);
}

.linkBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(255,255,255,0.4);
    margin-top: 12px;
    border-radius: 999px;
    padding: 0.4em 1em;
    gap: 8px;
}

.linkBar p {
    margin: 0;
    padding: 0;
}

.screensBar {
    overflow: auto;
	-webkit-overflow-scrolling: touch; /* smooth mobile scrolling */
    white-space: nowrap;
    padding: 0.5em;
    background-color: rgba(128,128,128,0.2);
}

.screensBar img {
    height: 140px;
    transition: transform 0.06s ease-out;
}

.screensBar img:hover {
    transform: scale(1.08);
    z-index: 100;
}

.portraitScreens img {
    width: 128px !important;
    height: auto !important;
}

.bigPortraitScreens img {
    width: 300px;
    max-width: 35%;
    height: auto;
    max-height: none;

    border: thick solid #020202;
    border-radius: 1.5em;
    margin: 0 20px;
}

.videoEmbed {
    aspect-ratio: 16 / 9;
    width: 800px;
    min-width: 60% !important;
    max-width: 95%;
}

.videoBox {
    background-color: #02020230;
    padding: 0.5em;
}

.blurBox {
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    margin: 8px 0;
    border-radius: 1.4em;
}

.quoteBox {
    background-color: whitesmoke;
    padding: 0.2em 1em;
    border-radius: 0.5em;
    box-shadow:
        -2.5px 0 0 rgba(255, 0, 0, 1),
        2.5px 0 0 rgba(0, 230, 230, 1);
}

/*.iconsBar {
    display: flex;
    justify-content: center;
    align-items: center;
	padding-bottom:6px;
    gap: 8px;
	color:black;
    font-weight: 900;
}*/

.iconsBar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.iconsBarInner {
    display: flex;
    flex-wrap: nowrap;
    /*white-space: nowrap;*/
	justify-content: center;
    gap: 8px;
	min-width: max-content;
    padding: 0 1.5em 6px 1.5em;
    color: black;
    font-weight: 900;
    mask-image: linear-gradient(to right, transparent, #000000 10%, #000000 90%, transparent);
}


.platform {
    border: none;
    width: 2.2em;
    height: 2em;
    background-image: var(--iconSrc);
    background-size: auto 2em;
    background-position: center;
    background-repeat: no-repeat;

    flex: 0 0 auto;	/* don't let icons get squashed */
}


.contactBox {
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 14px;
    padding: 0 5%;
    width: 70%;
}

.contactBox img {
	max-width: 1em;
    height: 1em;
}

.contactIcon {
	background:
	linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
	var(--iconSrc);
    background-size: auto 92%;
    background-repeat: no-repeat;
    background-position: center;
}


/* ccc ring-styled bullet points */
.ringBullets{
	list-style-type: circle;
}

.ringBullets li:nth-child(1)::marker { color: rgb(243,71,52);}
.ringBullets li:nth-child(2)::marker { color: rgb(155,47,174);}
.ringBullets li:nth-child(3)::marker { color: rgb(29,151,242);}
.ringBullets li:nth-child(4)::marker { color: rgb(79,174,84);}
.ringBullets li:nth-child(5)::marker { color: rgb(255,192,29);}
.ringBullets li:nth-child(6)::marker { color: rgb(11,149,137);}
.ringBullets li:nth-child(7)::marker { color: rgb(233,30,99);}


/* Icon sources */
.iconAndroid	{ --iconSrc: url('icons/android.svg'); }
.iconApple		{ --iconSrc: url('icons/apple.svg'); }
.iconBluesky	{ --iconSrc: url('icons/bluesky.svg'); }
.iconEmail		{ --iconSrc: url('icons/email.svg'); }
.iconFacebook	{ --iconSrc: url('icons/facebook.svg'); }
.iconGithub		{ --iconSrc: url('icons/github.svg'); }
.iconGog		{ --iconSrc: url('icons/gog.svg'); }
.iconInstagram	{ --iconSrc: url('icons/instagram.svg'); }
.iconItch		{ --iconSrc: url('icons/itch.svg'); }
.iconLinux		{ --iconSrc: url('icons/linux.svg'); }
.iconMastodon	{ --iconSrc: url('icons/mastodon.svg'); }
.iconMobile		{ --iconSrc: url('icons/mobile.svg'); }
.iconPs			{ --iconSrc: url('icons/ps.svg'); }
.iconReddit		{ --iconSrc: url('icons/reddit.svg'); }
.iconSteam		{ --iconSrc: url('icons/steam.svg'); }
.iconSwitch		{ --iconSrc: url('icons/switch.svg'); }
.iconTiktok		{ --iconSrc: url('icons/tiktok.svg'); }
.iconTwitch		{ --iconSrc: url('icons/twitch.svg'); }
.iconWindows	{ --iconSrc: url('icons/windows.svg'); }
.iconX			{ --iconSrc: url('icons/x.svg'); }
.iconXbox		{ --iconSrc: url('icons/xbox.svg'); }
.iconYoutube	{ --iconSrc: url('icons/youtube.svg'); }


/* Responsive nonsense */
@media (min-width: 768px) {
    .responsiveBox {
        width: 70%;
        max-width: 70em;
    }
}

@media (max-width: 767px) {
    .responsiveBox { width: 90%; }
    .linkBar { border-radius: 20px; }
    .navBar div { font-size: larger; }
    .logoImage { width: 144px; height: 144px; }
    .contactBox { width: 96%; padding: 0 1%; }
    .gameTitle, .yearBar { font-size: xx-large; }

	.contactBox div {
		font-size: x-large;
	}

	/* Hide iconsBar scrollbar on mobile */
	/* Chrome, Safari */
	.iconsBar::-webkit-scrollbar {
		display: none;
	}

	/* Firefox */
	.iconsBar {
		scrollbar-width: none;
	}
}

@media (max-width: 496px) {
	.contactBox div {
		font-size: large;
	}

	.contactBox {
		display:flex;
		flex-direction: column;
	}
}