.contact_Me_Section{
    display:flex;
    margin-top:144px;
    margin-bottom: 144px;
    max-width:1248px;
    height:600px;
}

.contactDescriptionAria{
    text-align: start;
    width:45%;
    padding-left:10px;
    padding-right:10px;
    height:460px;
}

.contact_FormAria{
    width:55%;
    height:100%;
    margin-right:10px;
}

hr{
    width:100%;
    height:0px;
    border-color: rgba(61, 207, 182, 1);
}

.nameFieldWrapper{
    height:99px;
    width:90%;
    margin-left:32px;
    
}

.nameField{
    margin: 32px 0px 16px 0px;
    font-size: 24px;
    font-family: 'FiraCode', sans-serif;
    color:rgba(61, 207, 182, 1);
}

.nameInput{
    border:unset;
    background-color: transparent;
    padding:5px 30px 5px 0px;
    margin: 0px 0px 0px 0px;
    width:230px;
    font-size: 18px;
    font-family: 'Karla', sans-serif;
    color:white;
    
}

.errorDivName{
    height:30px;
    font-family: 'Karla', sans-serif;
    color:rgba(236, 123, 123, 0.8);
}

.errorDivEmail{
    height:30px;
    font-family: 'Karla', sans-serif;
    color:rgba(236, 123, 123, 0.8);
}

.errorDivMessage{
    height:30px;
    font-family: 'Karla', sans-serif;
    color:rgba(236, 123, 123, 0.8);
}


.emailFieldWrapper{
    height:99px;
    width:90%;
    margin-left:32px;
    margin-right:-32px;
}

.emailField{
    margin: 32px 0px 16px 0px;
    font-size: 24px;
    font-family: 'FiraCode', sans-serif;
    color:rgba(61, 207, 182, 1);
}

.emailInput{
    border:unset;
    background-color: transparent;
    padding:5px 30px 5px 0px;
    margin: 0px 0px 0px 0px;
    width:236px;
    font-size: 18px;
    font-family: 'Karla', sans-serif;
    color:white !important;
}

/* input::internal-autofill-previewed{
    appearance: none;
    -webkit-background-fill-color: rgb(253, 250, 250, 0) !important;
} */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
    -webkit-appearance: none !important;
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 10000s ease-in-out 0s !important;
    color:white !important;
    caret-color:  white !important;
}

/* input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed,
input:-webkit-text-autofill {
    color:white !important;
} */
.helpField{
    margin: 32px 0px 16px 0px;
    font-size: 24px;
    font-family: 'FiraCode', sans-serif;
    color:rgba(61, 207, 182, 1);
}

.helpContainer{
    margin-left:32px;
    width:90%;
}
/* .helpWrapper{
    height:99px;
    width:100%;
} */

.helpInput{
    border:unset;
    background-color: transparent;
    padding:5px 30px 5px 0px;
    margin: 0px 0px 0px 0px;
    min-width:230px;
    font-size: 18px;
    font-family: 'Karla', sans-serif;
    color:white;
    resize: none;
    width:90%;
    overflow: scroll;
}


.submittedFeedback{
    position:fixed;
    display:flex;
    align-items: center;
    justify-content: center;
    bottom:200px;
    right:-300px;
    padding: 5px 25px;
    width:200px;
    height:50px;
    border: 3px solid goldenrod;
    border-radius: 30px;
    font-size: 16px;
    font-family: 'Karla', sans-serif;
    color:rgba(61, 207, 182, 1);
    background-color: rgb(32, 49, 46);
    font-weight:bold;
    transition: 0.5s ease-in-out
}
.success{
    right:200px;
}

.lastHR{
    margin-top:0px;
    margin-bottom: 40px;
}

.checkboxWrapper{
    width:24px;
    height:24px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.agreeBox{
    width:24px;
    height:24px;
    box-sizing: border-box;
}

input[type = "checkbox"]{
    appearance: none;
    content:url(../img/checkbox_unchecked.png);
    background-color: transparent;
    color:white;
    width:24px;
    height:24px;
}

input[type = "checkbox"]:hover{
    cursor: pointer;
    content:url(../img/checkbox_unchecked_hover.png);
    width:24px;
    height:24px;
}
/* input[type = "checkbox"]:hover ~ p{
    margin-left:10.2px;
} */

input[type="checkbox"]:checked {
    content: url(../img/checkbox_checked.png);
    /* width:24px;
    height:24px; */
}

input[type="checkbox"]:checked:hover {
    cursor: pointer;
    content: url(../img/checkbox_checked_hover.png);
}

.checkboxDiv{
    display:inline-flex;
    align-items: center;
    margin-bottom: 5px;
    gap: 1px;
}
.checkboxDiv p{
    margin-left: 10px;
    color:white;
    font-size: 16px;
    font-family: 'Karla', sans-serif;
}
.checkboxDiv a{
    color: rgba(61, 207, 182, 1);
    text-decoration: none;
    display:inline-flex;
    padding-bottom: 6px;
}

.checkboxDiv a:hover{
    display:inline-block;
    justify-content: center;
    color: rgb(252, 252, 252);
    text-decoration: underline;
    text-decoration-color: rgba(61, 207, 182, 1);
    text-underline-offset: 8px;
    cursor: pointer;
    display:-moz-inline-stack;
}


.agreeBoxError{
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(236, 123, 123, 0.8);
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.errorDivCheckbox{
    font-family: 'Karla', sans-serif;
    height:30px;
    color:rgba(236, 123, 123, 0.8);
}

.sendButton{
    border-radius: 25px;
    font-size: 18px;
    font-family: 'Karla', sans-serif;
    border: 1px solid rgba(61, 207, 182, 1);
    padding: 14.5px 33.2px;
    margin: 0 auto;
    display: flex;
    cursor: pointer;
}

.addon {
    border: 2px solid transparent;
    border-radius: 25px;
    animation: borderOrbit 1s linear infinite;
    transition: 1s;
}

@keyframes borderOrbit {
    0%   { border-color: cyan transparent transparent transparent; }
    25%  { border-color: transparent cyan transparent transparent; }
    50%  { border-color: transparent transparent cyan transparent; }
    75%  { border-color: transparent transparent transparent cyan; }
    100% { border-color: cyan transparent transparent transparent; }
}
/* .addon{
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% { border-color: white;
    border-width: 3px; }
    50%       { border-color: transparent; }
} */

.sendButton[disabled]{
    cursor: not-allowed;
    color:black;
}
.sendButton:enabled{
    cursor: pointer;
    animation: wiggle 0.8s ease-in-out infinite 2s;
}

@keyframes wiggle {
    0% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(2deg);
    }
    20% {
      transform: rotate(0deg);
    }
    35% {
      transform: rotate(-2deg);
    }
    40% {
      transform: rotate(0deg);
    }
    55% {
      transform: rotate(0deg);
    }
    60% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

.helpInput:focus{
    outline: none;
}

.helpInput::placeholder{
    font-size: 18px;
    color:rgb(255, 255, 255, 0.8);
}

.nameInput:focus{
    outline: none;
}
.nameInput::placeholder{
    font-size: 18px;
    color:rgb(255, 255, 255, 0.8);
}

.emailInput:focus{
    outline: none;
}

.emailInput::placeholder{
    font-size: 18px;
    color:rgb(255, 255, 255, 0.8);
}

.Contact_headline{
    text-align: start;
    color: rgba(61, 207, 182, 1);
    font-size: 24px;
    font-family: 'Karla', sans-serif;
    margin: 0px 0px 20px 0px;
}

.Contact_mainTopic{
    text-align: start;
    color: rgba(61, 207, 182, 1);
    font-size: 64px;
    font-family: 'FiraCode', sans-serif;
    height:163px;
    margin:0px 0px 40px 0px;
}

.Contact_description{
    text-align: start;
    color: rgba(61, 207, 182, 1);
    font-size: 24px;
    font-family: 'FiraCode', sans-serif;
    margin:0px 0px 16px 0px;
}

.paragraph{
    font-size: 16px;
    font-family: 'Karla', sans-serif;
    color:white;
    /* height:110px; */
    width:90%;
}

.paragraph bold{
    color: rgba(61, 207, 182, 1);
}