:root {
    --dark-background: #1d1d1d;
    --light-background: #ffffff;
    --alt-dark-background: #18171D;
  }
:root {
    --cf-white: #000;
    --cf-black: #fff;
    --cf-red-0: #ffefee;
    --cf-red-1: #feccc8;
    --cf-red-2: #fe9f97;
    --cf-red-3: #fc574a;
    --cf-red-4: #e81403;
    --cf-red-5: #b20f03;
    --cf-red-6: #970d02;
    --cf-red-7: #780a02;
    --cf-red-8: #5a0801;
    --cf-red-9: #3c0501;
    --cf-orange-0: #fef1e6;
    --cf-orange-1: #fbcda5;
    --cf-orange-2: #f8a054;
    --cf-orange-3: #ee730a;
    --cf-orange-4: #c05d08;
    --cf-orange-5: #8d4406;
    --cf-orange-6: #763905;
    --cf-orange-7: #592b04;
    --cf-orange-8: #482303;
    --cf-orange-9: #361a02;
    --cf-gold-0: #fff8e4;
    --cf-gold-1: #ffeab2;
    --cf-gold-2: #ffce4b;
    --cf-gold-3: #dda100;
    --cf-gold-4: #a77a00;
    --cf-gold-5: #735400;
    --cf-gold-6: #644900;
    --cf-gold-7: #4c3700;
    --cf-gold-8: #3e2d00;
    --cf-gold-9: #261c00;
    --cf-green-0: #e3f8eb;
    --cf-green-1: #a8e9c0;
    --cf-green-2: #55d584;
    --cf-green-3: #2db35e;
    --cf-green-4: #228b49;
    --cf-green-5: #196535;
    --cf-green-6: #15562d;
    --cf-green-7: #104122;
    --cf-green-8: #0e381d;
    --cf-green-9: #0a2614;
    --cf-cyan-0: #e9f7fb;
    --cf-cyan-1: #ace2f0;
    --cf-cyan-2: #73cee6;
    --cf-cyan-3: #30b6da;
    --cf-cyan-4: #1e89a5;
    --cf-cyan-5: #156074;
    --cf-cyan-6: #115061;
    --cf-cyan-7: #0d3e4b;
    --cf-cyan-8: #0b333e;
    --cf-cyan-9: #061b20;
    --cf-blue-0: #ecf4ff;
    --cf-blue-1: #b9d6ff;
    --cf-blue-2: #82b6ff;
    --cf-blue-3: #4693ff;
    --cf-blue-4: #086fff;
    --cf-blue-5: #0051c3;
    --cf-blue-6: #0045a6;
    --cf-blue-7: #003681;
    --cf-blue-8: #002b67;
    --cf-blue-9: #001c43;
    --cf-indigo-0: #f1f0fc;
    --cf-indigo-1: #dfdcf9;
    --cf-indigo-2: #c2bdf3;
    --cf-indigo-3: #9d94ec;
    --cf-indigo-4: #7366e4;
    --cf-indigo-5: #4b3bdc;
    --cf-indigo-6: #3524cd;
    --cf-indigo-7: #2c1ea9;
    --cf-indigo-8: #221785;
    --cf-indigo-9: #170f58;
    --cf-violet-0: #f7eafb;
    --cf-violet-1: #ebcaf6;
    --cf-violet-2: #dfa8f1;
    --cf-violet-3: #cf7ee9;
    --cf-violet-4: #b73cdf;
    --cf-violet-5: #8d1eb1;
    --cf-violet-6: #741892;
    --cf-violet-7: #5f1477;
    --cf-violet-8: #490f5c;
    --cf-violet-9: #350b42;
    --cf-pink-0: #fef1f5;
    --cf-pink-1: #fdc9db;
    --cf-pink-2: #fb97b9;
    --cf-pink-3: #f85189;
    --cf-pink-4: #e80954;
    --cf-pink-5: #af0740;
    --cf-pink-6: #8d0633;
    --cf-pink-7: #6a0426;
    --cf-pink-8: #4e031c;
    --cf-pink-9: #2d0210;
    --cf-gray-0: #f2f2f2;
    --cf-gray-1: #d9d9d9;
    --cf-gray-2: #b6b6b6;
    --cf-gray-3: #999999;
    --cf-gray-4: #797979;
    --cf-gray-5: #595959;
    --cf-gray-6: #4a4a4a;
    --cf-gray-7: #3d3d3d;
    --cf-gray-8: #313131;
    --cf-gray-9: #1d1d1d;
    --cf-newGray-0: #eaeaea;
    --cf-newGray-1: #cccccc;
    --cf-newGray-2: #aeaeae;
    --cf-newGray-3: #909090;
    --cf-newGray-4: #767676;
    --cf-newGray-5: #666666;
    --cf-newGray-6: #5a5a5a;
    --cf-newGray-7: #424242;
    --cf-newGray-8: #2c2c2c;
    --cf-newGray-9: #191919;
    --cf-newGreen-0: #cff3dc;
    --cf-newGreen-1: #81dfa3;
    --cf-newGreen-2: #32c769;
    --cf-newGreen-3: #29a456;
    --cf-newGreen-4: #228747;
    --cf-newGreen-5: #1e753e;
    --cf-newGreen-6: #1a6736;
    --cf-newGreen-7: #134c28;
    --cf-newGreen-8: #0d341b;
    --cf-newGreen-9: #081e10;
    --cf-sequential-0: #ACCEFF;
    --cf-sequential-1: #186F87;
    --cf-sequential-2: #FAC190;
    --cf-sequential-3: #A222CC;
    --cf-sequential-4: #FCBAD0;
    --cf-sequential-5: #005DE0;
    --cf-sequential-6: #FEBCB7;
    --cf-sequential-7: #6357C0;
    --cf-sequential-8: #81DFA3;
    --cf-sequential-9: #CB0849;
    --cf-sequential-10: #EBC96D;
    --cf-sequential-11: #1E753E;
    --cf-sequential-12: #E7BFF4;
    --cf-sequential-13: #CC1203;
  }
html, body {
    width: 100%;
    height: 100%;
    font-family: "Inter", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}

.title {
    font-size: 2.75rem;
    transition: 0.4s;
    font-weight: bolder;
}

.title:hover {
    transition: 0.4s;
    color: #F48120;
}

#footer{
    bottom: 2vh; 
    position: fixed; 
    left: 5vw;
    transition: 0.4s;
}
#footer:hover{
    cursor: pointer;
    color: #F48120;
    transition: 0.4s;
}

span{
    transition: 0.4s;
}
span:hover{
    color: #F48120;
    transition: 0.4s;
}

.AppContainer{
    display: grid;
    grid-template-columns: 20vw 80vw;
    grid-auto-flow: column;
    min-height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
}


.ConfigModifier{
    justify-self: center;
    align-self: normal;
    text-align: center;
    width: 20vw;
    min-height: 100vh;
    justify-content: center;
    align-content: center;
    position: relative;
}

.ConfigModifier form{
    justify-items: center;
}

.ConfigGenerator{
    justify-content: center;
    align-content: center;
    height: 100vh;
    width: 80vw;
    overflow: scroll;
    transition: 0.4s;
    overflow-x: hidden;
}

.ConfigGenerator .card{
    margin: auto;
}

.AnimationToggle{
    position: fixed;
    bottom: 3vh;
    right: 3vw;
}

.form-floating > label::after {
    background-color: transparent !important;
}

.btn-primary{
    background-color: #F48120 !important;
    border-color: #F48120 !important;
}
.btn-primary:hover{
    background-color: #e0751d !important;
    border-color: #e0751d !important;
}

#organizationCard{
    width: 40vw;
}

#description{
    width: 70%; 
    text-align: center;
    margin: auto;
}

#GetStarted{
    width: 100%;
    align-items: center;
    display: none;
}



@media (prefers-color-scheme: light) {
    .title {
        color: #F48120;
    }
    .title:hover{
        color: #FAAD3F;
    }
}

@media only screen and (max-width: 900px) {
    /* For mobile phones: */
    .AppContainer{
        grid-template-columns: 100%;
        grid-auto-flow: row;
    }
    .ConfigGenerator{
        width: 100vw;
    }
    .ConfigModifier{
        max-height: 50vh;
        width: 100vw;
    }
    #ConfigurationButtons{
        width: 70vw;
    }
    #organizationCard{
        width: 80vw;
    }
    #description{
        width: 85%; 
    }
    #GetStarted{
        display: block;
    }
    #footer{
        transform: scale(0.8);
        bottom: 2vh; 
        left: 2vw;
    }
}