/*========================================================================*/
/*========================================================================*/
/*========================================================================*/

:root {
    --headline-font: "Red Hat Display", var(--pico-font-family-sans-serif);
    --body-font: "Red Hat Text", var(--pico-font-family-sans-serif);
    background-color: rgb(20, 13, 0);

/* @link https://utopia.fyi/type/calculator?c=320,16,1.25,1240,20,1.414,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --type-size--3: clamp(0.4421rem, 0.5363rem + -0.1215vi, 0.512rem);
    --type-size--2: clamp(0.6252rem, 0.6452rem + -0.0258vi, 0.64rem);
    --type-size--1: clamp(0.8rem, 0.7708rem + 0.1461vi, 0.884rem);
    --type-size-0: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);
    --type-size-1: clamp(1.25rem, 1.07rem + 0.9vi, 1.7675rem);
    --type-size-2: clamp(1.5625rem, 1.2367rem + 1.6291vi, 2.4992rem);
    --type-size-3: clamp(1.9531rem, 1.4033rem + 2.7492vi, 3.5339rem);
    --type-size-4: clamp(2.4414rem, 1.5525rem + 4.4445vi, 4.997rem);
    --type-size-5: clamp(3.0518rem, 1.6556rem + 6.9808vi, 7.0657rem);

    --placeholder: #636363;
    --num-columns: 2;
    --pic-size: 150px;
    --grid-gap: 20px;
    --profile-pic-width: calc(var(--pic-size) * var(--num-columns) + var(--grid-gap) * (var(--num-columns) - 1) );
}

html {
    line-height: 1.65;
}

body {
    font-family: var(--body-font);
    max-width: 940px;
    padding: 24px;
    margin: 0 auto;
}

a {
    color: #FFB83C;
    text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6, blockquote, small {
    color: white;
}

nav, nav ul {
    display: block;
    text-align: center;
}

.ali-menu-item {
    font-size: 12px;
    a {
        color: white;
        text-transform: uppercase;
        &:hover {
            color: #ffb83c;
        }
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--headline-font);
}

/* Escala tipográfica */

/* U/Type/Min/Strong/Step 5 */
.strong-step-5 {
    font-family: var(--body-font);
    font-size: var(--type-size-5);
    font-style: normal;
    font-weight: 100;
    line-height: 100%;
}

/* U/Type/Min/Strong/Step 4 */
.strong-step-4 {
    font-family: var(--body-font);
    font-size: var(--type-size-4);
    font-style: normal;
    font-weight: 100;
    line-height: 100%;
    &-display {
        text-transform: uppercase;
    }
}

/* U/Type/Min/Strong/Step 3 */
.strong-step-3 {
    font-family: var(--body-font);
    font-size: var(--type-size-3);
    font-style: normal;
    font-weight: 100;
    line-height: 115%; /* 35.937px */
}

/* U/Type/Min/Strong/Step 2 */
.strong-step-2 {
    font-family: var(--body-font);
    font-size: var(--type-size-2);
    font-style: normal;
    font-weight: 100;
    line-height: 120%; /* 30px */
}

/* U/Type/Min/Strong/Step 1 */
.strong-step-1 {
    font-family: var(--headline-font);
    font-size: var(--type-size-1);
    font-style: normal;
    font-weight: 100;
    line-height: 120%; /* 24px */
}

/* U/Type/Min/Strong/Step 0 */
.strong-step-0 {
    font-family: var(--headline-font);
    font-size: var(--type-size-0);
    font-style: normal;
    font-weight: 100;
    line-height: 120%; /* 19.2px */
}

/* U/Type/Min/Strong/Step -1 */
.strong-step--1 {
    font-family: var(--headline-font);
    font-size: var(--type-size--1);
    font-style: normal;
    font-weight: 100;
    line-height: 120%; /* 15.36px */
}

/* U/Type/Min/Strong/Step -2 */
.strong-step--2 {
    font-family: var(--headline-font);
    font-size: var(--type-size--2);
    font-style: normal;
    font-weight: 100;
    line-height: 120%; /* 12.288px */
}

/* U/Type/Min/Strong/Step -3 */
.strong-step--3 {
    font-family: var(--headline-font);
    font-size: var(--type-size--3);
    font-style: normal;
    font-weight: 100;
    line-height: 120%; /* 9.83px */
}

/* U/Type/Min/Prose/Step 1 */
.prose-step-1 {
    font-family: var(--headline-font);
    font-size: var(--type-size-1);
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 32px */
}

/* U/Type/Min/Prose/Step 0 */
.prose-step-0 {
    font-family: var(--headline-font);
    font-size: var(--type-size-0);
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}

/* U/Type/Min/Prose/Step -1 */
.prose-step--1 {
    font-family: var(--headline-font);
    font-size: var(--type-size--1);
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 20.48px */
}

/* U/Type/Min/Prose/Step -2 */
.prose-step--2 {
    font-family: var(--headline-font);
    font-size: var(--type-size--2);
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 16.384px */
}

/* U/Type/Min/Prose/Step -3 */
.prose-step--3 {
    font-family: var(--headline-font);
    font-size: var(--type-size--3);
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 13.107px */
}

/* U/Type/Min/Default/Step 0 */
.default-step-0 {
    font-family: var(--headline-font);
    font-size: var(--type-size-0);
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
}

/* U/Type/Min/Default/Step -1 */
.default-step--1 {
    font-family: var(--headline-font);
    font-size: var(--type-size--1);
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 15.36px */
}

/* U/Type/Min/Default/Step -2 */
.default-step--2 {
    font-family: var(--headline-font);
    font-size: var(--type-size--2);
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 12.288px */
}

/* U/Type/Min/Default/Step -3 */
.default-step--3 {
    font-family: var(--headline-font);
    font-size: var(--type-size--3);
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 9.83px */
}



/* Type modifiers */
.type-display {
    text-transform: uppercase;
    line-height: 100%;
}

.type-card-display {
    text-transform: uppercase;
    line-height: 100%;
    margin-top: 0;
}

/* Layout */

header, footer, main>svg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.candidaturas-array {
    @media screen and (min-width: 376px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

main {
    overflow-x: hidden;
}

.ali-logo {
    width: 300px;
    @media screen and (min-width: 376px) {
        width: 500px;
    }
}

#puerto-rico {
    width: 500px;
}

#emblem {
    width: 80px;
}

.ali-gradient, .secondary {
    text-transform: uppercase;
    color: #000000;
    border: #D9931A;
}

.ali-gradient {
    letter-spacing: .4px;
    background: linear-gradient(90deg, #D9931A 0%, #C6DD35 100%);
    &:hover {
        background: linear-gradient(90deg, #D9931A 0%, rgb(238, 226, 1) 100%);
    }
}

/* Profile pic maker styles */

.profile-picker {
    min-width: 430px;
}

.picker {
    margin-bottom: var(--grid-gap);
}

.pics {
    display: grid;
    grid-template-columns: repeat(var(--num-columns), 1fr);
    gap: var(--grid-gap);
}

.pic {
    aspect-ratio: 1;
    width: 100%;
    max-height: var(--pic-size);
    max-width: var(--pic-size);
    background-color: var(--placeholder);
    margin: 0 auto 5px auto;
    border-radius: 5px;
    overflow: hidden;
}

canvas {
    opacity: 0;
    width: var(--pic-size);
    transition: opacity 0.3s ease-in-out;
}

canvas.show {
    opacity: 1;
}

.pics button {
    width: 100%;
}

/* Candidate cards */

.candidate-card {
	width: 416px;
	display: flex;
	padding: 16px;
    margin: 8px;
	img {
		min-width: 100px !important;
		border-radius: 8px;
	}
}
.color-victoria {
		color: #D9931A;
}
.border-victoria {
		border: solid 2px #D9931A;
}
.social-victoria a:hover {
	background-color: #D9931A;
}
.color-pip {
		color: #059E59;
}
.border-pip {
		border: solid 2px #059E59;
}
.social-pip a:hover {
	background-color: #059E59;
}
.foto {
	display: flex;
	flex-direction: column;
	margin-right: 16px;
    max-width: 100px;
    min-width: 100px;
	svg {
		margin-top: -16px;
	}
}
.puesto {
	font-family: "Red Hat Text";
	font-size: 16px;
	font-weight: 400;
	line-height: 100%; /* 19.2px */
	text-transform: uppercase;
	margin: 4px 0;
	span {
		font-weight: 900;
	}
}
.nombre {
	font-family: "Red Hat Display";
	font-size: 32px;
	font-style: normal;
	font-weight: 900;
	line-height: 100%; /* 24px */
	text-transform: uppercase;
	margin: 0;
}
.social {
	margin: 24px auto;
	a {
		color: black;
		background-color: white;
		border-radius: 100px;
		padding: 3px 5px 3px;
		margin-right: 8px;
	}
}

body {
    background-image: url("images/sello-alianza.png");
    background-size: contain;
}

.hero {
    text-align: center;
}

.app-feature {
    display: flex;
    justify-content: center;
    text-align: left;
    padding: 48px 0;
    div {
        width: 50%;
        margin-right: 24px;
    }
}

.fest {
    margin-bottom: 0;
}