@import "../css/main.scss";

.landing{
    width: 100%;
    max-width: 350px;
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 80px;
    .card{
        width: 100%;
        border: solid 0.5px var(--primary);
    }
    .buttons{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        a{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
            height: 30px;
            color: #000;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 600;
            margin: 20px 0px 20px 0px;
            padding: 5px 20px 5px 20px;
            border: #000 solid 1px;
            border-radius: 5px;
            &:hover{
                border: var(--accent) solid 1px;
            }
            img{
                height: 100%;
            }
        }
    }
}

.mywork{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .print-design{
        background: url('../content/print-design/flyers/thumbs/TFlyer_12.jpg');
        background-color: rgb(0, 0, 0, 0.7);
        background-blend-mode: multiply;
    }
    .large-format{
        background: url('../content/large-format/banner/thumbs/tBanner_06.jpg');
        background-color: rgb(0, 0, 0, 0.7);
        background-blend-mode: multiply;
    }
    .digital{
        background: url('../content/digital/social-media/thumbs/Instagram_11.jpg');
        background-color: rgb(0, 0, 0, 0.7);
        background-blend-mode: multiply;
    }
    a{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin: 20px;
        height: 250px;
        width: 250px;
        text-align: center;
        border-radius: 12px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.5rem;
        &:hover{
            box-shadow: 15px 15px 25px #000;
            cursor: pointer;
            background-color: rgb(0, 0, 0, 0.0);
            color: rgb(0, 0, 0, 0.0);
        }
    }
}
@media screen and (max-width: 900px){
    .mywork{
        flex-direction: column;
    }
}

.aboutme{
    display: flex;
    width: 80%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 60px 80px 60px;
    background-color: var(--light-accent);
    margin: 70px 0px 70px 0px;
    p{
        max-width: 700px;
    }
    .one{
        font-weight: 600;
    }
    .two{
        font-weight: 500;
    }
}