/*

	TeeAssembler 2.0
	https://github.com/AlexIsTheGuy/TeeAssembler-2.0

	Made by: Aleksandar Blazic
	
*/

html, body {
    background-color: #191919;
    color: #fff;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 24px;
    text-align: center;
}

body {
	display: flex;
	align-items: center;
	justify-content: start;
	flex-direction: column;
	padding-top: 2rem
}

* {
	box-sizing: border-box;
}

:focus {
    outline: none;
}

.github-fork-ribbon:before {
	background-color: #252525
}

.checkboxWrapper {
	text-align: left;
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
}

input[type='checkbox'] {
	opacity: 0;
	position: absolute;
	margin: 0;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

input[type='checkbox'] + .checkboxPlaceholder {
	display: inline-block;
	white-space: nowrap;
	width: 20px;
	height: 20px;
	margin: 0;
	margin-right: 8px;
	vertical-align: middle;
	cursor: pointer;
	border: 2px solid white;
	border-radius: 2px;
	position: relative;
	pointer-events: none;
}

input[type='checkbox']:checked + .checkboxPlaceholder {
	background-color: white;
}

input[type='checkbox']:checked + .checkboxPlaceholder::before {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 3px;
	width: 7.5px;
	height: 12px;
	border-style: solid;
	border-top: none;
	border-left: none;
	border-right-width: calc(2/15 * 20px);
	border-bottom-width: calc(2/15 * 20px);
	border-color: #151515;
	box-sizing: content-box;
	transform: rotate(45deg);
}

.logo {
    display: flex;
    align-items: center;
}

.logo .myTee {
    width: 3rem;
    height: 3rem;
    background-image: url(../img/favicon-96x96.png);
    background-size: cover;
    margin-right: .5rem;
}

h1 {
	font-weight: 700;
    margin: 0;
}

.optionsWrap {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: start;
	padding: 0 1rem;
	user-select: none;
	transition: opacity .15s;
}

.optionsWrap:first-child {
	margin-bottom: 1rem;
}

.optionsWrap[disabled] {
	opacity: .5;
	pointer-events: none;
}

.optionsWrap > div {
    display: flex;
    vertical-align: top;
	justify-content: center;
	flex-direction: column;
	margin: 0 .5rem;
	min-width: calc(33% - 1rem);
	width: calc(33% - 1rem);
}

.optionsWrap p:not(.result) {
	text-align: left;
}

.optionsWrap p:not(.result) + * {
	margin-left: 1rem;
}

.container {
	display: flex;
	background-color: #252525;
	justify-content: center;
	align-items: center;
	margin-top: 1rem;
	border-radius: 2px;
	overflow: hidden;
	user-select: none;
}

.externalSkin, .bodyInput, .feetInput, .angleInput, .currentAngle, .colorFormatInput {
    display: flex;
    height: 1.5rem;
	line-height: 1.5rem;
    background-color: #252525;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    border: none;
    font-size: 1rem;
	border-radius: 2px;
	padding: 0 .5rem;
	transition: .25s;
	appearance: none;
}

.bodyInput, .feetInput, .colorFormatInput, .checkboxWrapper, .angleInput, .currentAngle {
	height: 1.5rem;
	width: auto;
}

.currentAngle {
	color: #999
}

.externalSkin {
    width: 24rem;
	border-radius: 0;
}

.divider {
	width: 1px;
	height: 1.25rem;
	background-color: #202020
}

.externalSkinButton {
    width: 3.5rem;
    height: 1.5rem;
	line-height: 1.5rem;
    background-color: #252525;
    font-size: 1rem;
    cursor: pointer;
	transition: .25s;
}

.result {
	text-align: left;
    margin: 0;
}

label {
	cursor: pointer;
}

.template {
    width: 256px;
    height: 128px;
    margin: 1rem .5rem 0;
    background-color: #252525;
    background-image:
		linear-gradient(45deg, #202020 25%, transparent 25%),
		linear-gradient(-45deg, #202020 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #202020 75%),
		linear-gradient(-45deg, transparent 75%, #202020 75%);
    background-size: 16px 16px;
    background-position: 0px 0px, 0px 8px, 8px -8px, -8px 0px;
	border-radius: 2px;
}

.template div {
    width: 100%;
    height: 100%;
}

/* Tee */
.teeassembler-tee {
    margin: 1rem .5rem;
	background-color: #252525;
    background-image:
		linear-gradient(45deg, #202020 25%, transparent 0, transparent 75%, #202020 0, #202020),
		linear-gradient(45deg, #202020 25%, transparent 0, transparent 75%, #202020 0, #202020);
    background-size: 16px 16px;
    background-position: 8px 8px, 0 0, 0 0, 0 0;
	border-radius: 2px;
}

.button {
	height: 1.5rem;
	line-height: 1.5rem;
	background-color: #252525;
	border-radius: 2px;
	font-size: .8rem;
	padding: 0 .5rem;
	cursor: pointer;
	transition: .25s
}

.bodyInput:hover,.feetInput:hover,.externalSkin:hover,.externalSkinButton:hover,.button:hover {
	background-color: rgba(255, 255, 255, .1);
}

@media screen and (max-width: 800px) {
	.container {
		width: 90%;
	}
	.externalSkin {
		width: 100%;
	}
	.optionsWrap {
		flex-direction: column;
	}
	.optionsWrap > div {
		min-width: 70%;
		width: 70%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 500px) {
	.logo h1 {
		font-size: 1.75rem;
	}
}

@media screen and (max-width: 450px) {
	.logo h1 {
		font-size: 1.5rem;
	}
	.optionsWrap {
		padding: 0 .5rem
	}
	.optionsWrap > div {
		min-width: 100%;
		width: 100%;
	}
}

@media screen and (max-width: 400px) {
	.logo h1 {
		font-size: 1rem;
	}
}