:root {
    background-color: #0108a1;
}

body {
    background-color: #0108a1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

* {
    font-family: "Saira", sans-serif;
}

.title {
    font-size: 40px;
}

h1, h2 {
    color: #cddaec;
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 60%);
}

.main-wrapper {
    width: 800px;
    /* height: 300px; */
    background-color: #0827be;
    border-radius: 32px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;

    border-color: #081f91;
    border-width: 1px;
    border-style: solid;

    box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 20%);
}

.sub-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.button {
    width: 120px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: #267ac9;

    border: solid 1px #1c5891;
    border-radius: 20px;

    box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 20%);

    cursor: pointer;

    margin-bottom: 8px;
}

.button:hover {
    background-color: #2067aa;
}

.button:active {
    background-color: #195185
}

.input {
    width: 300px;
    height: 100px;
    resize: none;

    border-radius: 10px;

    margin-bottom: 8px;
}

.output-wrapper {
    width: 306px; /* dude i have no fucking idea why it only works with 306px */
    height: 106px;
    margin-bottom: 8px;
}

.output-wrapper textarea {
    margin: 0;
}

.copy-button {
    width: 60px;
    height: 25px;
    border-radius: 10px;
    font-size: 15px;
    padding: 0;
    margin: 0;
    position: relative;
    float: right; /* dont murder me please */
    bottom: 32px;
    box-shadow: none;
}