/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/*===== VARIABLES CSS =====*/
:root {
    --header-height: 3rem;
    --font-semi: 600;
}

/*===== Colores =====*/
:root {
    --first-color: #4f81f3;
    --second-color: #ffffff;
    --third-color: #ffffff;
}

/*===== Fuente y tipografia =====*/
:root {
    --body-font: 'Poppins', sans-serif;
    --big-font-size: 2rem;
    --super-big-font-size: 5rem;
    --h2-font-size: 1.25rem;
    --normal-font-size: 0.938rem;
}

@media screen and (min-width: 768px) {
    :root {
        --big-font-size: 3.5rem;
        --h2-font-size: 2rem;
        --normal-font-size: 1rem;
    }
}

/*===== Margenes =====*/
:root {
    --mb-1: 0.5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;
    --mb-6: 3rem;
}

/*===== z index =====*/
:root {
    --z-back: -10;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-fixed: 100;
}

/*===== BASE =====*/
*,
::before,
::after {
    box-sizing: content-box;
}

html {
    scroll-behavior: smooth;
}


body {
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    color: #fff;
    background-color: #010101;
}

h1,
h2,
p {

    font-size: 100%;
    margin: 0;
}

p {
    opacity: 56%;
    font-weight: 500;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

iframe {
    max-width: 100%;
    display: block;
    height: auto;
}


textarea {
    font-family: var(--body-font);
    resize: none;
}

::selection{
    background-color: var(--third-color);
    color: black;
    opacity: 100;
}

/*==== COSTUM SCROLL BAR  ====*/
body::-webkit-scrollbar {
    width: 5px;               /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
    background: black;        /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.247);    /* color of the scroll thumb */
  }

  /*==== SCROLL TOP =====*/
.scrolltop{
    position: fixed;
    right: 1rem;
    bottom: -20%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .1rem;
    background: var(--third-color);
    border-radius: .4rem;
    z-index: var(--z-fixed);
    transition: .4s;
    visibility: hidden;
}

.scrolltop:hover {
    background-color: rgba(255, 255, 255, 0.767);
}

.scrolltop__icon{
    font-size: 1.8rem;
    color: black;
}

.show-scroll{
    visibility: visible;
    bottom: 1.5rem;
}

/*===== CLASS CSS ===== */
.section-title {
    position: relative;
    font-size: var(--h2-font-size);
    color: var(--third-color);
    margin-top: var(--mb-2);
    margin-bottom: var(--mb-4);
    text-align: center;
}

.section-title::after {
    position: absolute;
    content: "";
    width: 64px;
    height: 0.18rem;
    left: 0;
    right: 0;
    margin: auto;
    top: 2rem;
    background-color: var(--first-color);
}

.section {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/*===== CHANCE THE BACKGROUND HEADER  =====*/
.scroll-header{
      backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(212, 212, 212, 0.089);
}

/*===== LAYOUT =====*/
.bd-grid {
    max-width: 1024px;
    display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 2rem;
    width: calc(100% - 2rem);
    margin-left: var(--mb-2);
    margin-right: var(--mb-2);
    row-gap: 2rem;
}

.l-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: rgba(0, 0, 0, 0.747);
}

/*===== NAV =====*/
.nav {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-semi);
}




@media (max-width: 768px) and (min-width:576px) {
    .nav__menu {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 80%;
        height: 100vh;
        padding: 2rem;
        background-color: var(--third-color);
        transition: .5s;
    }

    .nav__link {
        position: relative;
        color: #0E2431 !important;
    }



    .work__container {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 2rem;
    }

    .bg-2 {
        height: 100% !important;
    }

    /* ===== CONTACT =====*/

    .skills__container img {
        display: none !important;
    }

    /* ===== CONTACT =====*/

    .contact__container {
        display: grid !important;
        grid-gap: 23px !important;
    }
}


.nav__item {
    margin-bottom: var(--mb-4);
}


.nav__link {
    position: relative;
    color: #fff ;
}

.nav__link:hover {
    position: relative;
}

.nav__link:hover::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0.18rem;
    left: 0;
    top: 2rem;
    background-color: var(--third-color);
    animation: underline .5s ease-out;
}


@keyframes underline{
    0%{
        width: 0;
    }

    100%{
        width: 100%;
    }
}

.nav__logo {
    color: var(--third-color);
}

.nav__toggle {
    color: var(--third-color);
    font-size: 1.5rem;
    cursor: pointer;
}

/*Active menu*/
.active::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0.18rem;
    left: 0;
    top: 2rem;
    background-color: var(--third-color);
    animation: underline .5s ease-out;
}

/*=== Show menu ===*/
.show {
    right: 0;
}

/*===== HOME =====*/
.home {
    height: calc(100vh - 3rem);
    row-gap: 1rem;
    text-align: center;
    margin-top: var(--mb-3);
}

.home__data {
    align-self: center;
}

.home p{
    text-transform:capitalize;
}



.home__title {
    font-size: var(--super-big-font-size);
    margin-bottom: var(--mb-5);
}

.home__title-color {
    background: linear-gradient(285.44deg, #D525E3 8.3%, #4474E4 86.39%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bg 4s ease-out;
}

@keyframes bg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}

.home__social {
    padding: 21px;
    flex-direction: row;
    justify-content: space-around;
    display: inline-flex;
}

.home p {
    margin-bottom: var(--mb-4);
    width: 500px;
    margin: 0 auto;
    opacity: 55%;
}

.home__social-icon {
    width: max-content;
    margin-bottom: var(--mb-2);
    font-size: 1.5rem;
    color: var(--third-color);
}

.home__social-icon:hover {
    color: var(--first-color);
}



/*BUTTONS*/
.button {
    display: inline-block;
    background-color: var(--first-color);
    color: #fff;
    padding: .75rem 2.5rem;
    font-weight: var(--font-semi);
    border-radius: .5rem;
    margin-left: 12px;
}

.costum__button {
    margin-top: 20px;
    display: inline-block;
    border: 3px solid var(--first-color);
    color: var(--third-color);
    padding: .55rem 2.5rem;
    font-weight: var(--font-semi);
    border-radius: .5rem;
    margin-left: 12px;
}

.costum__button:hover {
    background-color: var(--first-color);
}

.button:hover {
    background-color: #4474E4;
}

/* ===== ABOUT =====*/
.about{
    margin-top: 5rem;
}

.about__container {
    row-gap: 2rem;
    text-align: center;
}

.about__social__media a {
    font-size: 20px;
    color: #000;
    padding-top: var(--mb-2);
}


.about__subtitle {

    margin-bottom: var(--mb-2);
}

.about a{
    color: var(--third-color);
    text-decoration: underline;
}

.about__img {
    justify-self: center;
}


.about__img img {
    
    width: 500px;
    border-radius: 1.5rem;
}
/* ===== Work ===== */
.timeline {
    position: relative;
    width: 660px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 1em 0;
    list-style-type: none;
  }
  
  .timeline:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background: rgb(80,80,80);
    background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    
    z-index: 5;
  }
  
  .timeline li {
    padding: 1em 0;
  }
  
  .timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
  .direction-l {
    position: relative;
    width: 300px;
    float: left;
    text-align: right;
  }
  
  .direction-r {
    position: relative;
    width: 300px;
    float: right;
  }
  
  .flag-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .flag {
    position: relative;
    display: inline;
    background: rgb(0, 0, 0);
    padding: 6px 10px;
    border-radius: 5px;
    
    font-weight: 600;
    text-align: left;
  }
  
  .direction-l .flag {
    -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  }
  
  .direction-r .flag {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  }
  
  .direction-l .flag:before,
  .direction-r .flag:before {
    position: absolute;
    top: 50%;
    right: -40px;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid #4474E4;
    z-index: 10;
  }
  
  .direction-r .flag:before {
    left: -40px;
  }
  
  .direction-l .flag:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: rgb(248,248,248);
    border-width: 8px;
    pointer-events: none;
  }
  
  .direction-r .flag:after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: rgb(248,248,248);
    border-width: 8px;
    pointer-events: none;
  }
  
  .time-wrapper {
    display: inline;
    
    line-height: 1em;
    font-size: 0.66666em;
    color: #4474E4;
    vertical-align: middle;
  }
  
  /* .direction-l .time-wrapper {
    float: left;
  }
  
  .direction-r .time-wrapper {
    float: right;
  } */
  
  .time {
    display: inline-block;
    padding: 4px 6px;
    background: rgb(248,248,248);
  }
  
  .desc {
    margin: 1em 0.75em 0 0;
    
    font-size: 0.77777em;
    font-style: italic;
    line-height: 1.5em;
  }
  
  .direction-r .desc {
    margin: 1em 0 0 0.75em;
  }
  
  /* ================ Timeline Media Queries ================ */
  
  @media screen and (max-width: 660px) {
  
  .timeline {
       width: 100%;
      padding: 4em 0 1em 0;
  }
  
  .timeline li {
      padding: 2em 0;
  }
  
  .direction-l,
  .direction-r {
      float: none;
      width: 100%;
  
      text-align: center;
  }
  
  .flag-wrapper {
      text-align: center;
  }
  
  .flag {
      background: rgb(57, 56, 56);
      z-index: 15;
  }
  
  .direction-l .flag:before,
  .direction-r .flag:before {
    position: absolute;
    top: -30px;
      left: 50%;
      content: ' ';
      display: block;
      width: 12px;
      height: 12px;
      margin-left: -9px;
      background: rgb(80,80,80);
      border-radius: 10px;
      border: 4px solid rgb(255,80,80);
      z-index: 10;
  }
  
  .direction-l .flag:after,
  .direction-r .flag:after {
      content: "";
      position: absolute;
      left: 50%;
      top: -8px;
      height: 0;
      width: 0;
      margin-left: -8px;
      border: solid transparent;
      border-bottom-color: rgb(255,255,255);
      border-width: 8px;
      pointer-events: none;
  }
  
  .time-wrapper {
      display: block;
      position: relative;
      margin: 4px 0 0 0;
      z-index: 14;
  }
  
  .direction-l .time-wrapper {
      float: none;
  }
  
  .direction-r .time-wrapper {
      float: none;
  }
  
  .desc {
      position: relative;
      margin: 1em 0 0 0;
      padding: 1em;
      background: rgb(0, 0, 0);
      -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
      -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
      box-shadow: 0 0 1px rgba(0,0,0,0.20);
      
    z-index: 15;
  }
  
  .direction-l .desc,
  .direction-r .desc {
      position: relative;
      margin: 1em 1em 0 1em;
      padding: 1em;
      
    z-index: 15;
  }
  
  }
  
  @media screen and (min-width: 400px ?? max-width: 660px) {
  
  .direction-l .desc,
  .direction-r .desc {
      margin: 1em 4em 0 4em;
  }
  
  }
/* ===== SKILLS =====*/

.skills{
    margin-top: 5rem;
}

.skills__container {
    row-gap: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
}


.html {
    color: #ff6262 !important;
}

.css {
    color: #2196F3 !important;
}

.js {
    color: #E4BA41 !important;
}

.ux {
    color: #fff !important;
}

.swift{
    color: #ff6262 !important;
}


.skills__subtitle {
    margin-bottom: var(--mb-2);
}

.skills__text {
    text-transform: capitalize;
    margin-bottom: var(--mb-4);
}

.skills__data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-weight: var(--font-semi);
    padding: .5rem 1rem;
    margin-bottom: var(--mb-4);
    border-radius: .5rem;
    box-shadow: 0 4px 25px rgba(14, 36, 49, .15);
}

.skills__icon {
    font-size: 2rem;
    margin-right: var(--mb-2);
    color: var(--first-color);
}

.skills__names {
    display: flex;
    align-items: center;
}

.skills__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--first-color);
    height: .25rem;
    border-radius: .5rem;
    z-index: var(--z-back);
}

.skills__html {
    width: 95%;
}

.skills__css {
    width: 85%;
}

.skills__js {
    width: 50%;
}

.skills__ux {
    width: 50%;
}

.skills__swift {
    width: 30%;
}

.skills__container img{
    width: 500px;
    border-radius: .5rem;
}


/* ===== WORK =====*/
.hover {
	width: 620px;
	height: 400px;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .5)
}

#infografik {
	width: 800px;
	margin: 0 auto;
	padding: 0 0 0 89px
}

#infografik h1 {
	padding: 0 0 40px 171px
}

#infografik .leftside {
	width: 164px;
	float: left
}

#infografik .leftside .gehirncoding,
#infografik .leftside .gehirndesign,
#infografik .leftside .gehirnspiele {
	width: 140px;
	padding: 7px 12px;
	margin: 0;
	background: url('./assets/image/gehirn_links_hover.png') no-repeat 0 500px
}

#infografik .leftside .gehirndesign.aktivkat {
	background-position: 0 0
}

#infografik .leftside .gehirncoding.aktivkat {
	background-position: 0 -191px
}

#infografik .leftside .gehirnspiele.aktivkat {
	background-position: 0 -337px
}

#infografik .leftside table {
	width: 100%
}

#infografik .leftside table th {
	line-height: 22px;
	/* text-align: right; */
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: default
}

#infografik .leftside table td {
	line-height: 22px;
	/* text-align: right; */
	cursor: default
}

#infografik .leftside table td.aktivtd {
	font-weight: 700;
	color: #3e3d3b
}

#infografik .rightside {
	width: 502px;
	height: 401px;
	overflow: hidden;
	margin: 20px 0 0 0;
	position: relative;
	float: right;
	background: url('./assets/image/gehirn_sprite.png') no-repeat
}

#infografik .rightside.ae,
#infografik .rightside.ai,
#infografik .rightside.desi,
#infografik .rightside.fla,
#infografik .rightside.fw,
#infografik .rightside.ind,
#infografik .rightside.pp,
#infografik .rightside.ps {
	background-position: 0 -802px
}

#infografik .rightside.actsc,
#infografik .rightside.cod,
#infografik .rightside.cs,
#infografik .rightside.ht,
#infografik .rightside.jas,
#infografik .rightside.php {
	background-position: 0 -401px
}

#infografik .rightside.nds,
#infografik .rightside.playst,
#infografik .rightside.snes,
#infografik .rightside.sonst,
#infografik .rightside.spi,
#infografik .rightside.wii {
	background-position: 0 -1203px
}

#maphover {
	position: absolute;
	top: 0;
	left: 0;
	background: url('./assets/image/gehirn_hover.png') no-repeat
}

#maphover.ps {
	left: 86px;
	top: 0;
	width: 329px;
	height: 210px;
	background-position: 0 0
}

#maphover.ai {
	left: 111px;
	top: 142px;
	width: 243px;
	height: 178px;
	background-position: 0 -210px
}

#maphover.ind {
	left: 243px;
	top: 45px;
	width: 260px;
	height: 183px;
	background-position: 0 -388px
}

#maphover.fla {
	left: 396px;
	top: 141px;
	width: 101px;
	height: 119px;
	background-position: 0 -571px
}

#maphover.fw {
	left: 275px;
	top: 199px;
	width: 138px;
	height: 72px;
	background-position: -191px -571px
}

#maphover.pp {
	left: 280px;
	top: 161px;
	width: 126px;
	height: 70px;
	background-position: 0 -690px
}

#maphover.ae {
	left: 349px;
	top: 104px;
	width: 115px;
	height: 80px;
	background-position: -214px -690px
}

#maphover.ht {
	left: 44px;
	top: 55px;
	width: 124px;
	height: 182px;
	background-position: 0 -906px
}

#maphover.cs {
	left: 28px;
	top: 130px;
	width: 103px;
	height: 120px;
	background-position: -226px -906px
}

#maphover.jas {
	left: 1px;
	top: 123px;
	width: 119px;
	height: 140px;
	background-position: 0 -1088px
}

#maphover.php {
	left: 11px;
	top: 45px;
	width: 114px;
	height: 125px;
	background-position: -214px -1088px
}

#maphover.actsc {
	left: 8px;
	top: 45px;
	width: 85px;
	height: 86px;
	background-position: -131px -906px
}

#maphover.snes {
	left: 271px;
	top: 245px;
	width: 182px;
	height: 70px;
	background-position: 0 -770px
}

#maphover.wii {
	left: 324px;
	top: 256px;
	width: 132px;
	height: 77px;
	background-position: -197px -770px
}

#maphover.nds {
	left: 317px;
	top: 311px;
	width: 122px;
	height: 45px;
	background-position: 0 -847px
}

#maphover.playst {
	left: 301px;
	top: 311px;
	width: 115px;
	height: 53px;
	background-position: -214px -847px
}

#maphover.sonst {
	left: 276px;
	top: 303px;
	width: 69px;
	height: 59px;
	background-position: -133px -847px
}

#infografik .rightside .map {
	position: absolute;
	top: 0;
	left: 0;
	width: 502px;
	height: 401px
}

.tooltip {
	position: absolute;
	padding: 0 10px;
	min-width: 80px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-o-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-ie-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ie-border-radius: 3px;
	border-radius: 3px;
	line-height: 26px;
	text-align: center;
	background: #fff;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #000000));
	background-image: -moz-linear-gradient(center bottom, #e6e6e6 0, #fff 100%)
}

.tooltip:before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	margin: 0 0 0 -5px;
	width: 10px;
	height: 6px;
	background: url('./assets/image/tooltip_spitze.png') no-repeat
}

.copytext {
	padding: 20px 0 0 0;
	text-align: right;
	font-size: 10px
}

#infografik {
	width: 800px;
	margin: 0 auto;
	padding: 0 0 0 89px
}

#infografik h1 {
	padding: 0 0 40px 171px
}

#infografik .leftside {
	width: 164px;
	float: left
}

#infografik .leftside .gehirncoding,
#infografik .leftside .gehirndesign,
#infografik .leftside .gehirnspiele {
	width: 140px;
	padding: 7px 12px;
	margin: 0;
	background: url('./assets/image/gehirn_links_hover.png') no-repeat 0 500px
}

#infografik .leftside .gehirndesign.aktivkat {
	background-position: 0 0
}

#infografik .leftside .gehirncoding.aktivkat {
	background-position: 0 -191px
}

#infografik .leftside .gehirnspiele.aktivkat {
	background-position: 0 -337px
}

#infografik .leftside table {
	width: 100%
}

#infografik .leftside table th {
	line-height: 22px;
	/* text-align: right; */
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: default
}

#infografik .leftside table td {
	line-height: 22px;
	/* text-align: right; */
	cursor: default
}

#infografik .leftside table td.aktivtd {
	font-weight: 700;
	color: #e3e3e3
}

#infografik .rightside {
	width: 502px;
	height: 401px;
	overflow: hidden;
	margin: 20px 0 0 0;
	position: relative;
	float: right;
	background: url('./assets/image/gehirn_sprite.png') no-repeat
}

.clear {
	clear: both
}

.copytext {
	padding: 20px 0 0 0;
	text-align: right;
	font-size: 10px
}

#infografik .rightside.ae,
#infografik .rightside.ai,
#infografik .rightside.desi,
#infografik .rightside.fla,
#infografik .rightside.fw,
#infografik .rightside.ind,
#infografik .rightside.pp,
#infografik .rightside.ps {
	background-position: 0 -802px
}

#infografik .rightside.actsc,
#infografik .rightside.cod,
#infografik .rightside.cs,
#infografik .rightside.ht,
#infografik .rightside.jas,
#infografik .rightside.php {
	background-position: 0 -401px
}

#infografik .rightside.nds,
#infografik .rightside.playst,
#infografik .rightside.snes,
#infografik .rightside.sonst,
#infografik .rightside.spi,
#infografik .rightside.wii {
	background-position: 0 -1203px
}

#maphover {
	position: absolute;
	top: 0;
	left: 0;
	background: url('./assets/image/gehirn_hover.png') no-repeat
}

#maphover.ps {
	left: 86px;
	top: 0;
	width: 329px;
	height: 210px;
	background-position: 0 0
}

#maphover.ai {
	left: 111px;
	top: 142px;
	width: 243px;
	height: 178px;
	background-position: 0 -210px
}

#maphover.ind {
	left: 243px;
	top: 45px;
	width: 260px;
	height: 183px;
	background-position: 0 -388px
}

#maphover.fla {
	left: 396px;
	top: 141px;
	width: 101px;
	height: 119px;
	background-position: 0 -571px
}

#maphover.fw {
	left: 275px;
	top: 199px;
	width: 138px;
	height: 72px;
	background-position: -191px -571px
}

#maphover.pp {
	left: 280px;
	top: 161px;
	width: 126px;
	height: 70px;
	background-position: 0 -690px
}

#maphover.ae {
	left: 349px;
	top: 104px;
	width: 115px;
	height: 80px;
	background-position: -214px -690px
}

#maphover.ht {
	left: 44px;
	top: 55px;
	width: 124px;
	height: 182px;
	background-position: 0 -906px
}

#maphover.cs {
	left: 28px;
	top: 130px;
	width: 103px;
	height: 120px;
	background-position: -226px -906px
}

#maphover.jas {
	left: 1px;
	top: 123px;
	width: 119px;
	height: 140px;
	background-position: 0 -1088px
}

#maphover.php {
	left: 11px;
	top: 45px;
	width: 114px;
	height: 125px;
	background-position: -214px -1088px
}

#maphover.actsc {
	left: 8px;
	top: 45px;
	width: 85px;
	height: 86px;
	background-position: -131px -906px
}

#maphover.snes {
	left: 271px;
	top: 245px;
	width: 182px;
	height: 70px;
	background-position: 0 -770px
}

#maphover.wii {
	left: 324px;
	top: 256px;
	width: 132px;
	height: 77px;
	background-position: -197px -770px
}

#maphover.nds {
	left: 317px;
	top: 311px;
	width: 122px;
	height: 45px;
	background-position: 0 -847px
}

#maphover.playst {
	left: 301px;
	top: 311px;
	width: 115px;
	height: 53px;
	background-position: -214px -847px
}

#maphover.sonst {
	left: 276px;
	top: 303px;
	width: 69px;
	height: 59px;
	background-position: -133px -847px
}

#infografik .rightside .map {
	position: absolute;
	top: 0;
	left: 0;
	width: 502px;
	height: 401px
}

.tooltip {
	position: absolute;
	padding: 0 10px;
	min-width: 80px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-o-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-ie-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ie-border-radius: 3px;
	border-radius: 3px;
	line-height: 26px;
	text-align: center;
	background: #fff;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #000000));
	background-image: -moz-linear-gradient(center bottom, #e6e6e6 0, #fff 100%)
}

.tooltip:before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	margin: 0 0 0 -5px;
	width: 10px;
	height: 6px;
	background: url('./assets/image/gehirn_sprite.png') no-repeat
}
.work__container {
    row-gap: 2rem;
    padding-top: 2rem;
}

.bg-2 {
    border-bottom: 1px solid rgba(212, 212, 212, 0.089);
    border-top: 1px solid rgba(212, 212, 212, 0.089);
    background-color: #111111;
    height: 50pc;
    margin-top: 10rem;
    
}

.work__img {
    box-shadow: 0 4px 25px rgba(14, 36, 49, .15);
    border-radius: .5rem;
    overflow: hidden;

}

.work__img img {
    transition: 1s;
    cursor: pointer;
}

.work__link {
    position: absolute;
    bottom: -100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .3);
    border-radius: .5rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: .3s;
}

.work__img:hover .work__link {
    bottom: 0;
    background-color: #406bce8f;
}
.col-2 {
    padding-top: 15px;
}
.description {
    padding-top: 10px;
    padding-bottom: 10px;
}
button {
    height: 50px;
    /* margin: 5px; */
    width: 120px;
    background: #333;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: Consolas, Courier New, monospace;
    border: solid #404c5d 1px;
    font-size: 16px;
    color: rgb(161, 161, 161);
    -webkit-transition: 500ms;
    transition: 500ms;
    border-radius: 5px;
    background: linear-gradient(145deg, #000000, #212121);
    -webkit-box-shadow: -1px -5px 15px #41465b, 5px 5px 15px #41465b,
      inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;
    box-shadow: -1px -5px 15px #41465b, 5px 5px 15px #41465b,
      inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;
  }
  
  button:hover {
    -webkit-box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;
    box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;
    color: #d6d6d6;
    -webkit-transition: 500ms;
    transition: 500ms;
  }
  
  button:active {
    -webkit-box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;
    box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;
    color: #d6d6d6;
    -webkit-transition: 100ms;
    transition: 100ms;
  }
  

.work__link-name {
    text-align: center;
    color: white;
    font-weight: var(--font-semi);
}

/* ===== CONTACT =====*/

.contact__container {
    justify-content: space-around;
    display: flex;
    padding-top: 1rem;
}

.contact__subtitle {
    font-size: var(--normal-font-size);
    color: var(--first-color);
}

.contact__text {
    display: inline-block;
    margin-bottom: var(--mb-2);
}

.contact-info iframe{
    width: 500px ;
    height: 500px;
    border-radius: 1px;
}

/* ===== FOOTER =====*/
.footer {
    border-top: 1px solid rgba(212, 212, 212, 0.089);
    background-color: #111111;
    color: var(--third-color);
    font-weight: var(--font-semi);
    margin-top: 5rem;
}

.footer__container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    row-gap: 2rem;

}

.footer__title {
    font-size: 20px;
    margin-bottom: var(--mb-4);
    color: var(--first-color);
}

.footer__description{
    display: block;
    font-size: 20px;
    margin: .25rem 0 var(--mb-3);
}

.footer__logo {
    grid-gap: 23px;
    flex-direction: row;
    display: inline-flex;
    margin: auto;
}

.footer__link{
    font-size: var(--normal-font-size);
    color: var(--third-color);
    font-weight: 200;
    position: relative;
    padding: 15px 0;
}

.footer__link:hover::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0.13rem;
    left: 0;
    top: 2.1rem;
    background-color: var(--third-color);
    animation: underline .5s ease-out;
}

.footer__icon {
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
    padding-right: 12px;
}

.footer__copy{
    text-align: center;
    font-size: var(--normal-font-size);
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(212, 212, 212, 0.24);
}

.footer__info-box{
    font-weight: 200;
}

.footer__info{
    opacity: 55%;
}

/* ===== MEDIA QUERIES=====*/
@media screen and (min-width: 768px) {
    body {
        margin: 0;
    }

    .section {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    .section-title {
        margin-bottom: var(--mb-6);
    }

    .section-title::after {
        width: 80px;
        top: 3rem;
    }

    .nav {
        height: calc(var(--header-height) + 1rem);
    }

    .nav__list {
        display: flex;
        padding-top: 0;
    }

    .nav__item {
        margin-left: var(--mb-6);
        margin-bottom: 0;
    }

    .nav__toggle {
        display: none;
    }

    .nav__link {
        color: var(--second-color);
    }

    .home p {
        width: 600px;
        margin-bottom: var(--mb-);
    }

    .home {
        height: 100vh;
    }

    .home__data {
        align-self: flex-end;
    }

    .home__social {
        padding-top: 0;
        padding-bottom: 2.5rem;
        flex-direction: row;
        align-self: flex-end;
    }

    .home__social-icon {
        margin-bottom: 0;
        margin-right: var(--mb-4);
    }

    .home__img {
        width: 457px;
        bottom: 15%;
    }

    .about__container,
    .skills__container {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        text-align: justify;
    }

    .about__img img {
        width: 300px;
    }

    .work__container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 2rem;
    }

    .contact__form {
        width: 360px;
    }


    .contact__container {
        justify-items: center;
    }
}

@media screen and (min-width: 1024px) {
    .bd-grid {
        margin-left: auto;
        margin-right: auto;
    }

    .home__img {
        right: 10%;
    }

}



@media (max-width: 576px) and (min-width: 360px) {
    .nav__menu {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 80%;
        height: 100vh;
        padding: 2rem;
        background-color: var(--third-color) !important;
        transition: .5s;
    }

    .nav__item {
        margin-bottom: var(--mb-4);
    }


    .nav__link {
        position: relative;
        color: black !important;
    }

    .nav__link:hover {
        position: relative;
    }

    .nav__link:hover::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.18rem;
        left: 0;
        top: 2rem;
        background-color: var(--third-color);
    }

    .nav__logo {
        color: var(--third-color);
    }

    .nav__toggle {
        color: var(--third-color);
        font-size: 1.5rem;
        cursor: pointer;
    }

    /*Active menu*/
    .active::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.18rem;
        left: 0;
        top: 2rem;
        background-color: var(--first-color);
    }

    /*=== Show menu ===*/
    .show {
        right: 0;
    }

    /* ===== HOME =====*/
    .home {
        text-align: center;
        margin: 0;
        padding: 0;
        width: 100%;
    }


    .home__social {
        padding: 21px;
        flex-direction: row;
        justify-content: space-around;
        display: inline-flex;
    }

    .home__title {
        font-size: var(--big-font-size);
        text-align: center;
    }

    .home p {
        width: 390px;
        margin-bottom: var(--mb-4);
    }

    .about__img img {
        width: 300px;
    }

    .work__container {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 2rem;
    }

    .bg-2 {
        height: 100%;
    }

    /* ===== CONTACT =====*/

    .skills__container img {
        display: none;
    }

    /* ===== CONTACT =====*/

    .contact__container {
        display: grid;
        grid-gap: 23px;
    }

    .contact__form {
        width: 100%;
    }

    .contact iframe{
        width: 100%;
        height: 400px;
    }
}


@media (max-width: 400px) and (min-width: 0px) {

    body {
        max-width: 100%;
    }


    .nav__menu {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 80%;
        height: 100vh;
        padding: 2rem;
        background-color: var(--third-color);
        transition: .5s;
    }

    .nav__item {
        margin-bottom: var(--mb-4);
    }


    .nav__link {
        position: relative;
        color: black !important;
    }

    .nav__link:hover {
        position: relative;
    }

    .nav__link:hover::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.18rem;
        left: 0;
        top: 2rem;
        background-color: var(--first-color);
    }

    .nav__logo {
        color: var(--third-color);
    }

    .nav__toggle {
        color: var(--third-color);
        font-size: 1.5rem;
        cursor: pointer;

    }

    /*Active menu*/
    .active::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.18rem;
        left: 0;
        top: 2rem;
        background-color: var(--first-color);
    }

    /*=== Show menu ===*/
    .show {
        right: 0;
    }

    /* ===== HOME =====*/
    .home {
        text-align: center;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .home__img img {
        display: none;
    }

    .home__social {
        padding: 21px;
        flex-direction: row;
        justify-content: space-around;
        display: inline-flex;
    }

    .home__title {
        font-size: var(--big-font-size);
        text-align: center;
    }

    .home p {
        width: 300px;
        margin-bottom: var(--mb-4);
    }

    /* ===== SKILLS =====*/
    .skills__container {
        width: 100%;
    }


    /* ===== CONTACT =====*/

    .contact__container {
        display: grid;
        grid-gap: 23px;
    }


    .work__container {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 2rem;
    }

    .bg-2 {
        height: 100%;
    }

    .work__container img {
        width: 100%;
    }

    .skills__container img {
        display: none;
    }


    .contact iframe{
        width: 100%;
        height: 200px;
    }
}

/* sample */

.project-card {
    background-color: transparent;
  }

  .project-image {
    height: 338px;
    border-radius: 4px;
    background: linear-gradient(225deg, #FEDC2A 0%, #DD5789 51%, #7A2C9E 100%);
  }

  .icon {
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
  }

  .project-description {
    color: #C4C4C4;
  }

  .project-tags {
    color: #6CACE4;
  }