@font-face {
    font-family: 'regular';
    src: url('../fonts/ltype-webfont.woff2') format('woff2'),
         url('../fonts/ltype-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bold';
    src: url('../fonts/ltypeb-webfont.woff2') format('woff2'),
         url('../fonts/ltypeb-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*----------------------------GENERAL--------------------------*/

html, body {
    width: 100%;
    height: 100%;
    background-color: black;
    font-family: 'regular', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace;
    color: white;
}

a, a:visited {
    text-decoration: none;
    color: inherit;
}

a:hover, a:focus {
    text-decoration: underline;
}

div {
    display: block;
}

/*----------------------------COVER--------------------------*/

.video {
    max-height: 1200px;
    z-index: 1000;
}

#image {
    position: absolute;
    top: 0;
    max-height: 60vmax;
    left: 100px;
    z-index: -1;
}

.flex {
    float: left; 
    width: 50%; 
}

.name {
    text-align: right;
    font-size: 15vh;
    margin: 0;
    padding-right: 5px;
}

/*----------------------------MAIN--------------------------*/

.canvas {
    height: 100%;
    width: 100%;
}

#constellation {
    cursor: pointer;
}

.container {
    width: 50%;
}

.position {
    font-family: "bold", 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono',monospace;;
    font-size: 35px;
    margin: 0;
}

.position1 {
    font-size: 16px;
    font-family: 'regular', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace;
    margin: 0;
} 

.wrapper {
    position: relative;
}

.floating {
    position: absolute;
    top: 1200px;
    left: 0;
}

#welcome {
    padding-top: 20px;
    padding-left: 20px;
    z-index: 10;
    background-color: black;
}

#welcome ul {
    padding-left: 0;
}

#welcome ul li {
    padding-top: 1px;
}

#greeting {
    font-size: 40px;
    padding-top: 50px;
}

#greeting2 {
    font-size: 40px;
    padding-bottom: 80px;
}

#resume, #resume:hover p, #resume:focus, #resume:active {
    color: #00FABB;
    text-decoration-color: #00FABB;
}

#projects, #projects:hover, #projects:focus, #projects:active {
    color: #819BF0;
    text-decoration-color: #819BF0;
}

#contact, #contact:hover, #contact:focus, #contact:active {
    color: #276EFE;
    text-decoration-color: #276EFE;
}


/*----------------------------NAVIGATION--------------------------*/

#beginning {
    height:40px;
    width: 40px;
    position: fixed;
    margin: 15px;
    z-index: 20;
    right: 417px;
    bottom: 450px;
}

#option1, #option2, #option3 {
    height:40px;
    width: 40px;
    border:3px solid white;
    position: fixed;
    margin: 10px;
    z-index: 20;
    background-color: black;
    right: 420px;
}

.interlink {
    height: 75px;
    width: 10px;
    position: fixed;
    z-index: 40;
    right: 449px;
}

#about-link {
    bottom: 405px;
    height: 55px;
}

#recomend-link {
    bottom: 285px;
}

#skills-link {
    bottom: 165px;
}

#option1 {
    bottom: 350px;
}

#option2 {
    bottom: 230px;
}

#option3 {
    bottom: 110px;
}

#option1::before, 
#option2::before, 
#option3::before, 
#beginning::before {
    content:"";
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 20;
}

#beginning::before {
    border: 8px solid white;
}

#beginning:hover::before, 
#beginning:focus::before, 
#beginning:active::before {
    border: 12px solid white;
    transition: border 0.2s;
}

.interlink:hover, 
.interlink:focus, 
.interlink:active {
    border-right: 8px solid white;
}

#about-link:hover, 
#about-link:focus, 
#about-link:active {
    height: 60px;
}

#option1::before {
    border: 8px solid #00FABB;
}

#option1:hover, 
#option1:focus, 
#option1:active {
    border: 3px solid #00FABB;
}

#option2::before {
    border: 8px solid #819BF0;
}

#option2:hover, 
#option2:focus, 
#option2:active {
    border: 3px solid #819BF0;
}

#option3::before {
    border: 8px solid #276EFE;
}

#option3:hover, 
#option3:focus, 
#option3:active {
    border: 3px solid #276EFE;
}

.menu, 
#option1::after, 
#option2::after, 
#option3::after, 
#beginning::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    width: 3px;
    top: 40px;
    right: 20px;
    background: white;
    z-index: 20;
    pointer-events: none;
}

#option1::after, #option2::after, #beginning::after {
    height: 80px;
} 

#option3::after {
    height: 450%;
}

.nav-text {
    display: inline;
    position: fixed;
    font-size: 10px;
    z-index: 100000;
    display: none;
    transform: rotate(90deg);
    font-family: "bold", 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono',monospace;;
}

.option {
    right: 403px;
}

#beginning-text {
    bottom: 490px;
    right: 427px;
    transform: rotate(0);
}

#about-link-text {
    bottom: 420px;
    right: 424px;
}

#option1-text {
    bottom: 368px;
    color: #00FABB;
    right: 405px;
}

#recomend-link-text {
    bottom: 308px;
    right: 415px;
}

#option2-text {
    right: 400px;
    bottom: 247px;
    color: #819BF0;
}

#skills-link-text {
    bottom: 187px;
    right: 424px;
}

#option3-text {
    bottom: 127px;
    color: #276EFE;

}

/*--------------------------INTER_SECTIONS------------------------*/

#about {
    clear:both;
    max-width: 600px;
    background-color: black;
    padding: 140px;
}

#about p {
    padding-top: 1250px;
    padding-bottom: 220px;
    max-height: 700px;
}

.recomendation {
    background-color: black;
    right: 50px;
    padding-top: 100px;
}

.recomendation p {
    margin-bottom: 30px
}

#constellation-moving {
    clear: both;
    max-width: calc(100% - 480px);
    background-color: black;
    left: 0;
    z-index: -1;
}

.skills {
    max-width: 300px;
    background-color: black;
    z-index: 10;
    padding-left: 100px;
    padding-top: 50px;
    padding-bottom: 100px;
}

ul {
    list-style-type: none;
}

ul li {
    margin: 5px;
}

#constellation-following {
    width: calc(100% - 400px);
    background-color: black;
    position: relative;
    height: 100%;
}



/*--------------------------FOOTER------------------------------*/


footer {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: black;
    padding-top: 150px;
}

#author {
    padding-bottom: 20px;
    font-size: 40px;
}

footer p {
    padding-left: 20px;
    font-size: 20px;
}

.photo {
    filter:grayscale(1);
    position: absolute;
    max-width: 150px;
    height: auto;
    bottom: 60px;
    right: 100px;
    border: 8px solid white;
}

/*--------------------------ARROW-------------------------------*/

.arrow {
    position: absolute;
    right: 15px;
    bottom: 0;
    margin-left:-20px;
    width: 40px;
    height: 40px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
    background-size: contain;
    animation: bounce 2s infinite;
}

.download {
    clear: left;
    position: absolute;
    bottom: 100px;
    right: 80px;
    animation: bounce 2s infinite;
    font-size: 22px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/*---------------------------RESUME-------------------------*/

#resume-area {
    box-sizing: border-box;
    width: 100%;
    background-color: black;
    border: 40px solid #00FABB;
    border-left: 80px solid #00FABB;
    padding-left: 20px;
    overflow: auto;
    position: relative;
}

h2 {
    padding-bottom: 30px;
    
}

.title {
    padding-top: 30px;
    color: #00FABB;
}

.column {
    float: left;
}

.a {
    width: calc(100% - 470px);
    padding-bottom: 20px;
}

.flexbox {
    display: flex;
    gap: 40px;
}

.b {
    padding-left: 120px;
    max-width: 300px;
}

.sk {
    font-family: bold;
}

#resume-area p, #resume-area h3 {
    max-height: 1000px;
}

.b, #projects-area figcaption {
    max-height: 10000px;
}


/*-----------------------PROJECTS---------------------------*/

#projects-area {
    box-sizing: border-box;
    clear: both;
    width: 100%;
    background-color: black;
    border: 40px solid #819BF0;
    border-right: 100px solid #819BF0;
    padding-left: 40px;
}

.projects {
    display: grid;
    max-width: calc(100% - 420px);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: 25px;
    row-gap: 30px;
    margin-bottom: 120px;
}

.projects figure {
    margin: 0px; 
}
.image-container {
    overflow: hidden; 
    height: 240px; 
    margin-bottom: 9px;
}

.projects img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 40%;
}

.projects img:hover, 
.projects a:focus img {
    opacity: 100%;
    transition: transform 1s ease;
    transform: scale(1.2);
}

.projects .image-container:focus-within {
    border: 3px solid #72edca;
}

.projects figcaption {
    font-size: 16px;
    line-height: 20px;
}

.title, .projects cite {
    display: block;
}

.title {
    font-weight: bold;
}


/*-----------------------CONTACT---------------------------*/

#contact-area {
    box-sizing: border-box;
    clear: both;
    width: 100%;
    background-color: black;
    border: 20px solid #276EFE;
    border-left: 100px solid #276EFE;
    font-size: 20px;
    padding-left: 40px;
    overflow: auto;
}

.contact-me {
    font-size: 38px;
    padding-top: 100px;
    animation: bounce 2s infinite;
}

.relative {
    position: relative;
}


/*-----------------------PROGRESS---------------------------*/

#header, #elements, #footer {
    opacity: 0.3;
}

#progress {
    width: 400px;
    max-width: 85vw;
    height: 4px;
    position: absolute;
    bottom: 20vh;
    left: 50%;
    border-radius: 4px;
    background: rgba(255, 255, 255, .5);
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 999;
} 
    
#progress:after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background: white;
    animation: load 2s linear infinite;
}

@keyframes load {
    0% {width: 0;}
    10% {width: 5%;}
    20% {width: 15%;}
    30% {width: 25%;}
    40% {width: 30%;}
    50% {width: 44%;}
    60% {width: 50%;}
    70% {width: 72%;}
    80% {width: 84%;}
    90% {width: 92%;}
    100% {width: 100%;}
}


/*----------------------SKIP_LINK-------------------------*/

.skip-link {
    background: white;
    font-weight: bold;
    left: 50%;
    padding: 4px;
    position: absolute;
    transform: translateY(-100%);
    z-index: 10000;
    top: 0;
}

header .skip-link {
    color: black;
}

.skip-link:focus {
    transform: translateY(0%);
}


/*-----------------------MEDIA---------------------------*/


@media only screen and (max-width: 1235px) {
    #about {
        max-width: 300px;
    }
}

@media only screen and (max-height: 560px) {
    #beginning {
        bottom: 360px;
    }

    #option1 {
        bottom: 260px
    }
    
    #option2 {
        bottom: 155px;
    }
    
    #option3 {
        bottom: 50px;
    }

    .interlink {
        height: 60px;
    }

    #about-link {
        bottom: 315px;
        height: 60px;
    }
    
    #recomend-link {
        bottom: 210px;
    }
    
    #skills-link {
        bottom: 105px;
    }
}

@media (orientation: portrait) {
    .flex {
        float: none;
        width: 80%;
    }

    .container {
        width: 80%;
    }

    .video {
        max-height: 800px;
        z-index: 10000000;
    }

    #beginning {
        right: 97px;
    }

    #option1, #option2, #option3, .interlink {
        right: 100px;
    }

    .interlink {
        right: 129px;
    }

    .nav-text {
        right: 40px;
    }

    #beginning-text {
        right: 106px;
    }
    
    #about-link-text {
        bottom: 420px;
        right: 104px;
    }
    
    #option1-text {
        right: 85px;
    }
    
    #recomend-link-text {
        right: 95px;
    }
    
    #option2-text {
        right: 80px;
    }
    
    #skills-link-text {
        right: 105px;
    }

    #option3-text {
        right: 83px;
    }

    .arrow {
        right: 200px;
    }

    element {
        --height: 100vh;
    }

    .name {
        font-size: 10vh;
    }

    #about p {
        padding-top: 200px;
        padding-bottom: 1200px;
        font-size: 25px;
        padding-left: 30px;
    }

    .column {
        float: none;
    }

    .a {
        width: 80%;
        padding-bottom: 20px;
    }

    .b {
        padding-left: 0;
        max-width: 300px;
        font-size: 12px;
    }

    #experience {
        padding-top: 50px;
    }

    .download {
        font-size: 40px;
        padding-left: 420px;
        padding-right: 10px;
    }

    .col {
        float: left;
    }
    
    .first {
        width: calc(100% - 470px);
        padding-bottom: 20px;
    }
    
    .second {
        padding-left: 120px;
        max-width: 300px;
    }

    .portrait ul li, .portrait p {
        font-size: 25px
    }

    #projects-area {
        border-right: 70px solid #819BF0;
    }

    .recomendation {
        padding-left: 0;
    }

    .skills ul {
        padding-left: 0;
    }    

    .skills {
        padding-left: 80px;
        max-width: 380px;
    }

    #constellation-following {
        width: calc(100% - 480px);
        height: 50vh;
        max-height: 10000px;
    }

    #constellation-moving {
        height: 50vh;
    }

    .photo {
        bottom: 60px;
        right: 220px;
    }

    .projects {
        max-width: calc(100% - 130px);
    }

    .projects figcaption {
        line-height: 35px ;
        font-size: 25px;
    }

    .contact-me {
        padding-top: 80px;
        padding-bottom: 50px;
        font-size: 40px;
    }

    .con p {
        font-size: 30px;
    }

    footer p {
        font-size: 25px;
    }

    footer {
        padding-bottom: 60px;
    }

    cite {
        padding-top: 20px;
    }

    #resume-area p {
        font-size: 25px;
    }

    #resume-area h3 {
        font-size: 30px;
    }

    #resume-area h2 {
        font-size: 40px;
    }

    #image {
        max-height: 80vw;
    }

    @media (min-aspect-ratio: 3/5) {
        .name {
            font-size: 6.4vh;
        }
    }

}