/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* Miskatonic University Custom Styling */
h1, h2, h3, h4, h5, h6 { font-family: 'Libre Baskerville', serif; }
p, a, li, button { font-family: 'Josefin Sans', sans-serif;}
.type-writer { font-family: 'Special Elite', cursive; }
.hero-text { font-size: 60px; }
#chosen-occupation { color: #A0522d; text-transform: uppercase; }

/* Typography */
.intro-header { font-family: 'Marcellus SC', serif; font-size: calc(1.5rem + 1vw); letter-spacing: 2px; text-transform: uppercase; }
.main-header { font-family: 'Libre Baskerville', serif; /* Make the font size responsive */ font-size: calc(5rem + 1vw); font-weight: bold; text-transform: uppercase; }
.large-header { font-family: 'Libre Baskerville', serif; /* Make the font size responsive */ font-size: calc(3rem + 1vw); text-transform: uppercase; }
.large-content {
	font-family: 'Josefin Sans', sans-serif;
	font-size: calc(.75rem + 1vw);
}
.small-content {
	font-family: 'Josefin Sans', sans-serif;
	font-size: calc(0.75rem + 1vw);	
}

/* Alignment */
.to-image-container { position: relative; text-align:center; color: white; }
.centered-text { position: absolute; top: 50%; bottom: 50%; }

/* Coloring */
.bg-black { background-color: black; }
.bg-paper { background-color: #f0e68c; }
.bg-grey { background-color: #666; }
.bg-darkgrey { background-color: #363636; }
.bg-darkergrey { background-color: #252525; }
.bg-darkergrey-75 { background-color: rgba(37,37,37,0.9); }
.text-lightgrey { color: #e0e0e0; }
.inner-sepia { box-shadow: inset 0 0 25px 5px #a1866f; }
.text-brown { color: #504434; }

/* Borders */
.border-brown { border: 2px solid #5b4636; }
.border-top-brown { border-top: 2px solid #5b4636; }
.border-bottom-brown { border-bottom: 2px solid #5b4636; }
.border-left-brown { border-left: 2px solid #5b4636; }
.border-right-brown { border-right: 2px solid #5b4636; }

/* Background Images */
.bg-misu { background-image: url(../images/MU-Logo-T.png); background-attachment: fixed; background-position: 50% 15%; background-size: 50%; background-repeat: no-repeat; }
.paper-bg { background-image: url(../images/Noise-BG.png); background-position: 50% 15%; background-size: 50%; }

/* Image Mods */
.obfit-img-250 {object-fit: cover; object-position: center; width: 100%; height: 250px; }

/* Hover/Btn Design */
.link-img img { opacity: 0.5; transition: 0.5s; border: 2px solid transparent; }
.link-img img:hover { opacity: 1; border: 2px solid #e0e0e0; }
.black-btn { background-color: #000; color: #fff;	font-family: 'Special Elite', cursive; padding: 5px 15px; text-decoration: none !important; transition: 0.35s ease; }
.black-btn:hover { background-color: #A0522d; color: #fff; }
.occ-toggle { color: #A0522d; font-family: 'Josefin Sans', sans-serif; transition: 0.35s ease; }
.occ-toggle:hover { color: #000; }
.recommended { border: 5px solid #A0522d !important; }
.redo-skills { border: none !important; padding: 10px 15px; }
.skill-toggle-btn { background-color: #f0e68c; }
.pers-desc-btn { background-color: #f0e68c; }
.ideology-btn { background-color: #f0e68c; text-align: left; margin-bottom: 1.5rem; }

.new-misku-btn { 
	background-color: #e6c496;
	color: #5b4636;
	font-family: 'Josefin Sans', sans-serif;
	padding: 15px 25px 10px 25px;
	font-size: calc(2rem + 1vw);
	text-decoration: none !important;
	border: 2px solid #302810;
	transition: 0.35s ease;
}
.new-misku-btn:hover { 
	background-color: #5b4636; color: #fff; 
	border: 2px solid #302810;
}
.misku-login-btn {
	background-color: #e6c496;
	color: #5b4636;
	font-family: 'Josefin Sans', sans-serif;
	padding: 10px 25px 20px 25px;
	font-size: calc(.75rem + 1vw);
	text-decoration: none !important;
	border: 2px solid #302810;
	transition: 0.35s ease;
}
.misku-login-btn:hover { 
	background-color: #5b4636; color: #fff; 
	border: 2px solid #302810;
}

/* Images */
.char-port-img {
	box-shadow: 0 3px 10px rgba(0,0,0,0.6);
	border: 3px solid #fff1d6;
	opacity: 0.75;
	transition: 0.35s ease;
}
.char-port-img:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,0.35);
	opacity: 1;
}
#preview {
	box-shadow: 5px 5px 20px rgba(0,0,0,0.35);
	border: 3px solid #fff1d6;
}

/* Sizing */
.full-width { width: 100%; height: auto; }

/* Character Sheet Form */
.bg-sepia {
	background-image: radial-gradient(circle, #fafad2, #fafad2, #fafad2, #f0e68c);
}
.char-build-input {
	font-family: 'Special Elite', cursive;
	border: none !important;
	border-radius: 0 !important;
	background-color: transparent;
	border-bottom: 2px solid #A0522d !important;
	width:100%;
}
.char-build-input:read-only {
	background: transparent !important;
}
.input-50 {
	max-width: 50% !important;
}
.input-25 {
	max-width: 25% !important;
}
.input-group {
	margin-bottom: 15px;
}
label {
	font-family: 'Josefin Sans', sans-serif;
}
.small {
	font-size: 12px; 
	margin: 5px 5px 0 5px;
}
.hf-text {
	padding: 10px;
}
.char-border {
	border: 2px solid #302810;
}
input[placeholder] {
	font-size: 12px;
}
.skill, .half, .fifth {
	font-size: 12px;
}
.half, .fifth {
	background-color: #e0e0e0;
}
.tooltip-inner {
	text-align: left;
	min-width: 450px;
	padding: 15px;
}
.note-tip {
	border-radius: 100px;
	background: #302810;
	color: #fff;
	border: none;
}
.char-submit {
	border: none !important;
	background: #302810;
	color: #fff;
	padding: 10px 25px;
	transition: 0.35s ease;
}
.char-submit:disabled {
	background-color: #666;
	cursor:not-allowed;
}
.char-submit:hover {
	background: #A0522d;
}
.no-hover:hover {
	background-color: #666;
}
.char-build {
	font-family: 'Josefin Sans', sans-serif;
	background-color: #302810;
	border: none !important;
	color: #fff !important;
	text-decoration: none !important;
	padding: 5px 20px;
	transition: 0.35s ease;
}
.char-build:hover {
	background-color:#A0522d;
}
.fin-input {
	font-family: 'Special Elite', cursive;
	background-color: transparent;
	border:none;
	border-bottom: 2px solid #A0522d;
}
.modal-header {
	border: none;
}
.modal-title {
	font-family: 'Josefin Sans', sans-serif;
}

.box-shadow {
	box-shadow: 0 18px 12px -6px rgba(0,0,0,0.35);
}

/* Rolling Dice CSS */
.roll3d6 {
	background: #302810;
	color: #fff !important;
	cursor: pointer;
	padding: 5px 15px;
	transition: 0.35s ease;
}
.roll3d6:hover {
	background: #A0522d;
}
.roll2d6 {
	background: #302810;
	color: #fff !important;
	cursor: pointer;
	padding: 5px 15px;
	transition: 0.35s ease;
}
.roll2d6:hover {
	background: #A0522d;
}
.d6 {
	max-width: 20px;
	height: auto;
}

/* General */
.hidden {
	display: none;
}
.hide {
	display: none;
}

/* Mobile Adjustments */
@media screen and (max-width: 1080px) {
	.hero-text { font-size: 3rem; }
}