.contact-me-title{padding-left:1rem;font-size:clamp(1.4rem,3vw,2rem)}.contact-me-container{color:var(--text-color);flex-direction:column;align-items:center;width:100vw;max-width:60rem;display:flex;position:relative;left:50%;translate:-50%}.contact-me-container .contact-text{width:100%;padding:2rem 1rem 0}.contact-me-container .contact-text ul{padding:1rem}.contact-me-container .contact-text ul li{margin:1rem 0;list-style:none}.contact-me-container .contact-text ul li a{color:var(--text-color);border:.5px solid var(--text-color);border-radius:.5rem;padding:.2rem .5rem}.contact-me-container .contact-text ul li div:first-child{min-width:6.5rem;margin:1rem .5rem;display:flex}.contact-me-container .contact-text ul li div:last-child{margin:1rem .5rem 2rem;display:flex}.contact-me-container .contact-text ul li:last-child>div{position:relative}.contact-me-container .contact-text ul li img{background-color:var(--bg-color-logo);border-radius:.2rem;width:1.5rem;margin-right:.5rem;padding:.2rem}.contact-me-container .form-container{width:100%;padding:1rem 2rem 2rem}form div{flex-direction:column;padding:.6rem 0;display:flex}form div label{margin-bottom:.2rem}form div input{height:2rem;padding:.4rem}form div textarea{min-height:5rem;padding:.4rem}form button{cursor:pointer;border:none;border-radius:.5rem;width:100%;padding:.5rem}.arrow-contact{background-color:var(--border-color);width:1.5rem;height:2px;animation:1s ease-in-out infinite move-arrow-up;display:inline-block;position:relative;top:50%;translate:1rem .6rem;rotate:90deg}.arrow-contact:after{content:"";border-top:2px solid var(--border-color);border-right:2px solid var(--border-color);width:.6rem;height:.6rem;position:absolute;top:50%;right:2px;translate:0 -50%;rotate:45deg}@media screen and (min-width:450px){.contact-me-container .contact-text ul li{align-items:center;display:flex}.contact-me-container .contact-text ul li div:first-child{margin:0}.contact-me-container .contact-text ul li div:last-child{margin:.2rem .5rem}.contact-me-container .contact-text ul li:last-child>div{margin:.2rem 0}}@media screen and (min-width:768px){.contact-me-container{flex-direction:row;justify-content:space-evenly;align-items:start;margin-top:2rem;display:flex}.contact-me-container .form-container{padding:2rem 1rem}.arrow-contact{animation:1s ease-in-out infinite move-arrow-right;rotate:none}form div{padding:1rem 0}form div label{margin-bottom:.5rem}}@keyframes move-arrow-right{0%{translate:1rem .6rem}50%{translate:1.4rem .6rem}to{translate:1rem .6rem}}@keyframes move-arrow-up{0%{translate:1rem .8rem}50%{translate:1rem}to{translate:1rem .8rem}}