@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Inter";
}

body {
   background-color: #2b2d42;
}

h1 {
   font-size: 40px;
   color: #edf2f4;
   font-weight: bold;
}

p {
   font-size: 16px;
   color: #8d99ae;
   font-weight: normal;
}

.hero-section {
   margin-top: 40px;
   display: flex;
   flex-direction: column;
}

.personal-info {
   padding: 8px 16px 8px 8px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.name {
   color: #ffecd1;
}

.frame {
   display: flex;
   justify-content: flex-end;
   padding-right: 16px;
}

.potrait {
   height: 50%;
   width: 50%;
   aspect-ratio: 2 / 2;
   object-fit: cover;
   border: 8px;
   border-style: solid;
   border-color: #001524;
   border-radius: 50%;
   border-color: #001524;
   opacity: 80%;
}

.skills-and-form-section {
   padding-left: 8px;
   display: flex;
   flex-direction: column;
   gap: 40px;
}

.skills {
   height: 50%;
   width: 50%;
}

.contact-form {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

.input-box {
   padding: 12px;
   border-radius: 50px;
   border-style: none;
   width: 80%;
   background-color: #edf2f4;
}

.input-box::placeholder {
   color: #001524;
   opacity: 1;
}

.submit-button-container {
   display: flex;
   justify-content: flex-start;
   width: 80%;
}
.submit-button-container button {
   padding: 12px;
   border-radius: 50px;
   width: 40%;
   border-style: none;
   background-color: #edf2f4;
   color: #001524;
}