* {
    box-sizing: border-box;
    font-family: 'Nunito';
    margin: 0;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #d2c0aa;
}

::-webkit-scrollbar-thumb {
    background: #4c5d78;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334455;
}

html {
    scroll-padding-top: 12vh;
}

body {
    background-color: #faf8f2;
    scroll-behavior: smooth;
}

header {
    align-items: center;
    background-color: #d2c0aa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    height: 10vh;
    justify-content: center;
    position: sticky;
    top: 0;
}

.headerTitleBox {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 30%;
}

.headerTitle {
    color: #334455;
    text-align: center;
}

nav {
    align-items: center;
    background-color: #bda27e;
    border-radius: 20px 0 0 20px;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 0 2%;
    width: 70%;
}

a {
    text-decoration: none;
    color: inherit;
}

.navText {
    color: #334455;
    text-align: center;
}

.navText2 {
    color: #4c5d78;
    text-align: center;
}

.navText:hover, .navText2:hover {
    text-decoration: underline;
}

article {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 95vh;
}

.header {
    color: #334455;
}

.header2 {
    color: #4c5d78;
}

.sectionArticle2 {
    background-color: #e7e0ce;
    box-shadow:
            0 8px 8px rgba(240, 236, 224, 0.8),
            0 -8px 8px rgba(240, 236, 224, 0.8);
}

.contentDiv {
    align-items: center;
    background-color: #f8f6f0;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(200, 198, 192, 0.75);
    color: #334455;
    display: flex;
    flex-direction: column;
    height: 90%;
    justify-content: space-evenly;
    width: 90%;
}

.contentContainer {
    align-items: center;
    display: flex;
    height: 80%;
    justify-content: space-evenly;
    width: 100%;
}

.contentDiv2 {
    align-items: center;
    background-color: #e5decc;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(170, 168, 162, 0.75);
    color: #4c5d78;
    display: flex;
    flex-direction: column;
    height: 90%;
    justify-content: space-evenly;
    width: 90%;
}

#aboutContent {
    justify-content: space-evenly;
}

.picFrame {
    align-items: center;
    border-radius: 30px;
    box-shadow: 0px 0px 20px rgba(25, 81, 117, 0.2);
    display: flex;
    height: 80%;
    justify-content: center;
    width: 25%;
}

.ppPic {
    border-radius: 15%;
}

.aboutFrame {
    align-items: center;
    border-radius: 20px;
    box-shadow: 0px 0px 20px rgba(25, 81, 117, 0.2);
    display: flex;
    flex-direction: column;
    height: 50%;
    justify-content: space-around;
    padding: 0.5% 4%;
    width: 55%;
}

.contentTitle {
    text-decoration: underline;
}

.aboutText {
    font-size: larger;
    text-align: center;
}

#courseContent {
    justify-content: space-evenly;
}

.courseFrame {
    align-items: center;
    background: #ded9c7;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(170, 168, 162, 0.75);
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: space-evenly;
    padding: 0.5% 0;
    text-align: center;
    width: 45%;
}

.courseFrame h3 {
    font-size:  x-large;
    text-decoration: underline;
}

.coursePic {
    width: 40%;
    height: 50%;
    border-radius: 7px;
}

.diplomaText {
    font-size: x-large;
    font-weight: 550;
    text-align: center;
}

.dimplomaText2 {
    font-size: larger;
    font-weight: 550;
    text-align: center;
}

.date {
    font-size: large;
    font-weight: 450;
}

#projectContent {
    justify-content: space-evenly;
}

.projectFrame {
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(170, 168, 162, 0.75);
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: space-evenly;
    padding: 0.5% 0;
    text-align: center;
    width: 30%;
}

.projectFrame h3 {
    font-weight: 550;
    font-size: x-large;
}

.projectFrame h3:hover {
    text-decoration: underline;
}

#interestContent {
    justify-content: space-evenly;
}

.interestPic {
    width: 60%;
    height: 70%;
    border-radius: 7px;
}

.interestFrame {
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(170, 168, 162, 0.75);
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: space-around;
    padding: 0.5% 0;
    width: 50%;
}

.interestFrame h2:hover, .interestFrame p:hover {
    text-decoration: underline;
}

#skillsContent {
    justify-content: space-evenly;
}

#skillsContainer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
}

.skillsFrame {
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(170, 168, 162, 0.75);
    display: flex;
    flex-direction: column;
    height: 20%;
    justify-content: space-around;
    padding: 0.5% 0;
    text-align: center;
    width: 30%;
}

.skillsFrame h3 {
    font-size: larger;
    font-weight: 650;
}

.skillsFrame h3:hover {
    text-decoration: underline;
}

h4 {
    color: #4c5d78;
    font-weight: 550;
}

#cvContent {
    justify-content: space-evenly;
}

.cvTextFrame {
    align-items: center;
    background: #ded9c7;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(170, 168, 162, 0.75);
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: space-around;
    padding: 0.5% 0;
    width: 35%;
}

.cvFrame {
    align-items: center;
    background: #ded9c7;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(170, 168, 162, 0.75);
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: space-evenly;
    padding: 0.5% 0;
    text-align: center;
    width: 40%;
}

.downloadLink {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 2% 3%;
}

button {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer;
    font-size: medium;
    font-weight: 750;
}

.contactFrame {
    align-items: center;
    border-radius: 20px;
    box-shadow: 0px 0px 20px rgba(25, 81, 117, 0.2);
    display: flex;
    flex-direction: column;
    height: 85%;
    justify-content: space-evenly;
    padding: 2.5% 0;
    width: 40%;
}

.contactLines {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 80%;

}

.contactLine {
    align-items: center;
    display: flex;
    font-size: larger;
    justify-content: space-evenly;
    width: 60%;
}

#phoneLine {
    width: 45%;
}