@import url('variables.css');

#cover-container {
    z-index: 5;
    transition: opacity 1s ease;
}

.about-content {
    display: grid;
    grid-template-rows: auto auto;
    width: 100%;
}

.main-content {
    display: grid;
    grid-template-rows: auto auto;
    width: 100%;
}

#vision h2 {
    color: var(--text-med-contrast);
    font-size: 1.5rem;
    padding-bottom: 0.5em;
    margin-bottom: 0;
}

p {
    line-height: 1.6;
    color: var(--text-med-contrast);
}

section {
    background: var(--background-orange);
    height: fit-content;
    max-width: 100vw;
    text-align: center;

}

#navigation a {
    color: var(--background)
}

#vision {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#vision-text {
    padding: 0 10px 0 10px;
}

#mission-container {
    background: var(--gradient-light2);
    width: 100%;
}

#image-container {
    padding-bottom: 15px;
    transition-delay: 2s;
}

#mission-image {
    width: 80%;
    height: auto;
    border-radius: 50px;
    box-shadow: var(--background-orange-shadow) 2px 8px 12px 2px;
}

#mission {
    padding: 1em;
    font-style: italic;
    margin: 2.2em 0;
    font-size: 1.5rem;
}

#cta {
    padding-top: 15vh;
}

@keyframes BlueprintDraw {
    0% {
        opacity: 0;
        text-shadow: none;
    }
    50% {
        opacity: 0.5;
        text-shadow: 0 0 6px rgba(0, 150, 255, 0.5);
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 12px rgba(0, 150, 255, 1);
    }
}

.architects-of-change {
    animation: BlueprintDraw 2s ease-in-out forwards;
    display: inline-block;
    transform-origin: left bottom;
    white-space: nowrap;
    cursor: pointer;
    font-style: italic;
    text-shadow: none;
}

.architects-of-change span {
    opacity: 0;
    display: inline-block;
    animation: typingAndScaling 0.5s ease forwards;
    animation-delay: calc(2.5s + var(--char-index) * 0.1s);
}

@keyframes typingAndScaling {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.architects-of-change span:nth-child(1) {
    --char-index: 1;
}

.architects-of-change span:nth-child(2) {
    --char-index: 2;
}

.architects-of-change span:nth-child(3) {
    --char-index: 3;
}

.architects-of-change span:nth-child(4) {
    --char-index: 4;
}

.architects-of-change span:nth-child(5) {
    --char-index: 5;
}

.architects-of-change span:nth-child(6) {
    --char-index: 6;
}

.architects-of-change span:nth-child(7) {
    --char-index: 7;
}

.architects-of-change span:nth-child(8) {
    --char-index: 8;
}

.architects-of-change span:nth-child(9) {
    --char-index: 9;
}

.architects-of-change span:nth-child(10) {
    --char-index: 10;
}

.architects-of-change span:nth-child(11) {
    --char-index: 11;
}

.architects-of-change span:nth-child(12) {
    --char-index: 12;
}

.architects-of-change span:nth-child(13) {
    --char-index: 13;
}

.architects-of-change span:nth-child(14) {
    --char-index: 14;
}

.architects-of-change span:nth-child(15) {
    --char-index: 15;
}

.architects-of-change span:nth-child(16) {
    --char-index: 16;
}

.architects-of-change span:nth-child(17) {
    --char-index: 17;
}

.architects-of-change span:nth-child(18) {
    --char-index: 18;
}

.architects-of-change span:nth-child(19) {
    --char-index: 19;
}

.architects-of-change span:nth-child(20) {
    --char-index: 20;
}

@media screen and (max-width: 596px) {
    #cover-container {
        transition: none;
    }
}

@media screen and (min-width: 596px) {
    #vision {
        padding-top: 6vh;
    }
}

@media screen and (min-width: 692px) {
    #vision h2 {
        font-size: 2.5rem;
    }

    #vision-text {
        font-size: 1.5rem;
        padding: 0 1em 0 1em;
    }
}

@media screen and (min-width: 876px) {
    #mission-image {
        width: 60%;
    }
}

@media screen and (min-width: 1440px) {
    #vision-text {
        font-size: 1.5rem;
        padding: 0 2em 0 2em;
    }

    #mission {
        padding: 0 2em 0 2em;
    }
}