.about-main {
    display: flex;
    flex-direction: column;
}

.about-photo img{
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

.red-section {
    background-color: var(--pink);
    border-radius: 5ch;
    height: fit-content;
    padding: 2rem;
}

.red-section p, h1 {
    color: var(--foreground);
    text-decoration: none;
}

.red-section a{
    color: var(--foreground);
}

h1 {
    font-size: 3rem;
    line-height: 2.5rem;
}

.about-commitments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 2rem;
    max-width: 100%;
    background-color: var(--background);
}

.commitment {
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    border-radius: 5ch;
    padding: 1.5rem;
    height: 20rem;
    box-shadow: inset 7px 7px 10px var(--shadow), inset -7px -7px 10px var(--light);
    justify-content: center;
}

.commitment p{
    line-height: 2rem;
}

.commitment-explanation {
    text-align: center;
    font-family: "Arial";
}

.commitment-subtitle {
    color: var(--red);
    align-self: center;
}

.commitment-title {
    font-size: 2rem;
    align-self: center;
}

.about-synappro-text {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
    border-radius: 1ch;
    box-shadow: 10px 10px 15px var(--shadow), -10px -10px 10px var(--light);
    align-items: center;
    background-color: var(--background);
    border: none;
    color: var(--red);
    flex-shrink: 10;
    font-family: "Arial Rounded MT Bold", sans-serif;
}

.about-synappro-text:active {
    box-shadow: inset 10px 10px 15px var(--shadow), inset -10px -10px 10px var(--light);
}

.synappro-name {
    display: flex;
}

.synapses-animation {
    display: flex;
    height: auto;
    border: 1rem;
    flex-shrink: 1;
}

.synapses-animation img{
    object-fit: cover;
    max-width: 100%;
    height: auto;
    border: 5px solid var(--red);
    border-radius: 3ch;
}

.name-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--light);
    border-radius: 3ch;
    flex-grow: 1;
    height: fit-content;
}

.privacy-security {
    display: flex;
}

.lock-animation {
    display: flex;
    height: auto;
    border: 1rem;
    flex-shrink: 1;
}

.lock-animation img{
    object-fit: cover;
    max-width: 100%;
    height: auto;
    border: 5px solid var(--red);
    border-radius: 3ch;
}

.privacy-security-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--light);
    border-radius: 3ch;
    flex-grow: 1;
    height: fit-content;
}

.dark-mode .name-text,
.dark-mode .privacy-security-text {
    background-color: var(--shadow);
}

.name-text h1,
.name-text p,
.privacy-security-text h1,
.privacy-security-text p {
    color: var(--foreground);
}







/* Media queries */
@media only screen and (max-width: 425px) {
    .about-commitments {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        padding-bottom: 2rem;
    }

    .red-section {
        padding: 1rem;
    }

    .commitment-title {
        font-size: 1.7rem;
    }

    .about-synappro-text {
        font-size: 3rem;
        padding: 1rem;
        padding-bottom: 1.5rem;
        width: 100%;
    }

    .synappro-name {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-bottom: 2rem;
        /* padding-top: 2rem; */
    }
    
    .synapses-animation {
        width: 100%;
    }

    .name-text {
        padding: 1rem;
    }

    .privacy-security {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
        padding-bottom: 2rem;
        padding-top: 2rem;
    }
    
    .lock-animation {
        width: 100%;
    }

    .privacy-security-text {
        padding: 1rem;
    }
    
}

@media only screen and (min-width: 426px) and (max-width: 666px) {
    .about-commitments {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        padding-bottom: 2rem;
    }

    .red-section {
        padding: 1rem;
    }

    .commitment-title {
        font-size: 1.7rem;
    }

    .about-synappro-text {
        font-size: 3rem;
        padding: 1rem;
        padding-bottom: 1.5rem;
        width: 100%;
    }

    .synappro-name {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
        padding-bottom: 2rem;
        /* padding-top: 2rem; */
    }
    
    .synapses-animation {
        height: 100%;
    }

    .name-text {
        padding: 1rem;
    }

    .privacy-security {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
        align-items: center;
        padding-bottom: 2rem;
        padding-top: 2rem;
    }
    
    .lock-animation {
        width: 100%;
    }

    .privacy-security-text {
        padding: 1rem;
    }

}

@media only screen and (min-width: 667px) and (max-width: 768px) {
    .about-commitments {
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
        grid-gap: 3rem;
        padding-bottom: 3rem;
    }

    .red-section {
        padding: 2rem;
    }

    .commitment-title {
        font-size: 1.7rem;
    }

    .about-synappro-text {
        font-size: 3rem;
        padding: 1rem;
        padding-bottom: 1.5rem;
        width: 80%;
    }

    .synappro-name {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        padding-bottom: 3rem;
        /* padding-top: 3rem; */
    }
    
    .synapses-animation {
        height: 100%;
    }

    .name-text {
        padding: 2rem;
    }

    .privacy-security {
        display: flex;
        flex-direction: column-reverse;
        gap: 3rem;
        align-items: center;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }
    
    .lock-animation {
        height: 100%;
    }

    .privacy-security-text {
        padding: 2rem;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .about-commitments {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        padding-bottom: 3rem;
        grid-gap: 3rem;
        margin-left: 8rem;
        margin-right: 8rem;
    }

    .red-section {
        padding: 2rem;
    }

    .commitment-title {
        font-size: 1.7rem;
    }

    .about-synappro-text {
        font-size: 3rem;
        padding: 1rem;
        padding-bottom: 1.5rem;
        width: 70%;
    }

    .synappro-name {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        padding-bottom: 3rem;
        /* padding-top: 3rem; */
    }
    
    .synapses-animation {
        margin-left: 8rem;  
        margin-right: 8rem;
    }

    .name-text {
        padding: 2rem;
    }

    .privacy-security {
        display: flex;
        flex-direction: column-reverse;
        gap: 3rem;
        align-items: center;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }
    
    .lock-animation {
        margin-left: 8rem;  
        margin-right: 8rem;
    }

    .privacy-security-text {
        padding: 2rem;
    }

}

@media only screen and (min-width: 1025px) and (max-width: 1439px) {
    .about-commitments {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        padding-bottom: 5rem;
        grid-gap: 3rem;
    }

    .red-section {
        padding: 3rem;
    }

    .commitment-title {
        font-size: 1.7rem;
    }

    .about-synappro-text {
        font-size: 3rem;
        padding: 1rem;
        padding-bottom: 1.5rem;
        width: 50%;
    }

    .synappro-name {
        display: flex;
        align-items: stretch;
        gap: 3rem;
        padding-bottom: 5rem;
        /* padding-top: 5rem; */
        height: fit-content;
    }

    .privacy-security {
        display: flex;
        align-items: stretch;
        gap: 3rem;
        padding-bottom: 5rem;
        padding-top: 5rem;
        height: fit-content;
    }
    
    .synapses-animation,
    .lock-animation {
        width: 80%; 
    }

    .synapses-animation img,
    .lock-animation img {
        height: 100%;
        width: auto;
        flex-grow: 1;
    }
    
    .name-text,
    .privacy-security-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--light);
        border-radius: 3ch;
        height: auto;
        padding: 3rem;
    }

}

@media only screen and (min-width: 1440px) and (max-width: 1800px){

    .about-commitments {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        padding-bottom: 5rem;
        grid-gap: 4rem;
    }

    .red-section {
        padding: 4rem;
    }

    .commitment-title {
        font-size: 2rem;
    }

    .about-synappro-text {
        font-size: 3rem;
        padding: 1rem;
        padding-bottom: 1.5rem;
        width: 40%;
    }

    .synappro-name {
        display: flex;
        align-items: stretch;   
        gap: 4rem;  
        padding-bottom: 5rem;
        /* padding-top: 5rem; */
        height: fit-content;
    }

    .privacy-security {
        display: flex;
        align-items: stretch;   
        gap: 4rem;  
        padding-bottom: 5rem;
        padding-top: 5rem;
        height: fit-content;
    }
    
    .synapses-animation img,
    .lock-animation img {
        height: 100%; 
        width: auto; 
    }
    
    .name-text,
    .privacy-security-text {
        display: flex;  
        flex-direction: column;     
        justify-content: center;    
        background-color: var(--light);
        border-radius: 3ch;
        flex-grow: 1;
        height: auto;   
        padding: 4rem;
    }

}

@media only screen and (min-width: 1801px) {
    .about-commitments {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        padding-bottom: 8rem;
        grid-gap: 8rem;
    }

    .red-section {
        padding: 8rem;
    }

    .commitment-title {
        font-size: 2rem;
    }

    .about-synappro-text {
        font-size: 4rem;
        padding: 2rem;
        padding-bottom: 2.5rem;
        width: 30%;
    }

    .synappro-name,
    .privacy-security {
        display: flex;
        justify-content: center;    
        align-items: stretch; 
        gap: 4rem; 
        padding-bottom: 8rem;
        padding-top: 8rem;
        height: fit-content;
    }

    .synapses-animation,
    .lock-animation {
        display: flex; 
        justify-content: center; 
        align-items: center; 
        width: 60%; 
    }

    .synapses-animation img,
    .lock-animation img {
        height: 100%; 
        width: auto; 
        border-radius: 3ch;
    }
    
    .name-text,
    .privacy-security-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--light);
        border-radius: 3ch;
        flex-grow: 1;
        height: auto;
        padding: 8rem;
    }
}