.smallicon {
    font-size: 1em
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bree Serif', serif
}

.contact-form>* {
    padding: 1em
}

.info {
    background: #3d445c;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.info h3,
.info ul {
    text-align: center;
    margin: 0 0 1rem 0;
    color: #fff
}

li {
    color: #fff
}

.contact-me {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    width: 60vw
}

.card-opacity {
    background: rgba(13, 72, 161, .37)
}

.card-opacity:hover {
    box-shadow: 0 0 20px 0 rgba(57, 82, 163, .7);
    transition: 1s
}

.contact-me h3 {
    text-align: center;
    color: #fff
}

.ul_form {
    list-style-type: none
}

.contact-me form label {
    display: block
}

.contact-me form p {
    margin: 0
}

.contact-me form .full {
    grid-column: 1/3
}

.contact-me form button,
.contact-me form input,
.contact-me form textarea {
    width: 100%;
    padding: 1em;
    border: solid 1px #5a7ae6;
    border-radius: 4px
}

.contact-me form textarea {
    resize: none
}

.contact-me form button {
    background: #627edc;
    border: 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.5em;
    letter-spacing: .1em;
    font-weight: 700
}

.contact-me form button:focus,
.contact-me form button:hover {
    background: #3952a3;
    color: #fff;
    outline: 0;
    transition: background-color 2s ease-out
}