:root {
    --hex-light-emphasis: #d6d6d6;
    --hex-primary-emphasis: #ffee32;
    --hex-regular: #ffd100;
    --hex-dark: #202020;
    --hex-semidark: #333533;
    --rgb-light-emphasis: 214 214 214;
    --rgb-primary-emphasis: 255 238 50;
    --rgb-regular: 255 209 0;
    --rgb-dark: 32 32 32;
    --rgb-semidark: 51 53 51;
}

html {
    margin: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--hex-dark);
    overflow-x: hidden;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    width: 100vw;
    height: 3vw;
    background-color: rgba(var(--rgb-primary-emphasis)/ .5);
    border-bottom: .1vw solid var(--hex-primary-emphasis);
    backdrop-filter: blur(.3vw);
}

.navbar .navbar__logo--link {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar .navbar__logo--link .navbar__logo {
    margin-left: 2.5vw;
    height: 2vw;
    opacity: .7;
    transition: .3s ease;
}

.navbar .navbar__logo--link .navbar__logo:hover {
    transform: scale(1.1);
}

.navbar .navbar__logo--link .navbar__logo:active {
    transform: scale(1.05);
}

.navbar .navbar__menu {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 75%;
    height: 100%;
}

.navbar .navbar__menu a {
    color: var(--hex-dark);
    font-size: .7vw;
    text-decoration: none;
    transition: .5s ease;
}

.navbar .navbar__menu a:hover {
    transform: scale(1.3);
}

.navbar .navbar__menu a:active {
    transform: scale(1.1);
}

section {
    scroll-margin-top: 1.5vw;
}

.banner {
    position: absolute;
    top: 3vw;
    left: 0;
}

.banner .banner__bgimg {
    position: absolute;
    width: 100vw;
    height: 70vh;
    background-image: url("../storage/img/banner.jpeg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.banner .banner__bgfilter {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    width: 100vw;
    height: 70vh;
    background-image: linear-gradient(to right, rgba(var(--rgb-dark)/ .95) 30%, rgba(var(--rgb-dark)/ 0));
    backdrop-filter: saturate(0);
}

.banner .banner__bgfilter .banner__bgfilter--title {
    margin: 0 0 1vw 2.5vw;
    color: var(--hex-light-emphasis);
    font-size: 3.5vw;
    letter-spacing: .1vw;
}

.banner .banner__bgfilter .banner__bgfilter--title span {
    font-size: 4.5vw;
}

.banner .banner__bgfilter .banner__bgfilter--slogan {
    margin: 0 0 2.5vw 2.5vw;
    color: var(--hex-primary-emphasis);
    font-family: monospace;
    font-size: 1.5vw;
}

.banner .banner__bgfilter .banner__bgfilter--btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 2.5vw;
    width: 10vw;
    height: 3vw;
    color: var(--hex-dark);
    background-color: var(--hex-primary-emphasis);
    border-radius: 3vw;
    font-size: 1vw;
    text-decoration: none;
    transition: .5s ease;
}

.banner .banner__bgfilter .banner__bgfilter--btn:hover,
.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__repobtn:hover,
.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__overviewbtn:hover,
.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__websitebtn:hover,
.contacts .contacts__socialmedia .contacts__socialmedia--btn img:hover {
    transform: scale(1.1);
}

.banner .banner__bgfilter .banner__bgfilter--btn:active,
.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__repobtn:active,
.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__overviewbtn:active,
.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__websitebtn:active,
.contacts .contacts__socialmedia .contacts__socialmedia--btn img:active {
    transform: scale(1.05);
}

.aboutme {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 73vh;
    height: 70vh;
}

.aboutme .aboutme__info .aboutme__info--title,
.professional_goals .professional_goals__info .professional_goals__info--title,
.services .services__info .services__info--title,
.services .services__info ul li h2 {
    margin: 0 0 1vw 0;
    color: var(--hex-light-emphasis);
    font-size: 2.5vw;
    text-align: right;
}

.mvv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: 5vw 0 6vw;
}

.mvv .mvv__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 23vw;
    margin: auto 3vw;
}

.mvv .mvv__values {
    width: 45vw;
}

.mvv .mvv__info img {
    width: 5vw;
}

.mvv .mvv__info .mvv__info--title {
    color: var(--hex-light-emphasis);
    font-size: 2.5vw;
    text-align: center;
}

.mvv .mvv__info .mvv__info--description {
    margin: 0;
    color: rgba(var(--rgb-light-emphasis)/ .5);
    text-align: left;
}

.mvv .mvv__mission .mvv__info--description {
    font-size: 1.35vw;
}

.mvv .mvv__vision .mvv__info--description {
    font-size: 1.23vw;
}

.mvv .mvv__values .mvv__info--description {
    font-size: 1vw;
}

.aboutme .aboutme__info .aboutme__info--title span,
.skills .skills__title span,
.projects .projects__title span,
.professional_goals .professional_goals__info .professional_goals__info--title span,
.services .services__info .services__info--title span,
.mvv .mvv__info .mvv__info--title span,
.contacts .contacts__title span {
    color: var(--hex-primary-emphasis);
}

.aboutme .aboutme__info .aboutme__info--description,
.professional_goals .professional_goals__info .professional_goals__info--description,
.services .services__info .services__info--description,
.services .services__info ul li>p {
    margin: 0;
    width: 55vw;
    color: rgba(var(--rgb-light-emphasis)/ .5);
    font-size: 1.1vw;
    text-align: right;
}

.aboutme .aboutme__info .aboutme__info--description span,
.professional_goals .professional_goals__info .professional_goals__info--description span,
.services .services__info .services__info--description span,
.services .services__info ul li h2 span,
.services .services__info ul li>p span,
.mvv .mvv__info .mvv__info--description span {
    color: var(--hex-primary-emphasis);
}

.skills,
.contacts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100vw;
    height: 35vh;
    background-color: var(--hex-semidark);
}

.soft_skills {
    margin-top: 3vw;
}

.skills .skills__title,
.contacts .contacts__title {
    color: var(--hex-light-emphasis);
    font-size: 2vw;
}

.skills .skills__container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1vw;
    width: 100vw;
}

.skills .skills__container .skills__container--ability {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 7vw;
    height: 8vw;
    transition: .5s ease;
}

.skills .skills__container .skills__container--ability:hover {
    transform: scale(1.2);
}

.skills .skills__container .skills__container--ability .skills__container--ability__logo {
    height: 4vw;
}

.skills .skills__container .skills__container--ability .skills__container--ability__name {
    color: var(--hex-light-emphasis);
    font-size: 1.3vw;
}

.skills .skills__container .skills__container--ability .soft_skills__container--ability__name {
    width: 11.5vw;
    color: var(--hex-light-emphasis);
    font-size: 1vw;
    text-align: center;
}

.projects {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2.5vw;
}

.projects .projects__title {
    width: 100%;
    color: var(--hex-light-emphasis);
    font-size: 3vw;
    text-align: left;
}

.projects .projects__card {
    display: flex;
    margin-bottom: 2vw;
    width: 100%;
    background-color: var(--hex-light-emphasis);
    border-radius: 1vw;
    transition: .3s ease;
}

.projects .projects__card:hover {
    box-shadow: 0 0 1vw rgba(0, 0, 0, 0.25);
}

.projects .projects__card .projects__card--img {
    width: 47.5vw;
    height: 25vw;
    border-radius: 1vw 0 0 1vw;
    object-fit: cover;
    object-position: left;
    aspect-ratio: 2 / 1;
}

.projects .projects__card .projects__card--infocontainer {
    width: 50%;
    padding: 1vw 2.5vw;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__header .projects__card--infocontainer__title {
    color: var(--hex-dark);
    font-size: 2vw;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__technologies {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__technologies img {
    margin: 0 .3vw;
    height: 2.5vw;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__description {
    color: var(--hex-dark);
    font-size: 1vw;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns {
    margin-top: 4vw;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__repobtn {
    display: inline-block;
    margin-right: 1vw;
    padding: .5vw 1vw;
    color: var(--hex-light-emphasis);
    background-color: var(--hex-dark);
    border-radius: 2vw;
    font-size: 1vw;
    text-decoration: none;
    transition: .3s ease;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__overviewbtn {
    display: inline-block;
    padding: .5vw 1vw;
    color: var(--hex-dark);
    background-color: rgba(0, 0, 0, 0);
    border: .1vw solid var(--hex-dark);
    border-radius: 2vw;
    font-size: 1vw;
    text-decoration: none;
    transition: .3s ease;
}

.projects .projects__card .projects__card--infocontainer .projects__card--infocontainer__btns .projects__card--infocontainer__websitebtn {
    display: inline-block;
    padding: .5vw 1vw;
    color: var(--hex-dark);
    background-color: var(--hex-primary-emphasis);
    border-radius: 2vw;
    font-size: 1vw;
    text-decoration: none;
    transition: .3s ease;
}

.professional_goals,
.services {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: 0 3.3vw 5vw;
    height: 50vh;
}

.professional_goals img,
.services img {
    width: 25vw;
}

.services {
    padding-top: 5vw;
    height: 80vh;
    background-color: var(--hex-semidark);
}

.services .services__info .services__info--title,
.services .services__info .services__info--description,
.services .services__info ul li h2,
.services .services__info ul li>p {
    text-align: left;
}

.services .services__info .services__info--description,
.services .services__info ul li>p {
    width: 65vw;
}

.services .services__info ul {
    list-style-type: none;
    margin-top: 3vw;
    padding-left: 2.5vw;
}

.services .services__info ul li {
    position: relative;
    margin-bottom: 1.8vw;
}

.services .services__info ul li::before {
    content: '';
    position: absolute;
    left: -2.5vw;
    top: 50%;
    transform: translateY(-50%);
    width: .5vw;
    height: .5vw;
    background-color: var(--hex-primary-emphasis);
}

.services .services__info ul li h2 {
    font-size: 1.6vw;
}

.contacts {
    margin: 0;
    padding: 1vw 1vw 2.5vw 1vw;
}

.contacts .contacts__info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.contacts .contacts__info .contacts__info--container {
    display: flex;
    align-items: center;
}

.contacts .contacts__info .contacts__info--container .contacts__info--img {
    margin-right: .5vw;
    height: 2vw;
}

.contacts .contacts__info .contacts__info--container .contacts__info--description {
    color: var(--hex-light-emphasis);
    font-size: 1vw;
}

.contacts .contacts__socialmedia {
    margin-top: 1.5vw;
}

.contacts .contacts__socialmedia .contacts__socialmedia--btn img {
    margin: 1vw;
    height: 3vw;
    width: 9vw;
    border-radius: 3vw;
    aspect-ratio: 3 / 1;
    object-fit: contain;
    transition: .3s ease;
}

.contacts .contacts__socialmedia .--github img {
    background-color: #000000;
}

.contacts .contacts__socialmedia .--linkedin img {
    background-color: #0A66C3;
}