styles.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;1,500;1,800&display=swap');

*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
    --background-gradient1: linear-gradient(90deg, rgba(122, 199, 79, 1) 0%, rgba(161, 207, 107, 1) 100%);
    --background-color1: #D5D887;
    --background-color2: #E87461;
    --text-color: white;
}

body {
    font-family: 'Raleway', sans-serif;
    background: var(--background-gradient1);
}

.wrapper {
    max-width: 1024px;
    width: 80%;
    margin: 2rem auto;
    display: flex;
    justify-content: space-between;
}

.main {
    width: 60%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.text-area-main {
    background-color: var(--background-gradient1);
    color: var(--text-color);
    width: 100%;
    max-width: 100%;
    max-height: 400px;
    min-width: 100%;
    min-height: 400px;
    border: none;
}

.buttons p {
    color: var(--text-color);
    font-size: .8rem;
    font-weight: 700;
}

.btn-styles {
    width: 12rem;
    height: 3rem;
    font-weight: 700;
    border-radius: 20px;
    font-size: 1rem;
    border: none;
}

.btn-styles:hover,
.btn-styles styles:active {
    cursor: pointer;
    opacity: .7;
}

.buttons .encrypt {
    background-color: var(--background-color1);
    color: var(--background-color2);
    margin-right: 1.5rem;
    width: 45%;
}

.buttons .decrypt {
    background-color: var(--background-color2);
    color: var(--background-color1);
    width: 45%;
}

.decryptor {
    width: 35%;
    padding: .5rem 1rem;
    background-color: #7AC74F;
    border-radius: 15px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    box-shadow: 9px 10px 17px -5px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 9px 10px 17px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 9px 10px 17px -5px rgba(0, 0, 0, 0.75);
}

.decreptor-wrapper {
    height: auto;
    width: 95%;
    margin: 0 auto;
}

.decryptor-empty {
    margin: 12rem 2rem;
    display: block;
}

.decryptor-fill {
    display: none;
}

.text-area-decryptor {
    background-color: var(--background-gradient1);
    color: var(--text-color);
    width: 100%;
    border: none;
    margin-bottom: 8.2rem;
}

.copy {
    background-color: var(--background-color2);
    color: var(--background-color1);
    width: 100%;
}

@media screen and (max-width: 650px) {
    .wrapper {
        flex-direction: column;
        justify-content: space-between;
        width: 60%;
        margin: 2rem auto;
    }

    .main {
        width: 100%;
    }

    .decryptor {
        width: 100%;
        margin: 3rem auto 0 auto;
    }

    .text-area-decryptor {
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 485px) {

    .buttons .encrypt,
    .buttons .decrypt {
        width: 100%;
        margin-bottom: 1rem;
    }
}