html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #393939;
    margin: 0;
}

/* Styles & Grid design for the small devices */

.content {
    padding: 20px;
}

.content__sidebar {
    display: none;
}

.content--header {
    font-family: 'Bebas Neue', cursive;
    font-size: 35px;
    margin-top: 20px;
    display: flex;
    margin-bottom: 15px;
}

.content__name-box {
    font-family: 'Open Sans Condensed', sans-serif;
}

.name-box__name {
    font-size: 50px;
}

.name-box__name--first {
    font-weight: 700;
}

.name-box__name--last {
    font-weight: 100;
}

.dp__dp-img {
    border-radius: 50%;
    border: 5px solid #e0e0e0;
    height: 150px;
}

.content__seperator {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    margin-left: 5px;
    width: 100%;
}

.skills__main, .skills__sub {
    display: flex;
    flex-wrap: wrap;
}

.skills__sub {
    margin-top: 20px;
}

.skills__box {
    margin-right: 10px;
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 20px;
    width: max-content;
    margin-bottom: 8px;
}

.skills__sub-skill {
    margin-right: 24px;
    margin-bottom: 12px;
    display: flex;
}

.skill-name--small {
    font-size: 14px;
    margin-top: -1px;
}

.sidebar__menu-icon {
    color: #b9b9b9;
    font-size: 22px;
    cursor: pointer;
    padding: 10px;
    text-decoration: none;
    width: 32px;
    height: 32px;
    display: block;
    text-align: center;
}

.sidebar__menu-icon:hover {
    color: #fff;
}

.sidebar__menu-icon.sidebar__menu-icon--active, .sidebar__menu-icon:active {
    background: #1c1c1c;
    border-radius: 50%;
    padding: 10px;
    color: #ffce00;
}
.sub-skill-bullet {
    margin-right: 5px;
    font-size: 18px;
    color: #777;
}

.item__seperator.item__seperator--xs{
    font-size: 8px;
}

.title-area__title {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 23px;
    font-weight: 700;
    height: auto;
}

.experience__time-line-area, .education__time-line-area {
    display: flex;
    flex-direction: column;
}
.time-line-area__position {
    font-family: 'Bebas Neue', cursive;
    font-size: 18px;
    color: #0a84d1;
}
.time-line-area__position-group:first-child .time-line-area__position{
    font-size: 28px;
    text-align: right;
}
.time-line-area__position-group .time-line-area__period{
    height: 40px;
}
.time-line-area__position-group:first-child .time-line-area__period{
    height: 60px;
}
.time-line-area__position-group .time-line-area__line{
    width: 14px;
    margin-left: 14px;
    border-left: 1px solid #ccc;
}
.time-line-area__position-group:last-child .time-line-area__line{
    border-left: none;
}
.time-line-area__dot {
	width: 30px;
	text-align: center;
	font-size: 12px;
	color: #848484;
	display: flex;
	align-items: center;
	justify-content: center;
}

.achievements__node{
    display: flex;
}
.achievements__bullet {
	margin-top: 2px;
	color: #777;
}
.achievements__bullet.material-icons {
    font-size: 20px;
}
.achievements__text {
    margin-left: 10px;
    margin-bottom: 20px;
}

.sketch-footer-relax{
    height: 300px;
    background: url("../images/illustrations/relax.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
.sketch-achievements{
    height: 250px;
    background: url("../images/illustrations/achievements.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.sketch-skills{
    height: 150px;
    background: url("../images/illustrations/skills.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.sketch-exp{
    height: 200px;
    background: url("../images/illustrations/experience.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.content__footer {
    grid-area: footer;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.content__footer .footer__tech-profiles, .content__footer .footer__social {
    font-size: 25px;
    display: flex;
    height: 35px;
}
.content__footer a{
    text-decoration: none;
}
.footer__contact{
    font-size: 25px;
    display: flex;
    height: 35px;
}
.footer__icon {
    width: 50px;
    text-align: center;
    cursor: pointer;
    font-size: 25px;
    color: #526B89;
    border-radius: 20px;
}
.footer__icon:hover {
    background: #f3f3f3;
}
/* Check browser support for Grid features - and enable better layout */

@supports (display: grid) {
    .content {
        display: grid;
        gap: 20px 10px;
        grid-template-columns: 20px 1fr 20px;
        grid-template-rows: 40px repeat(15,auto) 60px;
        grid-template-areas: 
        ". home . " 
        ". dp ." 
        ". name ." 
        ". about ." 
        ". skills-head ."
        ". sk-skill ."
        ". skills ." 
        ". exp-head ." 
        ". experience ." 
        ". ach-head ." 
        ". sk-ach ."
        ". achievements ."
        ". ed-head ."
        ". education ."
        ". sk-f-r ."
        ". footer ."
        "sidebar sidebar sidebar";
        padding: 0;
    }
    .content__sidebar {
        display: block;
        width: auto;
        background: #333;
        position: sticky;
        bottom: 0;
        left: 0;
        height: 100%;
        grid-area: sidebar;        
        z-index: 1;
    }
    .content__sidebar-items {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 60px;
    }
    .content__home{
        grid-area: home;
    }
    .content__dp {
        grid-area: dp;
        justify-self: start;
    }
    .content__name-box {
        grid-area: name;
    }
    .content__about-me {
        grid-area: about;
    }
    .content__skills-header {
        grid-area: skills-head;
    }
    .content__skills {
        grid-area: skills;
    }
    .content__experience-header {
        grid-area: exp-head;
    }
    .content__experience {
        grid-area: experience;
    }
    .time-line-area__position, .time-line-area__position-group .time-line-area__period{
        display: flex;
    }
    .content__achievements-header{
        grid-area: ach-head;
    }
    .content__achievements{
        grid-area: achievements;
    }
    .content__education-header{
        grid-area: ed-head;
    }
    .content__education{
        grid-area: education;
    }
    .sketch-footer-relax{
        grid-area: sk-f-r;
    }
    .sketch-achievements{
        grid-area: sk-ach;
    }
    .sketch-skills{
        grid-area: sk-skill;
    }
    .content__footer{
        grid-area: footer;
    }
}

/* Overriding grid & styles for large devices */

@media (min-width:641px) {
    @supports (display: grid) {
        .content {
            grid-template-columns: 60px 1fr repeat(6,2fr) 1fr;
            grid-template-rows: 100px repeat(10,auto) 250px;
            grid-template-areas: 
            "sidebar . . . home home . . ." 
            "sidebar . dp dp dp name name name ." 
            "sidebar . . about about about about . ." 
            "sidebar . skills-head skills-head skills-head skills-head skills-head skills-head ." 
            "sidebar . sk-skill sk-skill skills skills skills skills ." 
            "sidebar . exp-head exp-head exp-head exp-head exp-head exp-head ." 
            "sidebar . experience experience experience experience experience experience ."
            "sidebar . ach-head ach-head ach-head ach-head ach-head ach-head ."
            "sidebar . sk-ach sk-ach achievements achievements achievements achievements ."
            "sidebar . ed-head ed-head ed-head ed-head ed-head ed-head ."
            "sidebar . education education education education education . ."
            "sidebar . sk-f-r sk-f-r sk-f-r sk-f-r sk-f-r sk-f-r ."
            "sidebar footer footer footer footer footer footer footer .";
        }
        .content__sidebar {
            top: 0;
            left: 0;            
        }
        .content__sidebar-items{
            flex-direction: column;
            height: 300px;
            justify-content: space-evenly;
            width: 100%;
        }
        .content__dp {
            justify-self: end;
        }
        .dp__dp-img {
            border-radius: 0;
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }
        .content__footer {
            grid-area: footer;
            height: 60px;
        }
        .content__experience{
            display: grid;
            grid-template-columns: 230px 4fr 2fr 1fr;
            grid-template-rows: repeat(6,auto);
            grid-gap:20px;
            grid-template-areas: 
            "timeline-first title-first title-first ."
            "timeline-first summary-first summary-first ."
            "timeline-first highlights-first highlights-first ."
            "timeline-second title-second sk-exp sk-exp"
            "timeline-second summary-second sk-exp sk-exp"
            "timeline-second highlights-second sk-exp sk-exp";
        }
        .content__education{
            display: grid;
            grid-template-columns: 230px auto;
            grid-template-rows: repeat(4,auto);
            grid-gap: 20px;
            grid-template-areas: 
            "ed-timeline-first ed-title-first"
            "ed-timeline-first ed-summary-first"
            "ed-timeline-second ed-title-second"
            "ed-timeline-second ed-summary-second";
        }
        .experience__time-line-area--first{
            grid-area: timeline-first;
        }
        .experience__title-area--first{
            grid-area: title-first;
        }
        .experience__summary-area--first{
            grid-area: summary-first;
        }
        .experience__highlights-area--first{
            grid-area: highlights-first;
        }        
        .experience__time-line-area--second{
            grid-area: timeline-second;
        }
        .experience__title-area--second{
            grid-area: title-second;
        }
        .experience__summary-area--second{
            grid-area: summary-second;
        }
        .experience__highlights-area--second{
            grid-area: highlights-second;
        }
        .time-line-area__position {
            flex-direction: row-reverse;
        }
        .time-line-area__period {
            flex-direction: row-reverse;
        }

        .education__time-line-area--first{
            grid-area: ed-timeline-first;
        }
        .education__title-area--first{
            grid-area: ed-title-first;
        }
        .education__summary-area--first{
            grid-area: ed-summary-first;
        }
        .education__time-line-area--second{
            grid-area: ed-timeline-second;
        }
        .education__title-area--second{
            grid-area: ed-title-second;
        }
        .education__summary-area--second{
            grid-area: ed-summary-second;
        }        
        .sketch-footer-relax{
            height: auto;
        }
        .sketch-achievements{
            height: auto;
        }
        .sketch-skills{
            height: auto;
        }
        .sketch-exp{
            height: auto;
            grid-area:sk-exp; 
        }
    }
}