:root{
    --primary:#240F6E;
    --secondary:#CBE1EE;
    --tertiary:#ffffff;
    --prim-shadow: #0f062d;
}
.landing-page * {
	box-sizing: border-box;
}
.landing-page .btn, .kcc-btn {
    box-shadow: 2px 2px 2px var(--prim-shadow);
    transition: all .2s;
}
.landing-page .btn:hover, .landing-page .btn:focus-visible, .kcc-btn:hover, .kcc-btn:focus-visible {
    transform: scale(1.05);
    box-shadow: 3px 3px 3px var(--prim-shadow);
}
.landing-page .btn:active, .kcc-btn:active {
    transition: transform .1s;
    transform: scale(.95);
    box-shadow: none;
}
.kcc-moduleHolder {
	display: flex;
	font-size: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2%;
	margin: 0 auto;
	width: calc(100% - 2em);
}
.kcc-moduleHolder * {
	min-width: max-content;
}
.kcc-module {
	background: white;
	color: black;
	border: 2px solid var(--primary);
	overflow: hidden;
	width: 31%;
	flex-grow: 1;
	margin-bottom: 1em;
    margin-top: 1em;
}
.kcc-module ul {
	padding-top: 0;
    margin-top: .5em;
    text-align: left;
	font-weight: bold;
}
.kcc-module li {
	margin-bottom: .5em;
	transition: transform .2s;
    transform-origin: left;
    margin-right: .5em;
}
.kcc-module li:active {
	transform: scale(1.1);
}
.kcc-phase {
	color: white;
    margin: 20px auto;
	text-align: center;
	user-select: none;
	position: relative;
	border-radius: 5px;
    background: white;
	width: 90%;
	border: 2px solid black;
    overflow: hidden;
}
.kcc-phase h2, .kcc-phase h3 {
	margin: 0;
	padding: 0;
    font-weight: bold;
}
.kcc-phase h2 {
	padding: .5em 0;
    font-size: 1.2em;
    background: var(--primary);
}
.kcc-phase h3 {
	background: linear-gradient(to bottom, #CBE1EE22, #CBE1EE);
	padding: .5em;
	white-space: nowrap;
	color: var(--primary);
    font-size: 1.1em;
}

.kcc-module a, .kcc-module a:visited {
	color: var(--primary);
}


@keyframes fade-in {
    from {
        opacity: 0;
    }
	to {
		opacity: 1;
	}
}
@keyframes kcc-jiggle {
	0% {
		transform: rotate(-3deg);
	}
	10% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(3deg);
	}
	30% {
        transform: rotate(0deg);
	}
	100% {
        transform: rotate(0deg);
	}
}
.accordion-image{
    max-width:100%!important;
}
details{
    margin:0 0 .5em 1em;
}
details div{
    padding:.5em;
    border:2px solid black;
    border-top:none;
    margin:0;
    overflow:hidden;
}
summary{
    font-weight: bold;
    background:var(--primary);
    color:var(--tertiary);
    cursor:pointer;
    border:2px solid black;
    padding:.5em;
}
summary:focus-visible{
    text-decoration: underline;
}
.user_content aside{
    width:40%;
    padding-left:.5rem;
    margin-left:.5rem;
    float:right;
    font-style:italic;
    color:var(--primary);
}

blockquote{
    padding:15px;
    background:#eee;
}
code{
    background-color:#eee;
    font-family:courier,monospace;
    padding:0 3px;
}
.link-card{
    overflow:hidden;
    clear:both;
    margin-top:1em;
    display: flex;
    align-items: center;
}
.link-card img{
    float:left;
    margin:5px;
    width:200px;
    min-width:200px;
    max-width: 100%;
    height:auto;
}
.link-text{
    display:table;
    padding:5px;
}
#kup-hover-table{
    display:flex;
    justify-content:space-evenly;
}
.kup-hover-table-category{
    border:4px solid black;
    border-radius:3vh;
    margin:0 auto;
    overflow: hidden;
    background: var(--secondary);
}
.kup-hover-table-category:hover{
    box-shadow:3px 3px 5px var(--primary);
    transform:translate(-2px,-2px);
}
.kup-hover-table-cat-title{
    text-align:center;
    background:var(--primary);
    color:#fff;
    border-bottom:2px solid #000;
    border-top-left-radius:2.5vh;
    border-top-right-radius:2.5vh;
    padding:10px;
    margin:0;
}
.kup-hover-table-content{
    padding:1em;
}
kbd{
    background-color:#eee;
    border:1px solid #b4b4b4;
    color:#333;
    display:inline-block;
    font-size:.85em;
    line-height:1;
    padding:2px 4px;
    white-space:nowrap;
}
.journal{
    overflow:visible;
}
.journal h3{
    background-color:var(--primary);
    padding:.5em;
    margin:0;
    padding-left:75px;
    color:var(--tertiary);
    background:url(https://cdn.precollegeprograms.org/brand-level-images/reflection-journal.png) .2em .2em/auto 85% no-repeat,var(--primary);
    border-radius:0 1em 0 0;
}
.journal div{
    padding:8px;
    border:2px solid var(--primary);
    border-top:none;
    border-radius:0 0 1em 1em;
}
.sidebar{
    overflow:visible;
    float:right;
    width:40%;
    margin-left:.5em;
    margin-bottom:1em;
}
.sidebar div{
    background:var(--secondary);
    color: black;
    padding:8px;
    border:2px solid var(--primary);
    border-top:none;
    border-radius:0 0 1em 1em;
}
.sidebar div *{
    margin-top:0;
}
.sidebar h3{
    background:var(--primary);
    padding:.5em;
    margin:0;
    color:#fff;
    border-radius:1em 1em 0 0;
}
hr{
    border:2px solid var(--primary);
    background:var(--primary);
}
.fade-in{
    opacity:0;
    animation:fadeInOpacity .5s forwards;
}
@keyframes fadeInOpacity{
    to {
        opacity:1
    }
}
.venn-container,.venn-container *{
    box-sizing:border-box;
}
.venn-container{
    display:flex;
    width:95%;
    max-width:854px;
    margin:0 auto;
    font-size:large;
    margin-bottom:.5em;
    border:2px solid #000;
    border-radius:2em;
    background: var(--secondary);
}
.midvenn{
    text-align:center;
    font-weight:700;
    border:2px solid #000;
    border-radius:2em;
    width:20%;
    padding:1em 5px;
    display: flex;
	justify-content: center;
	align-items: center;
    background-color:var(--primary);
    color:#fff;
}
.lrvenn{
    padding:1em;
    width:40%;
}