:root{
    --sect-standard-text: #dbdada;

    --sect-home: #16181a;
    --sect-home-text: #dbdbdb;
    --sect-home-text-new: #dbdbdb;
    --sect-home-imp: #ff7700;

    --sect-skill: #16181a;
    --sect-skill-text: #1567ff;
    --sect-skill-imp: #ff7700;

    --sect-projects-text: #1567ff;
    --sect-projects-imp: #ff7700;

    --sect-timeline-text: #1567ff;
    --sect-timeline-imp: #ff7700;
    /* Prev text: #9400b1 */

    --big-text-window-scale: 1.5;
    --section-ind-pos-left: 3;
}
*{
    font-family: inconsolata,monospace;
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: #232323;
    overflow-x: hidden;
}
a{
    color: var(--sect-timeline-text);
}



@media screen and (max-width: 1900px){
    html{
        font-size: 17px;
    }
}

@media screen and (max-width: 1733px){
    html{
        font-size: 16px;
    }
}

@media screen and (max-width: 1500px){
    html{
        font-size: 15px;
    }
}

@media screen and (max-width: 1400px){
    html{
        font-size: 14px;
    }
}

@media screen and (max-width: 1300px){
    html{
        font-size: 13px;
    }
}

@media screen and (max-width: 1072px){
    html{
        font-size: 12px;
    }
}

@media screen and (max-width: 950px){
    html{
        font-size: 11px;
    }
}

@media screen and (max-width: 401px){
    html{
        font-size: 10.5px;
    }
}

/*::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    width: 10px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    opacity: 1;
    width: 10px;
    background: #2ae9c9;
}*/

::-webkit-scrollbar{
    width: 0;
}
.scrollpath{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    z-index: 20000;
    background: rgba(255, 255, 255, 0.05);
}
.progressbar{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 0%;
    z-index: 19998;
    background: linear-gradient(to top, #e02b2b 0%, #000 100%);
    animation: progress-bar-anim 5s linear infinite;
    opacity: 1;
}
@keyframes progress-bar-anim{
    0%, 100%{
        filter: hue-rotate(0deg);
    }
    50%{
        filter: hue-rotate(360deg);
    }
}
.progressbar::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, #e02b2b 0%, #000 100%);
    filter: blur(10px);
}
.progressbar::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, #e02b2b 0%, #000 100%);
    filter: blur(30px);
}

.menu-button{
    width: 5vw;
    height: 5vw;
    position: sticky;
    top: 1vw;
    left: 1vw;
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu-button-img{
    width: 5vw;
    height: 5vw;
    position: absolute;
    z-index: 20000;
}
.menu-circle{
    position: absolute;
    z-index: 19999;
    border-radius: 50%;
    background-color: #5c7c05;
    width: 0;
    height: 0;
}
.menu-circle-parent{
    position: absolute;
    width: 195vw;
    height: 195vh;
    display: flex;
    z-index: -10000;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: -400vh;
}
.menu-div{
    opacity: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 0;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu-buttons{
    width: 80vw;
    height: 80vh;
    border: 3px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.button-div{
    width: 100%;
    height: 20%;
    border: 3px solid #9400b1;
    display: flex;
    z-index: 0;
    align-items: center;
    transition: all 0.5s ease-in-out;
    background-color: #000;
}
.sect-button{
    margin-top: -3px;
    width: auto;
    height: auto;
    z-index: -70000;
    font-size: 5vh;
    text-decoration: none;
    position: relative;
    left: 1%;
}
.button-div:hover{
    width: 110%;
    height: 25%;
    margin-left: -5%;
    background-color: rgba(222, 12, 194, 0.2)
}
.home-button{
    color: var(--sect-skill-text);
}
.skill-button{
    color: var(--sect-skill-text);
}
.projects-button{
    color: var(--sect-projects-text);
}
.timeline-button{
    color: var(--sect-timeline-text);
}

section{
    width: 100%;
    height: 100vh;
}
.section-begin{
    margin-bottom: 5vw;
    font-size: 1.5rem;
    position: absolute;
    left: calc(2vw * var(--section-ind-pos-left));
    top: 2vh;
}
.section-end{
    margin-top: 5vw;
    font-size: 1.5rem;
    position: absolute;
    left: calc(2vw * var(--section-ind-pos-left));
    bottom: 2vh;
}
.section-begin::before{
    content: "<";
}
.section-begin::after{
    content: ">";
}
.section-end::before{
    content: "</";
}
.section-end::after{
    content: ">";
}

@media screen and (max-width: 800px){
    .section-begin{
        top: 4vh;
    }
    .section-end{
        bottom: 4vh;
    }
}

/* nav */
nav{
    width: 100%;
    /*background: #232323;*/
}
.sectionlinks{
    width: 50vw;
    margin: 0 auto;
    padding: 0 0;
    margin-right: 0;
    display: flex;
    flex-direction: row-reverse;
}
.sectionlinks a{
    text-decoration: none;
}

/* Home section */
.home{
    color: var(--sect-home-text);
    justify-content: center;
    align-items: center;
    display: flex;
}
#intro{
    width: 70vw;
    justify-content: center;
    align-items: left;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 35vh;
}
.home-info-me{
    width: 100%;
    font-size: calc(1.2rem * var(--big-text-window-scale));;
    position: relative;
    padding-top: 2vw;
    color: var(--sect-home-text-new);
}
.imp-home{
    color: var(--sect-home-imp);
}

@media screen and (max-width: 600px){
    .home{
        height: 100vh;
    }
    #intro{
        top: 40vh;
    }
}

#hello{
    width: 100vw;
    font-size: calc(2.5rem*var(--big-text-window-scale));
}
#specialities-box{
    position: relative;
    width: 100vw;
    height: calc(3rem*var(--big-text-window-scale));
    margin: 0 auto;
    margin-top: 5px;
    /*left: -15px;*/
    display: flex;
    overflow: hidden;
}
.move-up-text{
    width: 100vw;
    height: calc(3rem * var(--big-text-window-scale));
    display: flex;
}
.specialities{
    position: relative;
}
.specialities-up{
    width: calc(10rem * var(--big-text-window-scale));
    margin: 0 auto;
    font-size: calc(3rem * var(--big-text-window-scale));
    height: calc(3rem * var(--big-text-window-scale));
    overflow: hidden;
}
.speciality{
    width: 100vw;
    font-size: calc(3rem * var(--big-text-window-scale));
    margin-right: 0;
    left: calc(0.5rem * var(--big-text-window-scale));
    z-index: 100;
    position: absolute;
}
@media screen and (max-width: 950px){
    #intro{
        /*top: 18vw;*/
    }

    #hello{
        font-size: 4vw;
    }
    #specialities-box{
        height: 4.8vw;
    }
    .move-up-text{
        height: 4.8vw;
    }
    .specialities-up{
        font-size: 4.8vw;
        height: 4.8vw;
        width: 13.2vw;
    }
    .speciality{
        font-size: 4.8vw;
        left: 0.8vw;
    }
}
@media screen and (max-width: 700px){
    #intro{
        /*top: 16vw;*/
    }

    #hello{
        /*font-size: 4vw;*/
        width: 100vw;
    }
    #specialities-box{
        height: 4.8vw;
    }
    .move-up-text{
        height: 4.8vw;
    }
    .specialities-up{
        font-size: 4.8vw;
        height: 4.8vw;
        width: 16vw;
    }
    .speciality{
        font-size: 4.8vw;
        left: 1.2vw;
    }
}
@media screen and (max-width: 400px){
    #intro{
        /*top: 11vw;*/
    }

    #hello{
        /*font-size: 3vw;*/
    }
    #specialities-box{
        height: 6.6vw;
    }
    .move-up-text{
        height: 6.6vw;
    }
    .specialities-up{
        font-size: 6.6vw;
        height: 6.6vw;
        width: 26.4vw;
    }
    .speciality{
        font-size: 6.6vw;
        left: 1.6vw;
    }
}

.move-up{
    animation: Move-up 5s;
}
.half-up{
    animation: Half-up 5s;
}
@keyframes Move-up{
    0%{
        margin-top: calc(4rem * var(--big-text-window-scale));
    }
    25%{
        margin-top: calc(-5px * var(--big-text-window-scale));
    }
    75%{
        margin-top: calc(-5px * var(--big-text-window-scale));
    }
    100%{
        margin-top: calc(-4rem * var(--big-text-window-scale));
    }
}
@keyframes Half-up{
    0%{
        margin-top: calc(-5px * var(--big-text-window-scale));
    }
    33.3%{
        margin-top: calc(-5px * var(--big-text-window-scale));
    }
    66.6%{
        margin-top: calc(-5px* var(--big-text-window-scale));
    }
    100%{
        margin-top: calc(-4rem* var(--big-text-window-scale));
    }
}

.container{
    background: #2b2b2b;
    display: flex;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    min-height: 50vw;
    width: 100%;
    position: absolute;
    z-index: -100;
}

#hex-grid{
    width: 100%;
    height: 100vh;
    background: #232323;
    z-index: -100;
}

.grid{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: url("Images/grid.svg");
    background-repeat: repeat;
    width: 100%;
    height: 100vh;
    z-index: -10;
    background-size: 200px;
}

.light{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15em;
    height: 15em;
    border-radius: 50%;
    filter: blur(15px);
    background: linear-gradient(90deg, #335bf4 0%, #2ae9c9 100%);
    z-index: -90;
}

.hero-foto{
    border-radius: 50%;
    border: 3px solid black;
    width: 18vw;
    height: 18vw;
    position: absolute;
    top: 3vw;
    right: 3vw;
}

.hexagon-bottom{
    width: 100%;
    height: 21px;
    /*top: calc(53vw - 50px);*/
    left: 0;
    background: url("Images/grid-half.png");
    background-size: 200px;
    z-index: 10000;
    position: absolute;
}

.hexagon-bottom-parent{
    top: calc(89vh + 5vw);
    /*left: calc(12.5vw - 140px);*/
    left:0;
    position: absolute;
    width: 100%;
    height: 21px;
    overflow-x: hidden;
}

@media screen and (max-width: 600px){
    #hex-grid{
        height: 100vh;
    }
    .grid{
        height: 100vh;
    }
    /*.hexagon-bottom-parent{
        top: 100vh;
    }*/
}

/* Skill section */

.skill{
    background: linear-gradient(to bottom, #232323 0%, var(--sect-skill) 100%);
    margin-top: -59px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--sect-skill-text);
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.growcircle{
    border-radius: 50%;
    position:absolute;
    z-index: 100;
    background-color: #5c7c05;
    width: 0;
    height: 0;
}
.circle-grow{
    animation: grow-circle 0.5s linear;
}
.circle-shrink{
    animation: shrink-circle 0.5s linear;
}
@keyframes grow-circle{
    0%{
        width: 0;
        height: 0;
    }
    100%{
        width: 300vw;
        height: 300vw;
    }
}
@keyframes shrink-circle{
    0%{
        width: 300vw;
        height: 300vw;
    }
    100%{
        width: 0;
        height: 0;
    }
}

.languagediv{
    opacity: 0;
}
.languagediv-rotate{
    width: 90vw;
    height: 90vh;
}
.language-divs{
    position: absolute;
    width: 90vw;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--ang) * 1deg)) translateY(-12px);
    transition: all 0.5s ease-in-out;
}

.langdiv{
    position: absolute;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.skill-div{
    height: 90vh;
    width: 90vw;
    position: absolute;
    top: 25%;
    left: 5vw;
    opacity: 1;
}
.skill-div-rotate{
    height: 90vh;
    width: 90vw;
    opacity: 1;
}
.languages{
    width: 70vw;
    height: 40vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
    left: auto;
    right: -5vw;
}
.language{
    display: flex;
    position: relative;
    align-items: center;
    margin: 0.5vw;
    z-index: 50;
    width: 30rem;
}
.language-img{
    width: 4rem;
    height: 4rem;
    position: relative;
}
.dots{
    bottom: 15vh;
    position: absolute;
    display: flex;
}
.dot{
    height: 3vh;
    width: 3vh;
    margin: 1vh;
    z-index: 70;
    opacity: 0.3;
}
.dot-active{
    opacity: 1;
}

@media screen and (max-width: 750px){

}

.language-list{
    width: auto;
    height: auto;
    position: relative;
    margin-left: 2rem;
}
.languages-arrow{
    width: 5vw;
    height: 5vw;
    position: absolute;
    right: 0;
    z-index: 10000;
}
.languages-arrow-prev{
    width: 5vw;
    height: 5vw;
    rotate: 180deg;
    position: absolute;
    left: 0;
    z-index: 10000;
}

.language-titel{
    font-size: 2rem;
}
.language-expl{
    width: 55vw;
    text-align: center;
    font-size: 1.5vw;
}
.language-expl-img{
    width: 10vw;
    height: 10vw;
}

.opacity-visible{
    animation: be-visible 0.5s linear;
}
@keyframes be-visible{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.opacity-notvisible{
    animation: be-notvisible 0.5s linear;
}
@keyframes be-notvisible{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@media screen and (max-width: 750px){
    .languages{
        height: 80vh;
        top: -10vh;
        right: -20vw;
    }
}
@media screen and (max-width: 600px){
    .languages{
        height: 80vh;
        top: -10vh;
        right: -10vw;
    }
}
@media screen and (max-width: 400px){
    .languages{
        height: 80vh;
        top: -10vh;
        right: 0vw;
    }
}

@media screen and (max-width: 600px){
    .skill-div{
        height: 120vh;
    }
    .language-img{
        width: 3rem;
        height: 3rem;
    }
    .language-list-item{
        font-size: 1rem;
    }
}

@media screen and (max-width: 300px){
    .skill-div{
        height: 120vh;
    }
    .language-img{
        width: 2.5rem;
        height: 2.5rem;
    }
    .language-list-item{
        font-size: .75rem;
    }
}

/* projects section */

.projects{
    height: 125vh;
    background: var(--sect-skill);
    margin-top: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--sect-skill-text);
    position: relative;
}
.projects-div{
    width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media screen and (max-width: 600px){
    .projects{
        height: 60vh;
    }
}

.project{
    width: 100%;
    height: 10vw;
    border: 3px solid var(--sect-skill-text);
    margin: 0.5vw;
    position: relative;
    display: flex;
}
.project-move-left{
    animation: projectMoveLeft 1s ease-out;
}
.project-move-right{
    animation: projectMoveRight 1s ease-out;
}
@keyframes projectMoveLeft{
    0%{
        margin-left: -100%;
    }
    100%{
        margin-left: 0;
    }
}
@keyframes projectMoveRight{
    0%{
        margin-left: 100%;
    }
    100%{
        margin-left: 0;
    }
}

.project-name{
    text-align: center;
    width: 100%;
    height: 2.55vw;
    text-decoration: none;
    font-size: 2.55vw;
    color: var(--sect-skill-text);
    position: absolute;
    left: 0.3vw;
    top: 0.3vw;
}
.project-link{
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;

    z-index: 1;

    /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
    background-image: url('empty.gif');
}
.info{
    color: var(--sect-standard-text);
    font-size: 1.3vw;
    left: 0.3vw;
    align-self: center;
    position: absolute;
}
.more-info{
    font-size: 1.3vw;
    position: absolute;
    left: 0.3vw;
    bottom: 0.3vw;
}

@media screen and (max-width: 600px){
    .project{
        height: 13vw;
    }
    .project-name{
        font-size: 3.4vw;
    }
    .info{
        font-size: 2vw;
    }
    .more-info{
        font-size: 2.6vw;
    }
}

/* Timeline section */

.timeline-sect{
    height: 150vh;
    width: 100vw;
    background-color: var(--sect-skill);
    color: var(--sect-timeline-text);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.timeline-div{
    width: 100%;
    height: 95%;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 600px){
    .timeline-sect{
        height: 90vh;
    }
}

/*.year-select{
    color: #fff;
    text-decoration: none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
.year-select:hover,
.year-select.selected {
  color: #ffcc00;
}*/
.timeline{
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    overflow: hidden;
}
.dates{
    width: 90%;
    height: 20vh;
    left: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    transition: all 0.5s ease-in-out;
}
.year-select{
    text-decoration: none;
    font-size: 3vw;
    text-align: center;
    width: 10vw;
    margin-right: 5vw;
    margin-left: -5vw;
    color: var(--sect-timeline-text);
    transition: all 0.3s ease-out;
    z-index: 100000;
}
.selected{
    color: #ffb700;
    transform: scale(1.5);
}

/*@media screen and (max-width: 600px){
    .year-select{
        font-size: 6vw;
    }
}*/

.happenings-div{
    top: 10vh;
    height: 80%;
    width: 100%;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.year-info{
    opacity: 0;
    width: 90%;
    position: absolute;
    transition: all 0.3s;
}
.year-div{
    margin: 1vw;
}
.year-happening{
    font-size: 3vw;
}
.year-happening-info{
    width: 80%;
    font-size: 1.7vw;
}
.timeline-more-info{
    font-size: 2vw;
    position: relative;
}

.year-happening-img{
    width: 17vw;
    position: absolute;
    right: 1vw;
    top:0;
    border-radius: 1vw;
}

@media screen and (max-width: 600px){
    .happenings-div{
        top: 0;
    }
    .year-info{
        top: 20vh;
    }

    .year-happening{
        font-size: 6vw;
    }
    .year-happening-info{
        font-size: 3.4vw
    }
    .timeline-more-info{
        font-size: 4vw;
    }
}

/* fading text */
.fade-text.fade{
    animation: Fade 1s linear;
}
.fade-text.un-fade{
    animation: unFade 1.5s linear;
}

@keyframes Fade{
    0%{
        opacity: 1;
    }
    20%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@keyframes unFade{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* SPECIFIC RESIZING */

@media screen and (max-width: 1900px){
    
}

@media screen and (max-width: 1733px){
    
}

@media screen and (max-width: 1500px){
    
}

@media screen and (max-width: 1400px){
    
}

@media screen and (max-width: 1300px){
    
}

@media screen and (max-width: 1072px){
    
}

@media screen and (max-width: 950px){
    
}

@media screen and (max-width: 401px){
    
}