* {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
    background-color: #008f85;
}
header {
    text-align: center;
    background-color: #ffffff;
    padding: 10px;
    height: 80%;

    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    -ms-flex-pack: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

   -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}

main {
    background-color: #028500;
    height: 80%;
    text-align: center;
    padding: 10px;


    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    -ms-flex-pack: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

   -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
   -moz-box-direction: normal;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
}

h1 {
    height: 38px;
    font-family: 'Work Sans', sans-serif;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 0.6px;
    text-align: center;
    color: #ffffff;
    padding-top: 40px;
    margin: 0;
}

li {
    text-align: center;
    margin: 0 25% 0 25%;
}


.logo {
    color: #67abef;
    font-weight: 900;
    font-size: 26px;
    margin-top: 0;
    padding: 0;
}

.logo span {
    border-bottom: solid 3px #1f233e;
    border-left: solid 3px #1f233e;

}
.flexLogoItem {
    width: 110px;
    height: 28px;
    margin-top: 30px;
    object-fit: contain;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    align-self: center;

    -ms-flex-preferred-size: 100%;
    -webkit-flex-basis: 100%;
    flex-basis: 100%;

    -ms-flex-positive: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}
 .flexMainItems {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    align-self: center;

    -ms-flex-positive: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;

    padding: 8px;
 }

 .container {
    width: 750px;
    margin: 2% 30% 5% 30%;
    text-align: center;

    -ms-flex-preferred-size: 70%;
    -webkit-flex-basis: 70%;
    flex-basis: 70%;
 }

 #input {
    width: 219px;
    height: 37px;
    border-radius: 3.2px;
    border: solid 0.8px #ffffff;;
    background-color: inherit;
    display: block;
    margin: auto;
    margin-top: 10px;
    font-family: Arial,Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    letter-spacing: .2px;
    text-align: center;
    color: #ffffff;

    
 }
 #shorten {
    width: 125px;
    height: 30px;
    border-radius: 2px;
    border-color: inherit;
    background: linear-gradient(to top left, #1f233e -10%, #67abef 86%);
    margin-top: 30px;
    font-family: Work Sans, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
    color: #ffffff;
    margin-right: -3px;
 }
#responseField {
    width: 300px;
    min-width: 191px;
    min-height: 120px;
    background-color: inherit;
    border: solid 0.8px #ffffff;
    margin: 2% 30% 5% 30%;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.2px;
    text-align: center;
    color: #ffffff;
    overflow-wrap: break-word;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


    -ms-flex-preferred-size: 30%;
    -webkit-flex-basis: 30%;
    flex-basis: 30%;
}

#shorten:hover {
    background: linear-gradient(to top left, #1f233e 20%, #67abef 105%);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}
#shorten:active {
    background: linear-gradient(to bottom right, #1f233e 20%, #67abef 105%);
    border-color: #ffffff;
    color: #ffffff;
    cursor: pointer;
    font-weight: 500;
    box-shadow: none;
}