body {
    background:#F1FAEE;
    margin:0;
    padding:0; 


}

.navbar {
    background-color:#67597A;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index:1;
    height: 44px;
    display:flex;


}

.navbar button {    
    background-color: transparent;
    color: #f2f2f2;
    text-align: center;
    padding:14px 16px;
    text-decoration: none;
    font-size: 16px;
    border:none;
}

.dropdown {
    z-index: 0;
    height: 44px;
}
.dropdowncontent {
    display: none;
    position: absolute;
    height: 44px;
    top: 100%;
    z-index: 3;
    background-color: #67597A;
}

.dropdown:hover .dropdowncontent {
    display:block;

}

.navbar p {
    margin-left: auto;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    padding-right: 16px;
}

.navbar a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding:14px 16px;
    text-decoration: none;
    font-size: 16px;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}


.navbar a:active {
    background-color: #F4ACB7;
    color: #f2f2f2;
}

.navbar button:hover {
    background-color: #ddd;
    color: black;
}

p {
    color:#002E2C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}

ul {
    color:#002E2C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}


a {
    font-family: Arial, Helvetica, sans-serif;
    color: #f2f2f2;
}

a:hover {
    color: #002E2C;
}



button {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: #F1FAEE;
}

.column h2 {
    color:#002E2C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}

.titlecontainer {
    text-align: center;
    position: relative;
    height: 220px;
    border-bottom: 5px solid black;
}

.titlecontainer h1 {
    color: #080808;
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1%;
    background-color: #67597a73;
}

.titlecontainer canvas {
    width: 100%;
    height: 100%;
}

hr {
    border: #080808;
    border-top: 5px solid black;
    margin:0
}

.paragraph-box {
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5%
}

.paragraph-box img {
    width:  100px;
    min-height: 0;

}


.row {
    align-items: center;
}

.column {
    float:left;
    width:30.3%;
    margin-top: 1%;
    margin-right: 0.5%;
    margin-left: 0.5%;
    overflow-wrap: break-word;
    border-radius: 10px;
    padding:1%;


}

.column h2 {
    text-align: center;

}

.column img {
    border: solid black 5px;
    border-radius: 5px;
    object-fit:contain; 
    width:98%;
    height:98%;
}

.column p {
    color: white;
    text-align: center;
}
.row::after {
    content:"";
    display:table;
    clear:both;

}

#left {
    background-color:#F4ACB7;
}

#middle {
    background-color:#79ADDC;
}

#right {
    background-color:#67597A;
}

.buttoncontainer {
    margin-top: 25px;
    text-align: center;
    margin-bottom: 25px;
}

.buttoncontainer a {
    color:white;
    padding:1%;
    background-color: #080808;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;

}

.buttoncontainer a:hover {
    border: solid 2px #79ADDC;
    color: #79ADDC;
}


.profilediv h1 {
    text-align: start;
}

.profilediv {
    margin: 0%;
    padding-left: 5px;
    height: 425px;
    border-bottom: solid black 5px;
}

.profilediv p {
    margin-right: 0;
}

.profilediv img {
    border-radius: 50%;
    float:right;
    height: 400px;
    width: 400px;
    border: solid black 5px;
}

.contactcontainer {
    display:flex;
    border-right: solid black 5px;
}

.contactcontainer h2 {
    color:#002E2C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}

.socials {
    margin: 0%;
    flex:50%;
    align-items: center;
    text-align: center;
    border-right: solid black 2.5px;
    justify-content: center;
}

.socials img {
    height: 200px;
    padding: 2%;
}


.form {
    display:inline-block;
    flex:50%;
    border-left: solid black 2.5px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    justify-content: space-evenly;
    padding-bottom: 10px;
}

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

.form h2 {
    text-align: center;
}

.form img {
    height: 25px;
}

.contactinputs {
    width: 500px;
    height: 50px;
    border: none;
    outline: none;
    color:#002E2C;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 30px;
    padding-left: 15px;
}

.form textarea {
    height: 200px;
    border-radius: 20px;
    padding-top: 15px;
}

.form button {
    display:flex;
    align-items: center;
    padding: 15px 30px;
    font-size: 15px;
    color: #002E2C;
    background-color: #FFFF;
    border:none;
    gap: 5px;
    border-radius: 20px;
    cursor: pointer;
}

.form button:hover {
    border: 2px solid #67597A;
}

.contactinputs:focus {
    border: 2px solid #F4ACB7;
}

.form textarea:focus {
    border: 2px solid #79ADDC;
}

.contactinputs::placeholder {
    color:#002E2C;
}

.projectdiv {
    margin-top:1%;
    margin-right: 0.5%;
    margin-left: 0.5%;
    border-radius: 10px;
    padding-top:0.5%;
    padding-left: 1%;
    padding-right:1%;
    padding-bottom: 1%;
}

.projectdiv h2 {
    text-align: center;
}

.projectcontents {
    display: flex;
    overflow-wrap: break-word;
    border-radius: 10px;
    align-items: center;
    gap:20px;
}

.projectcontents img  {
    border: solid black 5px;
    border-radius: 5px;
    object-fit:contain; 
    height:300px;
}

.projectcontents p {
    color: white;
    text-align: center;
}


#blue {
    background-color: #79ADDC;
}

#pink {
    background-color: #F4ACB7;

}

#purple {
    background-color: #67597A ;
}