.homepage {
    margin-top: 10%;
    background-image: url(https://christina-houston-portfolio.web.app/images/background2.jpg);
    background-size: 900px;
    background-position-x: 80%;
    background-repeat: no-repeat;
}

.homepage > p {
    text-align: left;
    margin-left: 27%;
}

.homepage > h1 {
    text-align: left;
    margin-left: 27%;
    /* margin-bottom: -1%; */
}

.homepage button {
    margin-left: -32%;
    margin-top: 3%;
    background-color: white;
    border: none;
    color: black;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
    cursor: pointer;
    border: 2px solid #747373;
}

.homepage button:hover {
    background-color: #A8DEFA;
    color: white;
}

.homepage-h2 {
    /* display: inline-block; */
    /* margin-left: -15%; */
    text-align: left;
    margin-left: 27%;
}

.name {
    background-color: #FCD9CF;
    padding: 5px;
}

.design:hover {
    background-color: #DABDF6;
    padding: 5px;
}

.code:hover {
    background-color: #A8DEFA;
    padding: 5px;
}

.account-manage:hover {
    background-color: #A8FAD6;
    padding: 5px;
}

.draw:hover {
    background-color: #FFF2C6;
    padding: 5px;
}
.small-writing {
    font-size: 10px;
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .homepage > h1 {
        text-align: left;
        margin-left: 22.5%;
        /* margin-bottom: -1%; */
    }

    .homepage-h2 {
        text-align: left;
        word-wrap: inherit;
        margin-left: 22.5%;
        width: 37%;
    }

    .homepage > p {
        text-align: left;
        margin-left: 22.5%;
        width: 35%;
        margin-top: -1%;
    }

    .homepage button {
        margin-left: -30%;
        margin-top: 3%;
        background-color: white;
        border: none;
        color: black;
        padding: 12px 28px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        border: 2px solid #747373;
    }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .homepage > h1 {
        text-align: left;
        margin-left: 22.5%;
        margin-top: 1%;
        /* margin-bottom: -1%; */
    }

    .homepage-h2 {
        text-align: left;
        word-wrap: inherit;
        margin-left: 22.5%;
        width: 80%;
        margin-top: 88%;
    }

    .homepage > p {
        text-align: left;
        margin-left: 22.5%;
        width: 80%;
        margin-top: 2%;
    }

    .homepage button {
        margin-left: -19%;
        margin-top: 3%;
        margin-bottom: 5%;
        color: black;
        padding: 10px 26px;
        font-size: 12px;
    }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 376px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .homepage > h1 {
        text-align: left;
        margin-left: 22.5%;
        margin-top: 1%;
        /* margin-bottom: -1%; */
    }

    .homepage-h2 {
        text-align: left;
        word-wrap: inherit;
        margin-left: 22.5%;
        width: 70%;
        margin-top: 370px;
    }

    .homepage > p {
        text-align: left;
        margin-left: 22.5%;
        width: 70%;
        margin-top: 2%;
    }

    .homepage button {
        margin-left: -7%;
        margin-top: 3%;
        margin-bottom: 5%;
        color: black;
        padding: 10px 26px;
        font-size: 12px;
    }
}