* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body {
    /* margin: 0;
    padding: 0;
    box-sizing: border-box; */
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;    
}

.body-dark {
    background-color: #827e7c;
}

.main-container {
    /* display: flex; */
    width: 70vw;
    margin: 0 auto;
    position: relative;
    box-shadow: 1px 2px 11px -3px #444440;
    color: #444440;
}

.main-container-dark {
    color: #D9D9D9;
}

/* header {
    
} */
.header-container {
    /* margin-bottom: 3vw; */
    /* display: flex; */
    height: 12.5vw;
    /* border-bottom: 10vw solid transparent;
    border-right: 100% solid #D9D9D9; */
    width: 100%;
    background-color: #D9D9D9;
    /* background-color: #D9D9D9; */
}

.header-container-dark {
    border-right: 70vw solid #19474a;
}
.theme-icon {
    font-size: 2vw;
    position: absolute;
    top: 1.5vw;
    left: 1.5vw;
}

.circle {
    width: 15vw;
    height: 15vw;
    /* background-image: url("cv.jpg"); */
    /* background-size: cover; */
    border-radius: 100%;
    position: absolute;
    top: 5vw;
    left: 5vw;
}

.name {
    position: absolute;
    top: 5vw;
    right: 5vw;
    text-align: right;
}

h1 {
    /* margin: 0; */
    font-size: 3vw;
}

p {
    /* margin-block-start: 0; */
    /* margin-block-end: 0; */
}

.name-content {
    /* margin: 0; */
    font-size: 1.5vw;
}

.content-container {
    margin: 5vw 5vw 0 5vw;
    font-size: 1vw;
    text-wrap: balance;
    line-height: 150%;
    border-bottom: 1px solid #444440;
    padding-bottom: 3vw;
    padding-top: 3vw;
}

.content-container-dark {
    color: #070707;
}

.basic {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-bottom: 1px solid #444440;
    padding-bottom: 3vw;
    padding-top: 3vw;
}

h2 {
    font-weight: bolder;
    margin-block-start: 0em;
}

.column {
    border-right: 1px solid #444440;
    margin-right: 3vw;
    padding-right: 3vw;
}

.content-title {
    font-size: 1.5vw;
}

.content-title-dark {
    color: #19474a;
}

.content-title-margin {
    margin-block-start: 0.83em;
}

.education-element, .experience-element {
    margin-bottom: 0.83em;
}

.education-content, .experience-content {
    font-weight: bolder;
}

.content-icon {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.icon {
    width: 1vw;
    color: #444440;
}

.link-content {
    display: inline-block;
}

.link {
    text-decoration: none;
    color: inherit;
    display: inline;
    border: 1px solid #D9D9D9;
    padding: 2px;
    border-radius: 5px;
}

.link:hover {
    background-color:#D9D9D9;
    border-radius: 5px;
    padding: 2px;
}

.link-dark {
    border: 1px solid #19474a;
}

.link-dark:hover {
    background-color: #19474a;
    color: #D9D9D9
}

footer {
    text-align: center;
    font-size: 1vw;
    line-height: 100%;
    padding-top: 3vw;
}

@media (max-width: 1280px) {
    .main-container {
        width: 100vw;
    }
    h1 {
        /* margin: 0; */
        font-size: 4vw;
    }
    .name-content {
        font-size: 2vw;
    }
    .content-container {
        font-size: 2vw;
    }
    .content-title {
        font-size: 2.5vw;
    }
    .header-container {
        border-right: 100vw solid #D9D9D9;
    }
    .header-container-dark {
        border-right: 100vw solid #19474a;
    }
    .icon {
        width: 2vw;
    }
    footer {
        font-size: 1.5vw;
    }
}