/* 25302262 - ANDRIES DANIEL LOUW */

/* COLOR PALLETE */
:root{
    --gray: #E8E8E8;
    --navy: #232A3B;
    --purple: #AF85E7;
    --green: #D5F379;
}

h1{
   -webkit-text-stroke: 2px var(--navy);
   text-shadow: 2px 2px 0px var(--navy);
   margin: 0;
}


/* LAYOUT */
.aboutUsContainer{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
}

.containerIntroduction{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px;
    margin-left: 50px;
    padding: 10px;
    color: var(--navy);
    border-style: solid;
    border-width: 2px;
    border-radius: 20px;
    box-shadow: 4px 4px 0px var(--purple);
    width: 80%;
}

.containerWhyUs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px;
    margin-right: 50px;
    padding: 10px;
    color: var(--navy);
    border-style: solid;
    border-width: 2px;
    border-radius: 20px;
    box-shadow: 4px 4px 0px var(--purple);
    width: 80%;
}

.containerMission{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px;
    padding: 10px;
    color: var(--navy);
    border-style: solid;
    border-width: 2px;
    border-radius: 20px;
    box-shadow: 4px 4px 0px var(--green);
    width: 100%;
}

.containerRegister{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--navy);
    border-style: solid;
    border-style: none;
    margin: 50px;
}


/* IMAGES */
.introduction{
    width: 15%;
}

.whyUs{
    width: 15%;
}

/* REGISTER BUTTON */
.btnRegisterAboutUs {
    font-size: medium;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    margin: 10px;
    justify-content: center;
    background-color: var(--green);
    color: var(--navy);
    border-radius: 50px;
    border: 2px solid var(--navy);
    box-shadow: 2px 2px 0px var(--navy);
    cursor: pointer;
}
.btnRegisterAboutUs img{
    width: 25px;
    height: 25px;
    object-fit: contain;
}
.btnRegisterAboutUs:active{
    box-shadow: 0px 0px ;
    transform: translateX(2px);
    transform: translateY(2px);
}