/* ^^^ Сброс стилей*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    -webkit-tap-highlight-color: rgba(255, 205, 147, 0.1);
}

ul, ol {
    list-style: none;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  } 
}
/* Сброс стилей $$$ */



/* ^^^ Глобальные стили */
:root {
    --main-layout-color-dark: rgb(97, 102, 111);
    --main-layout-color-light: rgb(116, 124, 135);
    --main-layout-color-cards: rgb(197, 214, 222);
    --main-layout-color-cards-accent: rgb(187, 197, 209);
    --bg-color: rgb(214, 225, 230);
    --text-color-default: rgb(237, 237, 237);  
    --text-color-accent: rgb(51, 131, 201);
    --text-color-light-on-dark: rgb(124, 182, 233);
    --text-color-dark-on-light: rgb(14, 50, 93);
}

body {
    font-family: 'Jost', 'Segoe UI', 'Arial';
    background-color: var(--bg-color);
    color: var(--text-color-default);
    overflow-x: hidden;
}

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

section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    scroll-margin-top: 80px;
    padding: 20px 0;
}

a {
    text-decoration: none;
    color: currentColor;
}
/* Глобальные стили $$$*/



/* ^^^ header */
#navbar {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 5vw;
    min-height: 60px;
    max-height: 80px;
    background: linear-gradient(
        60deg,
        var(--main-layout-color-dark),
        var(--main-layout-color-light),
        var(--main-layout-color-dark)
    );
    box-shadow: 0 0 20px 0 var(--main-layout-color-dark);
    z-index: 99;
    user-select: none;
}

#navbar li {
    display: inline-block;
    padding: 20px 2vw;
    font-size: max(1.8vw, 20px);
}

#navbar a {
    text-decoration: none;
    transition: all 0.1s ease-out;
}

#navbar li a:hover {
    color: var(--text-color-light-on-dark);
}


/* header $$$ */


/* ^^^ Welcome section*/
#welcome-section {
    height: 100vh;
    width: 100vw;
    background: linear-gradient(
    60deg,
    var(--main-layout-color-dark),
    var(--main-layout-color-light)
    );  
    box-shadow: 0 0 40px 0 var(--main-layout-color-dark), inset 0 0 20px 0 var(--main-layout-color-dark);
    font-size: min( 3vw, 3vh);
    font-family: 'Roboto Mono';
    user-select: none;
}

#welcome-section:first-child {
    margin-top: 20px;
}

.parallax-div {
    margin: min(3vw, 30px);
    text-shadow: 0 0 5px var(--main-layout-color-dark);
    z-index: 1;
}

#parallax-name {
    color: var(--text-color-accent);
}

#welcome-section-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(./src/assets/welcome-section-bg-jpg.jpg);
    opacity: 0.5;
}
/* Welcome section $$$ */



/* ^^^ Projects section */
#project-section {
    flex-direction: row;
    flex-wrap: wrap;
    gap: max(5vw, 5vh, 20px);
    width: 90%;
    padding-top: 5%;
    color: var(--text-color-dark-on-light);
}

.project-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: max(250px, 20vw);
    height: max(458px, calc(200px + max(22vw, 30vh)));
    padding: 5%;
    background: var(--main-layout-color-cards);
    border-radius: 30px;
    box-shadow: 0 0 10px var(--main-layout-color-dark);
    transition: all 0.1s linear;
}

.project-card:hover {
    box-shadow: 0 0 20px 0 var(--main-layout-color-dark);
}

.project-card__img {
    width: 90%;
    margin: 3% 3% 1% 3%;
    object-fit: contain;
    border-radius: 20px;
}

.project-card__name {
    margin-bottom: 1%;
    font-size: max(1.4vw, 1.2rem);
    color: var(--text-color-accent);
    text-align: center;
}

.project-card__line {
    width: 80%;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    margin: 1%;
}

.project-card__description {
    text-align: center;
    font-size: max(1vw, 1rem);
}

/* Projects section $$$ */



/* ^^^ Profile section */
#profile-section {
    width: 80%;
    margin-top: 10vh;
    text-align: center;
    color: var(--text-color-dark-on-light);
}



#resume-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px;
}

#resume-button {
    height: max(36px, 6vh);
    width: max(160px, 12vw);
    border-radius: 15px;
    border: none;
    font-size: 90%;
    color: var(--text-color-dark-on-light);
    background-color: var(--main-layout-color-cards);
    transition: background-color .3s;
    cursor: pointer;
}

#resume-button:hover {
    background-color: var(--main-layout-color-cards-accent);
}

#me-and-hardskills-icons-container {
    display: flex;
    align-items: center;
    gap: 3vw;
    user-select: none;
}

#profile-photo {
    height: 15vw;
    width: 15vw;
    border-radius: 50%;
}

.hardskills-icons {
    height: 5vw;
    width: 5vw;
}



#hardskills-description-container {
    width: 60%;
    text-align: left;
}

@media screen and (max-width: 842px) {
    #hardskills-description-container {
        width: 80%;
        text-align: center;
    }
}

.hardskills-description__text-box {
    margin: max(3vw, 20px) auto;
}

.hardskills-description__skillname {
    color: var(--text-color-accent);
}



#instruments-container {
    width: 80%;
    margin: 3vh 0;
    display: flex;
    flex-wrap: wrap;
    gap: min(2vw, 15px);
    justify-content: center;
    user-select: none;
}

.instruments__cell {
    padding: 5px 10px;
    background-color: var(--main-layout-color-cards);
    border-radius: 20px;
    transition: background-color .3s;
}

.instruments__cell:hover {
    background-color: var(--main-layout-color-cards-accent);
}



#knowledge-sources-container {
    margin: 1vh 0;
}

#knowledge-sources__list li {
    margin: 5px 0;
}

#knowledge-sources__list a{
    transition: text-shadow .1s;
}

#knowledge-sources__list a:hover{
    text-shadow: 0px 0px 1px var(--text-color-light-on-dark);
}



#more-about-me-container details{
    margin: 1vh 0;
}

#more-about-me-container summary {
   display: inline-block;
   background-color: var(--main-layout-color-cards);
   border-radius: 12px;
   padding: 3px 8px;
   margin: 5px;
   cursor: pointer;
   animation: widering-coloring-reverse .5s;
   transition: background-color .5s;
   user-select: none;
}

@keyframes widering-coloring-reverse {
    0% {padding: 3px 15vw; background-color: var(--main-layout-color-cards-accent);}
    100% {padding: 3px 8px;}
}

#more-about-me-container summary:hover {
    background-color: var(--main-layout-color-cards-accent);
}

#more-about-me-container summary::before {  
  content: "";
  display: inline-block;
  background: url(./src/assets/details-marker.png);
  /* Было бы отлично сделать свой SVG, который будет перенимать цвет текста */
  background-size: 1em;
  width: 1em; 
  height: 1em;
  margin: 0 5px;
  transition: all .5s;
}

#more-about-me-container details[open] > summary {
    display: inline-block;
    place-self: center;
    width: fit-content;
    animation: widering-coloring .5s ease forwards;
}

@keyframes widering-coloring {
    0% {padding: 3px 8px;}
    100% {padding: 3px 15vw; background-color: var(--main-layout-color-cards-accent);}
}

#more-about-me-container details[open] summary ~ * {
    animation: smooth-appearance 0.5s ease-in-out;
}

@keyframes smooth-appearance {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#more-about-me-container details[open] > summary::before {
    transform: rotate(90deg);
}

#more-about-me-container details[open] > p {
    text-align: left;
}



#background-and-goals{
    display: inline-block;
    width: 80vw;
}

#background-and-goals p{
    margin: 0.8em;
    text-align: left;
}

#background-and-goals img{
    display: inline-block;
    max-width: calc(16vw * 4.2);
    max-height: calc(9vh * 4.2);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--main-layout-color-dark);
}

#background-and-goals__img-tv {
    float: right;
    margin: 1em 1em 1em max(20px, 2vw);
}

#background-and-goals__img-dev {
    float: left;
    margin: 1em max(20px, 2vw) 1em 1em;
    filter: brightness(1.2) contrast(0.8);
}

@media screen and (max-width: 1024px) {
    #background-and-goals img{
        float: none;
    }
}



#education-and-courses {
    display: flex;
    flex-direction: row;
    gap: 3vw;
}

.education-and-courses__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: max(300px, 18vw);
    height: 476px;
    padding: 2%;
    background: var(--main-layout-color-cards);
    border-radius: 30px;
}

.education-and-courses__cell img {
    width: 90%;
    margin: 3%;
    object-fit: contain;
    border-radius: 20px;
}

@media screen and (max-width: 1024px) {
    #education-and-courses {
        flex-direction: column;
    }

    .education-and-courses__cell {
        height: fit-content;
    }
}



#work-expirience {
    margin: 3vh 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vh;
    align-items: start;
    text-align: left;
}

#work-expirience p:nth-child(odd) {
    text-align: right;
}

@media screen and (max-width: 648px) {
    #work-expirience {
        font-size: 0.75em;
    }
}



#icons-div {
    user-select: none;
}

#icons-div a img{
    width: 32px;
    margin: max(10px, 1vw);
    transition: 0.2s;
}

#icons-div a img:hover {
    transform: scale(1.2);
}

#icons-div a img[alt="FreeCodeCamp"] {
    transform: scale(1.25);
}

#icons-div a img[alt="FreeCodeCamp"]:hover {
    transform: scale(1.45);
}
/* Profile section $$$ */

/* ^^^ footer */
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40vw;
    height: 3vh;
    margin-top: 3%;
    background: linear-gradient(
        60deg,
        var(--main-layout-color-light),
        var(--main-layout-color-dark),
        var(--main-layout-color-light)
    );
    box-shadow: 0 0 10px 0 var(--main-layout-color-dark);
    color: var(--text-color-light-on-dark);
}

footer p {
    font-size: 0.8rem;
}
/* footer $$$ */