style.scss

.container {
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 56vw auto auto auto auto;
    justify-content: center;
}

.landing {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 25px;
    border-style: outset;
    border-width: 10px;
    margin: 80px;
    background-image: url("media/landing.png");
    background-size: 100vw;
    background-repeat: no-repeat;
    .signature {
        position: relative;
        top: 15px;
    }
    .characteristics {
        position: relative;
        bottom: 60px;
        left: 115px;
        font-size: 18px;
    }
    .summary {
        margin-right: 60px;
        font-size: 18px;
    }
    .actions {
        margin-top: 55px;
        font-size: 18px;
    }
}

.about {
    display: flex;
    border-style: solid none none;
    border-width: 1px;
    border-color: rgb(73, 194, 202);;
    padding: 80px;
    .left-content {
        margin-top: -5px;
        margin-right: 40px;
    }
    .action {
        margin-top: 20px;
    }
    .photo {
        border-radius: 25px;
    }
}

.recommendations {
    display: flex;
    background-image: url("./media/landing.png");
    background-size: 100vw;
    background-repeat: no-repeat;
    padding: 30px;
    .recommendation {
        display: flex;
        flex-direction: column;
        background: white;
        margin: 30px;
        padding: 25px;
        padding-bottom: 0px;
        border-radius: 25px;
        .header {
            align-self: center;
            .headshot {
                border-radius: 100px;
                position: relative;
                left: 18px;
            }
            .linkedin {
                position: relative;
                top: 15px;
                left: 20px;
                color: rgb(0, 119, 181);
                font-size: 32px;
                :hover {
                    color: rgb(73, 194, 202);
                    transition: color 0.5s;
                }
            }
        }
        .recommender {
            margin-top: 10px;
            text-align: center;
            font-weight: bold;
        }
    }
}

.contact {
    padding: 80px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-evenly;
    .left-content {
        padding-right: 50px;
        margin: -5px;
        p {
            position: relative;
            bottom: 25px;
        }
        a {
            font-size: 48px;
            position: relative;
            bottom: 35px;
            right: 2px;
        }
        .linkedin {
            color: rgb(0, 119, 181);
            text-decoration: none;
            :hover {
                color: #429ab4;
                transition: color 0.3s;
            }
        }
        .github {
            color: black;
            text-decoration: none;
            position: relative;
            left: 5px;
            :hover {
                color: #429ab4;
                transition: color 0.3s;
            }
        }
    }
    .right-content {
        button {
            border-radius: 15px;
            border: none;
            background-color: rgb(73, 194, 202);
        }
        button:hover {
            background-color: rgb(66, 154, 180);
        }
    }
}

.footer {
    justify-self: center;
    margin-top: 20px;
    .copyright {
        position: relative;
        bottom: 50px;
        left: 105px;
    }
}

@media (max-width: 1220px) {
    .landing {
        margin: 60px;
    }
    .about {
        .photo {
            width: 454px;
            height: 385px;
        }
    }
}

@media (max-width: 1170px) {
    .landing {
        margin: 40px;
    }
    .about {
        .photo {
            width: 437px;
            height: 370px;
        }
    }
    .recommendations {
        background-size: 110vw;
    }
}

@media (max-width: 1130px) {
    .landing {
        margin: 20px;
    }
    .about {
        .photo {
            width: 419px;
            height: 355px;
        }
    }
    .recommendations {
        background-size: 100vw;
        .recommendation-4 {
            display: none;
        }
    }
}

@media (max-width: 1080px) {
    .landing {
        margin: 0px;
        background-size: 110vw;
        border: none;
        border-radius: 0;
    }
    .about {
        border-style: none;
        .photo {
            width: 401px;
            height: 340px;
        }
    }
    .recommendations {
        background-size: 110vw;
    }
}

@media (max-width: 980px) {
    .container {
        grid-template-rows: 70vw auto auto auto auto;
    }
    .landing {
        flex-direction: column;
        background-size: 135vw;
        .left-content {
            margin-top: 30px;
        }
        .summary {
            margin: 60px;
            margin-top: 0px;
            margin-bottom: -30px;
        }
        .actions {
            margin: 60px;
            margin-bottom: 100px;
        }
    }
    .about {
        flex-direction: column;
        padding: 60px;
        .left-content {
            margin-top: -5px;
            margin-right: 0px;
        }
        .photo {
            margin-top: 35px;
        }
    }
    .recommendations {
        background-size: 120vw;
        .recommendation-3 {
            display: none;
        }
    }
    .contact {
        flex-direction: column;
    }
}

@media (max-width: 850px) {
    .container {
        grid-template-rows: 80vw auto auto auto auto;
    }
    .landing {
        background-size: 155vw;
    }
    .recommendations {
        background-size: 135vw;
    }
}

@media (max-width: 750px) {
    .container {
        grid-template-rows: 90vw auto auto auto auto;
    }
    .landing {
        background-size: 170vw;
    }
    .recommendations {
        background-size: 150vw;
    }
}

@media (max-width: 700px) {
    .container {
        grid-template-rows: 100vw auto auto auto auto;
    }
    .landing {
        background-size: 190vw;
    }
    .recommendations {
        background-size: 170vw;
    }
}

@media (max-width: 650px) {
    .container {
        grid-template-rows: 110vw auto auto auto auto;
    }
    .landing {
        background-size: 210vw;
    }
    .recommendations {
        background-size: 210vw;
    }
}

@media (max-width: 600px) {
    .container {
        grid-template-rows: 120vw auto auto auto auto;
    }
    .landing {
        background-size: 230vw;
    }
    .recommendations {
        background-size: 150vw;
        .recommendation-2 {
            display: none;
        }
    }
}

@media (max-width: 550px) {
    .container {
        grid-template-rows: 130vw auto auto auto auto;
    }
    .landing {
        background-size: 245vw;
    }
    .recommendations {
        background-size: 160vw;
    }
}

@media (max-width: 540px) {
    .container {
        grid-template-rows: 140vw auto auto auto auto;
    }
    .landing {
        background-size: 265vw;
    }
    .recommendations {
        background-size: 170vw;
    }
}

@media (max-width: 530px) {
    .container {
        grid-template-rows: 150vw auto auto auto auto;
    }
    .landing {
        background-size: 285vw;
    }
}

@media (max-width: 520px) {
    .container {
        grid-template-rows: 160vw auto auto auto auto;
    }
    .landing {
        background-size: 305vw;
    }
    .about {
        .photo {
            max-width: 100%;
            height: auto;
        }
    }
}

@media (max-width: 510px) {
    .container {
        grid-template-rows: 170vw auto auto auto auto;
    }
    .landing {
        background-size: 325vw;
    }
}

@media (max-width: 495px) {
    .container {
        grid-template-rows: 180vw auto auto auto auto;
    }
    .landing {
        background-size: 345vw;
        .left-content {
            margin-top: 40px;
            .signature {
                width: 500px;
            }
            .characteristics {
                font-size: 17px;
                left: 100px;
            }
        }
        .summary {
            margin: 40px;
            margin-top: 0px;
            margin-bottom: -30px;
        }
        .actions {
            margin: 40px;
            margin-top: 60px;
            margin-bottom: 100px;
        }
    }
    .about {
        padding: 40px;
    }
    .recommendations {
        background-size: 240vw;
    }
    .contact {
        padding: 65px;
        padding-bottom: 10px;
        .left-content {
            padding-right: 0px;
        }
    }
}

@media (max-width: 400px) {
    .container {
        grid-template-rows: 210vw auto auto auto auto;
    }
    .landing {
        background-size: 400vw;
        .left-content {
            .signature {
                width: 450px;
            }
            .characteristics {
                left: 75px;
            }
        }
    }
    .recommendations {
        background-size: 275vw;
    }
    .contact {
        padding: 45px;
        padding-bottom: 10px;
    }
}

@media (max-width: 360px) {
    .container {
        grid-template-rows: 260vw auto auto auto auto;
    }
    .landing {
        background-size: 490vw;
        .left-content {
            .signature {
                width: 400px;
            }
            .characteristics {
                display: none;
            }
        }
    }
    .recommendations {
        background-size: 470vw;
    }
    .contact {
        padding: 25px;
        padding-bottom: 10px;
    }
}