/* Ad Maiorem Dei Gloriam! */

@import url('https://fonts.googleapis.com/css2?family=Passero+One&family=Tektur:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Passero+One&family=Roboto:ital,wght@0,100..900;1,100..900&family=Tektur:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Passero+One&family=Roboto:ital,wght@0,100..900;1,100..900&family=Story+Script&family=Tektur:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Wellfleet&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chewy&display=swap');
:root {
    --background: rgb(57, 11, 50);
    --foreground: rgb(46, 24, 38);
    --enabled: rgb(135, 37, 150);
    --disabled: rgb(153, 153, 154);

    --enabled-hover: rgb(99, 26, 110);
}

html {
    background-image: linear-gradient(45deg, black, var(--background));
    color: white;

    width: 100vw;
    height: 100vh;
}

.hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    
    font-family: "Passero One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1 {
    font-size: 6rem;
    margin: 0;
}

.impact-phrase {
    font-style: italic;
    font-size: clamp(1rem, 2rem, 50vw)
}

/* Forms general style */
.center-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0rem;
}

.form {
    background-color: var(--foreground);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 0.3rem;
    font-size: clamp(1rem, 1.2rem, 2vw);
    font-family: "Wellfleet", serif;
    text-align: center;
}

.center-title {
    text-align: center;
    font-family: "Chewy", system-ui;
    font-style: bold;
}

.project-creation input {
    width: 100%;
    padding: 0.5rem 0rem;
    text-indent: 0.7rem;
    border-radius: 0.5rem;
    border: none;
}

.form button {
    color: white;
    background-color: var(--enabled);
    border: none;
    border-radius: 0.4rem;
    padding: 1rem;
    width: 100%;
    cursor: pointer;

    font-size: 1.2rem;
    font-style: bold;

    transition: background-color 0.4s ease-in-out;
}

.form button:disabled {
    background-color: var(--disabled);
    cursor: not-allowed;
}

.form button:enabled:hover {
    background-color: var(--enabled-hover);
}

.score {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    translate: -50% 0%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1ch;
}

.features {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.feature-content{
    display: inline-block;
    white-space: normal;
    max-width: 30ch;
    overflow-wrap: break-word;
}

.feature-check {
    position: relative;
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
    transform: scale(2);
    padding: 10px;
    width: 3rem;
}

.check-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    white-space: nowrap;
}