body {
    font-family: 'Courier New', Courier, monospace;
    color:#141315;
    padding:0;

    margin-left: 3%;
    margin-right: 3%;
    margin-top: 2%;

    display: flex;
    flex-direction: column;
    
    justify-content: center;
    background: rgb(218, 166, 127);
    background: linear-gradient(90deg, rgba(218, 166, 127, 0.9) 0%, rgba(255, 148, 184, 0.9) 55%, rgba(209, 145, 255, 0.9) 100%);
}

h1 {
    font-size: xx-large;
    margin: 0;
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 0;
}
h2{
    font-size: x-large;
    margin: 0.5%;
    padding: 0;
}
h3 {
    font-size: large;
    margin: 0.5%;
    padding: 0;
}
p {
    font-family: monospace;
    font-size: large;
    font-weight: light;
}
#title {
    text-align: center;
}
img {
    border-radius: 15px;
    pointer-events: none;
}

nav {
    position: -webkit-sticky;
    position: sticky;

    top: 0;
}

nav ul {
    display: flex;
    align-items: center;

    padding: 0;
    margin: 0;

    list-style-type: none;
    
    overflow: scroll;
    background-color: #141315;
    border-radius: 15px;
}

nav ul li {
    float: left;
    border-radius: 15x;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    border-radius: 15x;
}

nav ul li a:hover {
    background-color: #F7EBEC;
    color: #ff94b8;;
    border-radius: 15x;
}

a:hover {
    color: #4b1124;
}

/* 
Color codes:
black: #141315
orange: #daa67f 
pink: #ff94b8
puple: #d191ff
 */

section {
    border-radius: 15px;
    margin: 1.5%;
    margin-bottom: 4%;
    margin-top: 1.5%;
    padding: 0;

    outline-style: solid;
    outline-color: #141315;
    outline-width: thin;

    display: flex;
    flex-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.17);
}

.butterfly {
    position: absolute;
    top: 60%;
    left: 90.5%;
    width: 9.5%;
    height: auto;
    z-index: -1;
}

.flip-butterfly {
    position: absolute;
    top: 10%;
    right: 92%;
    width: 8%;
    height: auto;
    z-index: -1;
}

/* .clover1 {
    position: absolute;
    top: 100%;
    left: 95%;
    width: 3%;
    height: auto;
    z-index: -1;
}

.clover2 {
    position: absolute;
    right: 94%;
    width: 3%;
    height: auto;
    z-index: -1;
}

.clover3 {
    position: absolute;
    top: 240%;
    left: 94%;
    width: 4%;
    height: auto;
    z-index: -1;
} */

.flip-butterfly2 {
    position: absolute;
    top: 100%;
    right: 90%;
    width: 8%;
    height: auto;
    z-index: -1;
}

.flip2 {
    position: absolute;
    left: 92%;
    width: 7%;
    height: auto;
    z-index: -1;
}

.butterfly2 {
    position: absolute;
    right: 90%;
    width: 9%;
    height: auto;
    z-index: -1;
}

#landing {
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    padding-top: 5.5%; 
    padding-bottom: 2.5%;
}

#me-pic {
    object-fit: cover;
    object-position: right;
    max-width: 300px;
    max-height: 400px;
    border-radius: 15px;

    margin-bottom: 3%;
}

#name {
    margin-left: 4%;
}

#socials {
    margin-top: 10%;
}

a {
    text-decoration: none;
    color:#141315;
}

#about {
    padding: 5%;
    border: 15px;

    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;
}

#abtme-pic {
    object-fit: contain;
    height: 300px;
    width: auto;
    border-radius: 15px;

    padding-left: 2%;
}

.about-txt { 
    width: 80%;
    height: auto;
}

.education {
    padding: 0;
    margin: 0;
    padding-top: 3%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#exp {
    padding: 3%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.exp-title {
    text-align: center;
    margin-bottom: 2%;
}

.jobz {
    background-color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.exp-tbl1 {
    width: 100%;

    border-spacing: 1em;
}

.exp-tbl1 tbody {
    font-size: large;
}

.exp-tbl1 td {
    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 5px;
    padding: 1%;
}

.edu-row1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

}

.school {
    table-layout:fixed;
    width: 93%;

    border-spacing: 5px 15px;
    border-radius: 15px;
}

.school td {
    border-radius: 10px;
    padding: 0.8%;

    font-size: 125%;
}

.school tr {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

.edu-row2 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;

    margin-top: 1.5%;
    margin-bottom: 1%;
    width: 93%;
}

.edu-row2 li {
    font-size: 100%;
}

table {
    font-family: monospace;
}

table td {
    font-size: large;
}

ul li {
    font-size: large;
    font-family: monospace;
}

#proj {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.projects {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: wrap;

    width: 100%;
}

.proj-title {
    text-align: center;
    margin: 2.5%;
}
.proj-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    flex-wrap: wrap;
    width: 100%;
}

.proj1 {
    height: 540px;
    width: 300px;

    padding: 1%;
    margin: 1%;

    display: flex;
    align-items: start;

    border-radius: 15px;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
}

button {
    height: 540px;
    width: 320px;

    padding: 5%;
    border-radius: 15px;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);

    transition-duration: 0.4s;
    cursor: pointer;
}

button:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color:#ff94b8;;
}

.gh-btn {
    height: 100px;
    width: 300px;
}

.project-link :hover {
    border: none;
    background-color: rgba(0, 0, 0, 0.1);
}

p.proj-desc {
    text-align: left;
}

footer {
    /* font-weight:thin; */
    font-size: medium;
    margin-top: 2%;
}