html,
body {
    margin: 0;
    padding: 0%;
    height: 96%;
    width: 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath1039%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%2332325d'%3e%3c/rect%3e%3ccircle r='36.31' cx='454.31' cy='450.87' fill='url(%26quot%3b%23SvgjsLinearGradient1040%26quot%3b)'%3e%3c/circle%3e%3ccircle r='19.345' cx='86.93' cy='251.99' fill='url(%26quot%3b%23SvgjsLinearGradient1041%26quot%3b)'%3e%3c/circle%3e%3ccircle r='16.71' cx='758.63' cy='295.38' fill='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)'%3e%3c/circle%3e%3ccircle r='32.905' cx='120.45' cy='445.06' fill='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)'%3e%3c/circle%3e%3ccircle r='48.74' cx='995.51' cy='289.89' fill='url(%26quot%3b%23SvgjsLinearGradient1044%26quot%3b)'%3e%3c/circle%3e%3ccircle r='32.82' cx='333.44' cy='123' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/circle%3e%3ccircle r='41.815' cx='432.01' cy='344.25' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/circle%3e%3ccircle r='39.825' cx='353.59' cy='339.92' fill='url(%26quot%3b%23SvgjsLinearGradient1047%26quot%3b)'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath1039'%3e%3crect width='1440' height='560' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='381.69' y1='450.87' x2='526.9300000000001' y2='450.87' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1040'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='48.24000000000001' y1='251.99' x2='125.62' y2='251.99' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1041'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='725.21' y1='295.38' x2='792.0500000000001' y2='295.38' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1042'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='54.64' y1='445.06' x2='186.26' y2='445.06' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1043'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='898.03' y1='289.89' x2='1092.99' y2='289.89' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1044'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='267.8' y1='123' x2='399.08000000000004' y2='123' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1045'%3e%3cstop stop-color='%2332325d' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23424488' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='348.38' y1='344.25' x2='515.64' y2='344.25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1046'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='273.93999999999994' y1='339.91999999999996' x2='433.23999999999995' y2='339.91999999999996' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1047'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");

}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.container span {
    color: salmon;
}
a{
    display: initial;
    background-color: white;
}
a{
    padding: 5px;
    border-radius: 6px;
    background-color: white;
}
a:active{
    color: red;
}
a:hover{
    background-color: white;
    font-weight: bolder;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h1 {
    font-size: 50px;
    margin: 0;
    color: white;
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

textarea {
    margin: 30px 0;
    width: 40%;
    background-color: black;
    height: 30%;
    box-shadow: 12px 12px 15px rgba(0, 0, 0, 0.5);
    font-size: 18px;
    padding: 5px;
    border: none;
    outline: none;
    border-radius: 10px;
    font-weight: bolder;
    cursor: default;
    color: white;
}


textarea::placeholder {
    font-size: 18px;
    color: white;
}

.row {
    width: 60%;
    display: flex;
    justify-content: center;
    gap: 20px;
}

button {
    width: 200px;
    height: 50px;
    font-size: 18px;
    padding: 10px 30px;
    border: 0;
    outline: 0;
    background-color: #ff2963;
    box-shadow: 12px 12px 15px rgba(0, 0, 0, 0.5);
    border-radius: 35px;
    cursor: pointer;
    color: #fff;
    font-weight: bolder;
    display: flex;
    align-items: center;
}

select {
    flex: 1;
    color: #fff;
    background-color: #403d84;
    height: 50px;
    padding: 0 20px;
    max-width: 28%;
    outline: 0;
    border: 0;
    border-radius: 35px;
    appearance: none;
    background-image: url(images/dropdown.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position-x: calc(100% - 20px);
    background-position-y: 20px;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: black;
    color: whitesmoke;
}

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

    html,
    body {
        margin: 0;
        padding: 0%;
        height: 98%;
        width: 100%;
    }

    h1 {
        font-size: 30px;
        margin: 0;
        color: white;
        text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        font-family: 'Times New Roman', Times, serif;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .container{
        height: 97%;
    }
    textarea {
        height: 20%;
        width: 40%;
    }

    textarea::placeholder {
        font-size: 8px;
        color: white;
    }

    footer {
        font-size: 10px;
        text-align: center;
        padding: 7px;
        background-color: black;
        color: whitesmoke;
    }

    .row {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 6%;
    }

    button {
        width: fit-content;
        height: fit-content;
        font-size: 18px;
        padding: 10px 25px;
        border: 0;
        outline: 0;
        background-color: #ff2963;
        box-shadow: 12px 12px 15px rgba(0, 0, 0, 0.5);
        border-radius: 36px;
        cursor: pointer;
        color: #fff;
        font-weight: bolder;
        display: flex;
        justify-items: center;
        justify-content: center;
        gap: 10px;
    }

    select {
        flex: 1;
        color: #fff;
        background-color: #403d84;
        height: 55px;
        padding: 0 20px;
        max-width: 28%;
        font-size: 18px;
        font-weight: bolder;
        outline: 0;
        border: 0;
        border-radius: 35px;
        appearance: none;
        justify-items: center;
        background-image: url(images/dropdown.png);
        background-repeat: no-repeat;
        background-size: 15px;
        background-position-x: calc(100% - 20px);
        background-position-y: 23px;
    }

}

@import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);