@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

* {
    padding: 0px;
    margin: 0px;
}

@media screen and (min-width: 376px) {
    body {
        width: 100vw;
    }

    main {
        width: 100%;
        height: 98%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: hsl(212, 6%, 44%, .03);
        padding-bottom: 11.3%;
    }

    .page-title {
        margin-top: 7.1%;
        width: 31%;
        font-family: "Poppins", sans-serif;
        font-weight: 200;
        font-size: 36.59px;
        line-height: 51px;        
        color: hsl(212, 6%, 44%);
    }

    .bold-title {
        font-weight: 600;
        margin-left: .3%;
        color: hsl(234, 12%, 34%);
    }

    .page-description {
        margin-top: .85%;
        width: 37%;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        text-align: center;
        font-size: 15.2px;
        color: hsl(212, 6%, 44%);
    }

    .card-section-container {
        width: 78%;
        margin-top: 4%;
        display: flex;
        justify-content: space-between;
    }

    .first-section {
        width: 32%
    }

    .supervisor-section {
        margin-top: 43%;
        background-color: hsl(0, 0%, 100%);
        padding-bottom: 13%;
        border-top: 4px solid;
        width: 98%;
        margin-left: 1%;
        border-radius: 9px;
        border-top-color: hsl(180, 62%, 55%);
        box-shadow: 0px 10px 10px hsl(212, 6%, 44%, .2);
    }

    .supervisor-section > h2 {
        padding-top: 8%;
        margin-left: 9.2%;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: hsl(234, 12%, 34%);
    }

    .supervisor-section > p {
        margin-top: 1%;
        width: 65%;
        margin-left: 9.2%;
        font-size: 13.2px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        line-height: 21px;
        color: hsl(212, 6%, 44%);
    }

    .second-section {
        width: 32%;
    }

    .team-builder-section {
        margin-top: 4%;
        background-color: hsl(0, 0%, 100%);
        padding-bottom: 13%;
        border-top: 4px solid;
        width: 98%;
        margin-left: 1%;
        border-radius: 9px;
        border-top-color: hsl(0, 78%, 62%);
        box-shadow: 0px 10px 10px hsl(212, 6%, 44%, .2);
    }

    .team-builder-section > h2 {
        padding-top: 7.5%;
        margin-left: 9.2%;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: hsl(234, 12%, 34%);
    }

    .team-builder-section > p {
        margin-top: 1.5%;
        width: 73%;
        margin-left: 9.2%;
        font-size: 13.2px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        line-height: 21px;
        color: hsl(212, 6%, 44%);
    }

    .karma-section {
        margin-top: 9%;
        background-color: hsl(0, 0%, 100%);
        padding-bottom: 13%;
        border-top: 4px solid;
        width: 98%;
        margin-left: 1%;
        border-radius: 9px;
        border-top-color: hsl(34, 97%, 64%);
        box-shadow: 0px 10px 10px hsl(212, 6%, 44%, .2);
    }

    .karma-section > h2 {
        padding-top: 7.5%;
        margin-left: 9.2%;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: hsl(234, 12%, 34%);
    }

    .karma-section > p {
        margin-top: 1.3%;
        width: 75%;
        margin-left: 9.2%;
        font-size: 13.2px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        line-height: 21px;
        color: hsl(212, 6%, 44%);
    }

    .third-section {
        width: 32%;
    }

    .calculator-section {
        margin-top: 43%;
        background-color: hsl(0, 0%, 100%);
        padding-bottom: 13%;
        border-top: 4px solid;
        width: 98%;
        margin-left: 1%;
        border-radius: 9px;
        border-top-color: hsl(212, 86%, 64%);
        box-shadow: 0px 10px 10px hsl(212, 6%, 44%, .2);
    }

    .calculator-section > h2 {
        padding-top: 8%;
        margin-left: 9.2%;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: hsl(234, 12%, 34%);
    }

    .calculator-section > p {
        margin-top: 1%;
        width: 75%;
        margin-left: 9.2%;
        font-size: 13.2px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        line-height: 21px;
        color: hsl(212, 6%, 44%);
    }

    .image-container {
        margin-top: 9%;
        display: flex;
        width: 100%;
        justify-content: right;
    }

    .image-container > img {
        margin-right: 9.5%;
    }
}

@media screen and (max-width: 375px) {
    body {
        width: 100vw;
    }

    main {
        width: 100%;
        height: 98%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: hsl(212, 6%, 44%, .03);
        padding-bottom: 12.12%;
    }

    .page-title {
        margin-top: 14.7%;
        width: 80%;
        font-family: "Poppins", sans-serif;
        font-weight: 200;
        font-size: 24.6px;
        line-height: 34.2px;
        color: hsl(212, 6%, 44%);
    }

    .bold-title {
        font-weight: 600;
        margin-left: .2%;
        color: hsl(234, 12%, 34%);
    }

    .page-description {
        margin-top: 4%;
        width: 79%;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        text-align: center;
        font-size: 15.2px;
        color: hsl(212, 6%, 44%);
        line-height: 22.2px;
    }

    .card-section-container {
        width: 84%;
        margin-top: 15.5%;
        display: flex;
        flex-direction: column;
    }

    .first-section {
        width: 100%;
        margin-bottom: 9.9%
    }

    .supervisor-section {
        background-color: hsl(0, 0%, 100%);
        border-top: 4px solid;
        width: 100%;
        border-radius: 9px;
        border-top-color: hsl(180, 62%, 55%);
        box-shadow: 0px 10px 10px hsl(212, 6%, 44%, .2);
        padding-bottom: 15%;
    }

    .supervisor-section > h2 {
        padding-top: 8.5%;
        margin-left: 10.7%;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: hsl(234, 12%, 34%);
    }

    .supervisor-section > p {
        margin-top: 1%;
        width: 75%;
        margin-left: 10.5%;
        font-size: 13.2px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        line-height: 21px;
        color: hsl(212, 6%, 44%);
    }

    .second-section {
        width: 100%;
        margin-bottom: 8.5%;
    }

    .team-builder-section {
        background-color: hsl(0, 0%, 100%);
        padding-bottom: 15%;
        border-top: 4px solid;
        width: 100%;
        border-radius: 9px;
        border-top-color: hsl(0, 78%, 62%);
        box-shadow: 0px 10px 10px hsl(212, 6%, 44%, .2);
    }

    .team-builder-section > h2 {
        padding-top: 8.5%;
        margin-left: 10.2%;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: hsl(234, 12%, 34%);
    }

    .team-builder-section > p {
        margin-top: 1.5%;
        width: 73%;
        margin-left: 10.2%;
        font-size: 13.2px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        line-height: 21px;
        color: hsl(212, 6%, 44%);
    }

    .karma-section {
        margin-top: 10%;
        background-color: hsl(0, 0%, 100%);
        padding-bottom: 15%;
        border-top: 4px solid;
        width: 100%;
        border-radius: 9px;
        border-top-color: hsl(34, 97%, 64%);
        box-shadow: 0px 10px 10px hsl(212, 6%, 44%, .2);
    }

    .karma-section > h2 {
        padding-top: 8.5%;
        margin-left: 10.2%;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: hsl(234, 12%, 34%);
    }

    .karma-section > p {
        margin-top: 1.3%;
        width: 70%;
        margin-left: 10.2%;
        font-size: 13.2px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        line-height: 21px;
        color: hsl(212, 6%, 44%);
    }

    .third-section {
        width: 100%;
    }

    .calculator-section {
        background-color: hsl(0, 0%, 100%);
        padding-bottom: 15%;
        border-top: 4px solid;
        width: 100%;
        border-radius: 9px;
        border-top-color: hsl(212, 86%, 64%);
        box-shadow: 0px 10px 10px hsl(212, 6%, 44%, .2);
    }

    .calculator-section > h2 {
        padding-top: 9%;
        margin-left: 10.2%;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: hsl(234, 12%, 34%);
    }

    .calculator-section > p {
        margin-top: 1%;
        width: 75%;
        margin-left: 10.2%;
        font-size: 13.2px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        line-height: 21px;
        color: hsl(212, 6%, 44%);
    }

    .image-container {
        margin-top: 10.4%;
        display: flex;
        width: 100%;
        justify-content: right;
    }

    .image-container > img {
        margin-right: 10.2%;
    }
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }