/* QOTAQ1 stylesheet
 * Last updated 2023-06-09 18:42
 *
 * Notes:
 * 1) Responsive breakpoints?
 * 	Tablet - 768px; Mobile - 482px; 
 */
 
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&display=swap');

:root {
	/* text */
	--nc-tx-1: #ffffff;
	--nc-tx-2: #eeeeee;
	/* bg */
	--nc-bg-1: #502121;
	--nc-bg-2: #111111;
	--nc-bg-3: #222222;
	/* links */
	--nc-lk-1: #ea5253;
	--nc-lk-2: #e94648;
	--nc-lk-tx: #000000;
	/* accents */
	--nc-ac-1: #ad2c26;
	--nc-ac-2: #ffffff;
	--nc-ac-3: #e94648;
	--nc-ac-tx: #E9967A; /* Dark Salmon */
	/* fonts */
	--nc-font-ac: 'Caveat', cursive;
}
@media (prefers-color-scheme: dark) {
	:root {
	}
}
body {padding-bottom: 0;}
header {
	background: #d53369;
	background: linear-gradient(90deg, #daae51 0%, #d53369 100%);
    padding-top: 0.5rem; padding-bottom: 0.5rem;
/* background: white; */
}
main {
/* 	background: var(--nc-ac-2);color: var(--nc-tx-2); */
	padding: 2em;margin-top: 2em; margin-bottom: 2em;
}
main h1, main h2, main h3, main h4, main h5, main h6 {
	color: var(--nc-ac-tx);  /* var(--nc-tx-2); */
	font-family: var(--nc-font-ac);
	/*font-size: xx-large;*/
	text-transform: uppercase;
}
main h2 {border-bottom: 1px solid var(--nc-bg-2);}
main h3 {
    letter-spacing: 1px;
    width: fit-content;
    border-bottom: 0;
    /*border-bottom-color: var(--nc-lk-2);
    padding-left: 0.75em;
    padding-right: 1em;*/
    padding-bottom: 5px;
    margin-bottom: 0.5em;
}
footer {
	background: #11111175;
	padding: 2rem 1.5rem;
    margin: 0 calc(0px - (50vw - 50%)) 0;
/*     margin: -2rem calc(0px - (50vw - 50%)) 2rem; */
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

        @media only screen and (max-width: 767px) {
            main {padding: 1%;}
        }

._no-bullet {list-style-type: none;padding-left:0;}

.card-container {
    display: flex;
    align-items: stretch;
}

.card {
    width: 49%;
    background: var(--nc-bg-2);
    padding: 15px;
    box-shadow: var(--nc-ac-1) 1px 1px;
    /*border-radius: 10px;*/
    margin-right: 2%;
    margin-top: 3%;
    text-align: justify;
    box-sizing: border-box;
}
.card a {text-decoration: none;
    font-weight: 700;}
.card span.proj-title {
    display: block;
    text-align: right;
    font-size: larger;
    padding-bottom: 2%;
    border-bottom: 1px solid var(--nc-tx-2);
    margin-bottom: 5%;
}
.card a button {
    margin-top: 5%;
    margin-bottom: 5%;
}

      @media only screen and (max-width: 767px) {
          .card-container {flex-wrap: wrap;}
          
          .card {width: 100%; margin-bottom: 3%;}
      }

.card.style2 {background: var(--nc-bg-3);}
.card.style2 span.proj-title {
    font-size: initial;
}

.link_label {
    display: inline;
    background: #daae51;
    font-size: 0.8rem;
    color: black;
    text-transform: uppercase;
    padding: 3px 5px;
    font-weight: 600;
    margin-left: 5px;
    margin-right: 5px;
}