style.css

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

    .title {
        font-size: 1.2rem !important;
    }

    .container {
        width: 100% !important;
        height: 90% !important;
        border-radius: 4px !important;
    }

    .input,
    .output {
        width: 100% !important;
        height: 39% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 1.1rem !important;
    }

    .input:focus,
    .output:focus {
        border: none !important;
    }

    .input textarea {
        height: 95% !important;
        font-size: 1.1rem !important;
    }

    .enter {
        margin-left: 10px !important;
        margin-right: 10px !important;
        font-size: 1.2rem !important;
    }

    .svg-icon {
        margin-left: 0 !important;
    }
}


* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
}

body {
    background-image: url(images_\(3\).jpeg);
    background-size: cover;
    overflow: hidden !important;
}

.container {
    background: rgba(211, 211, 211, 0.986);
    width: 950px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 20px rgba(77, 77, 77, 0.89);
    border-radius: 15px;

    text-align: center;
}

.title {
    margin-bottom: 20px;
}

.select-cont {
    font-size: 2rem;
    margin-top: 20px;
}

/* .select-cont select {
    width: 200px;
    font-size: 1.4rem;
    margin-left: 20px;
} */

.input {
    background: #FFF;
    margin-top: 15px;
    width: 850px;
    margin-left: 50px;
    border-radius: 7px;
    overflow: scroll;

}

.input textarea {
    width: 90%;
    height: 200px;
    font-size: 18pt;
    border: none;
    text-align: center;
    padding-top: 10px;

}

.input textarea:hover {
    border: none;
}

.break {
    height: 70px;
}

/* .rule {
    float: left;
    font-size: 1.4rem;
    /* margin: 15px 20px 20px 60px; */
    /* margin: 0 0 10px 50px;
} */

.enter {
    float: right;
    margin-right: 20px;
    font-size: 1.4rem;
    padding: 3px 12.5px;
    margin: 15px 60px 0 15px;
    background: #00224e;
    border: none;
    border-radius: 4px;
    color: #FFF;
}

.enter:hover {
    padding: 3px 20px;
    transition: ease-in-out .2s;
}


.output {
    width: 850px;
    margin-left: 50px;
    height: 200px;
    font-size: 18pt;
    border: none;
    background: #FFF;
    margin-bottom: 10px;
    border-radius: 7px;
    text-align: center;
    padding-top: 10px;
    overflow: scroll;
}


.svg-icon {
    width: 3em;
    height: 2em;
    margin-top: 20px;
    margin-left: 40px;
    float: left;
}

.svg-icon path:hover,
.svg-icon polygon:hover,
.svg-icon rect:hover,
.svg-icon circle:hover,
.svg-icon:hover {
    fill: #da0101;
    transition: ease-in-out .2s;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
    fill: #4691f6;
}

.svg-icon circle {
    stroke: #4691f6;
    stroke-width: 1;
}

.logo {
    position: absolute;
    color: rgb(255, 255, 255);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
}