html {
    font-family: 'EB GaramondQuestrial', sans-serif;
    color: black;    
}

body {
    background-color: white
}

.fullscreen {
    width: 100%;
    height: 100vh;
}

.border-left {
    border-left-style: solid;
    border-left-width: 0.15rem;
    border-left-color: rgba(0, 0, 0, 0.329);
}

.border-top {
    border-top-style: solid;
    border-top-width: 0.15rem;
    border-top-color: rgba(0, 0, 0, 0.377);
}

.border-bottom {
    border-bottom-style: solid;
    border-bottom-width: 0.15rem;
    border-bottom-color: rgba(0, 0, 0, 0.377);
}

a:-webkit-any-link, #hamburger-container, button, i, .project-img *, .fa a {
    cursor:pointer
}

* {
    cursor: default;
}




    #section-0 {    /*   Hero + Navigation   */
        background-image: url(media/theme/bkg-hero.png);        
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
    }
        #video-container {
            margin: auto;
            padding-top: 5%;
            width: 50%;
        }
        video {
            width: 100%;            
        }

        #section-0 .grid {
            margin-top: 0;
            padding-top: 10%;
        }

        #section-0 p {
            font-size: 1rem;
        }

            #section-0 .border-left {
                border-color: white;
            }

            #section-0 h1{
                text-align: left;
            }

            #section-0 h4{
                text-align: left;
            }

        #overlay {
            display: none;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.733);
            z-index: 1;
            position: fixed;
            top: 0;
            color: white;
        }
            #overlay > p {
                text-align: left;
                margin: 25% 5%;
                line-height: 1.5rem;

            }

        aside {
            float: right;
            background-color: rgba(0, 0, 0, 0);
            width: 5rem;
            height: 100vh;
        }
            #hamburger-container { 
                background-color: rgba(0, 255, 255, 0);
                position: fixed;
                right: 2%;
                top: 45%;
                width: 5rem;
                z-index: 1;
                border: none;
            }
                .hamburger {
                    width: 3rem;
                    height: 0.25rem;
                    background-color: rgb(0, 0, 0);
                    margin: 1rem;
                }                
                    #navigation-box {
                        display: none;     /*  !!! display:  NONE  !!!  */
                        justify-content: space-around;
                        background-color: rgba(0, 255, 255, 0);
                        color: rgb(255, 255, 255);
                        position: fixed;
                        right: 0;
                        top: 25%;
                        width: 100%;
                        z-index: 1;                        
                        padding: 0;
                        margin: 0;
                    }       
                        #navigation-box p {
                            margin: auto 3rem;
                            font-size: 2rem;
                        }    
                        #navigation-box ul, ul a {
                            font-size: 1.5rem;
                            list-style-type: none;
                            color: inherit;
                            text-decoration: none;
                        }
                        #navigation {
                            display: flex;
                            flex-direction: column;
                            font-size: 2rem;
                            padding:  0rem 2rem 0rem 0.8rem ;
                            list-style-type: none;
                            border-style: solid;
                            border-color: white;
                            border-width: 0rem 0rem 0rem 0.12rem;
                            line-height: 3rem;
                        }  
                        #navigation a {
                            text-decoration: none;
                            color: white;
                        }   
                        #navigation a:hover {
                            color: blue;
                        }

    
    #section-1 {    /*   Web development   */
        padding: none;
        background-image: url(media/theme/bkg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        
    }   
        .section-header {
            background-image: url(media/theme/bkg-hed.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 15vh;
            padding: 5rem;           
        }
            .section-header > h3 {                
                margin: 0rem;
                font-size: 50px;
            }

            .section-header > p {                
                margin: 0rem;
                font-size: 300%;
                color: white;
                position: absolute;
                right: 10%;                
            }

            .section-header a {
                text-decoration: none;
                color: inherit;
            }
        #section-1 > .enterprise-description, .grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 3rem;
            width: 80%;
            margin: 5rem auto 0rem;
            padding-bottom: 5rem;
        }
                .thumbnail a {                    
                    text-decoration: none;
                    color: inherit;
                }

                .project-img {
                    height: 10rem;
                    background-image: url(/media/theme/bkg-hero.png);
                    background-color: rgba(0, 0, 0, 0.404);
                    background-repeat: none;
                    background-position: center;
                    background-size: cover;
                    color: white;
                    text-align: center;
                }

                    .project-img:first-child {
                        padding-top: 2rem;
                    }                    

                    .project-img:hover {
                        text-decoration: underline;
                    }

                .short-desc {                    
                    text-align: center;
                    background-color: white;
                    padding-bottom: 1rem;
                }   
                    .short-desc h2{
                        margin: auto;
                    }

                    .short-desc p {
                        width: 80%;
                        margin: 0.5rem auto 0rem auto;
                    }
                    .thumbnail-button {
                        background-color: rgba(255, 255, 255, 0);
                        color: rgb(0, 0, 0);
                        margin-bottom: 1rem;
                        border-top: none;
                        border-right: none;
                        border-bottom: none;
                        padding: 0.5rem;
                        border-top-right-radius: 60%;
                        font-family: inherit;
                    }

                    .short-desc .border-left:hover {
                        border-left-color: rgb(0, 26, 255);
                        color: rgb(0, 26, 255);
                    }

        #section-2 {    /*   Web Design    */
            background-image: url(media/theme/bkg.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
            #section-2 .grid {
                grid-template-columns: 1fr 1fr;
            }
                .slideshow {
                    background-color: aqua;
                }
                    .mySlides1, .mySlides3 {
                        display: none;
                    }

                    .slideshow img {
                        vertical-align: middle;
                    }

                    .slideshow-container {
                        width: 100%;
                        position: relative;
                        margin: auto;
                    }
                        .prev, .next {
                            cursor: pointer;
                            position: absolute;
                            top: 50%;
                            padding: 16px;
                            margin-top: -22px;
                            color: white;
                            font-weight: bold;
                            font-size: 18px;
                            transition: 0.6s ease;
                            border-radius: 0 3px 3px 0;
                            user-select: none;
                        }

                        .next {
                            right: 0;
                            border-radius: 3px 0 0 3px;                            
                        }

                        .prev:hover, .next:hover {
                            background-color: grey;
                        }

                        .text {
                            color: #000000;
                            font-size: 15px;
                            padding: 8px 12px;
                            position: absolute;
                            bottom: 8px;
                            width: 100%;
                            text-align: center;
                          }

                          .numbertext {
                            color: #000000;
                            font-size: 12px;
                            padding: 8px 12px;
                            position: absolute;
                          }

                        .dot {
                            cursor: pointer;
                            height: 15px;
                            width: 15px;
                            margin: 0 2px;
                            background-color: #bbb;
                            border-radius: 50%;
                            display: inline-block;
                            transition: background-color 0.6s ease;
                          }

                          .active, .dot:hover {
                            background-color: #717171;
                          }
                          
                          /* Fading animation */
                          .fade {
                            animation-name: fade;
                            animation-duration: 1.5s;
                          }
                          
                          @keyframes fade {
                            from {opacity: .4} 
                            to {opacity: 1}
                          }

        #section-4 { /*   Enterprise   */
            height: auto;
        }
            #section-4 hr {
                width: 80%;
            }
            .section-enterprise {
                display: flex;
                justify-content: space-around;
                background-color: white;                 
                height: 15%;          
            }
                .section-enterprise > h3 {                
                    margin: auto 0rem;
                    font-size: 400%;
                }
    
                .section-enterprise > p {                
                    margin: 0rem;
                    color: white;
                    position: absolute;
                    right: 10%;                
                }
            
            .enterprise-description {
                width: 80%;
                margin: auto;
            }

            .enterprise-description .grid {
                margin: 0rem auto 2rem auto;
            }
                .enterprise-description h2 {
                    margin: 5rem auto 0rem auto;
                    text-align: center
                }

                .enterprise-description p {
                    margin-left: 1rem;
                    text-align: center
                } 
            .resume {
                height: 297mm;
                width: 210mm;
                background-color: white;
                border: 1px solid grey;
                margin: 1rem auto;
            }

                .download-box {            
                    display: flex;
                    justify-content:flex-start;
                    height: 3rem;
                    width: 100%;
                    background-image: url(/media/theme/bkg.png);
                    background-position: center;
                    background-repeat: none;
                    background-size: cover;
                }
                    .fa-download {
                        margin: 1rem;
                        color: rgb(255, 254, 254);
                    }   
                        .download-text {
                            display: none;                 
                            
                        }
                            .fa-download:hover {
                                color: rgb(5, 143, 255);
                            }
                            .download-link:hover + .download-text{
                                display: block;
                                text-decoration: none;
                                color: white;
                                padding: 0.2rem;
                                font-size: 12px;                            
                            }
              

                    .photo-name .grid {
                        grid-template-columns: 1fr 2fr;
                        margin: 2rem auto;
                        padding: 0;
                    }

                    .photo-name img {
                        width: 15rem;
                        border-radius: 10%;
                    }
                    
                    .photo-name h1 {
                        font-size: 40px;
                    }

                    .photo-name h4, h1 {
                        padding-left: 1rem;
                        margin: auto;
                        text-align: right;
                    }

                    .photo-name p{
                        margin: 2rem 1rem;
                        text-align: justify;
                        font-size: 12px;
                    }
                    
                .skills {
                    width: 80%;
                    margin: auto;
                }
                    .skills .grid {
                        grid-template-columns: 1fr 1fr 1fr 1fr;
                        margin: auto;
                        text-align: center;
                        width: 100%;
                        padding-bottom: 0;
                    }
                    .skills h5 {
                        margin: auto;
                    }
                    .skills p {
                        font-size: 12px;
                        margin-left: 1rem;                        
                    }
                
                .resume-contact {                         
                    font-size: 12px;
                    width: 90%;
                }
                                       
                    .resume-contact i{
                        margin: 0.5rem;
                    }
                    .resume-contact a {
                        text-decoration: none;
                        color: black;
                    }
                
                .resume-body {
                    display: grid;
                    grid-template-columns: 1fr 2fr;
                    width: 80%;
                    margin: auto;
                }   
                    .resume-body p {
                        font-size: 12px;
                    }   
                    
                        .exp {
                            padding-left: 1rem;
                        }
                
                    .resume-body ul {
                        list-style:none;
                        font-size: 15px;
                        padding: 0;
                    }
                    
        #section-10 {
            background-image:url(/media/theme/bkg.png);
            background-size: cover;
            padding: 1rem 0rem;
        }
        
            #section-10 > div{
                display: grid;
                grid-template-columns: 1fr 1fr;
                width: 80%;
                color: white;
                margin: auto;
            }
                #section-10 a {
                    color: inherit;
                    text-decoration: none;
                }

                .social-icons {
                    font-size: 2rem;
                    margin: auto; 
                }

                .connect {
                    display: flex;                
                    flex-direction: column;
                    font-size: 1.4rem;
                }   
                    .connect > h3 {
                        font-size: 3rem;
                    }
                    .connect i {
                        line-height: 1.8rem;
                    }



/*   MEDIAQUERY <   */

/*   SmallScreen   */

@media (max-width:1000px) {



    #navigation-box {
        flex-direction: column-reverse;
        width: 90%;
    }
        #navigation-box p {
            margin: 3rem 0rem;
            font-size: 1rem;
        } 

    .fullscreen {
        height: auto;
    }

    #video-container {
        padding: 5rem;
    }
}

@media (max-width:930px) {

    #section-0 img {
        width: 70%;
        margin-bottom: 2rem;
    }

    #section-0 h1{
        font-size: 1.5rem;
    }

    #section-0 h4{
        font-size: 1rem;
    }

    #section-0 p {
        font-size: 12px;
    }

    .section-header > p {   
        right: 10%;  
        top: 60%;
        font-size: 20px;            
    }

    .section-header h3 {
        font-size: 30px;
        position: relative;
        left: -10%;
    }

    .fullscreen {
        height: auto;
    }

    #video-container {
        padding: 5rem;
    }
    #section-1 .grid {
        grid-template-columns: 1fr 1fr;
        width: 80%;
    }

    .resume {
        height: 297mm;
        width: 100%;
        background-color: white;
        border: none;
        margin: 1rem auto;
    }        
}

@media (max-width:710px) {

    #hamburger-container {
        top: 0%;
    }   


    #section-0 h1{
        font-size: 1rem;
    }

    #section-0 h4{
        font-size: 0.5rem;
    }

    #section-0 p {
        font-size: 0.5rem;
    }

    .section-header > p {   
        right: 15%;  
        top: 60%;
        font-size: 20px;            
    }

    .section-header h3 {
        font-size: 30px;
        position: relative;
        left: -10%;
    }

    #section-1 .grid {
        grid-template-columns: 1fr 1fr;

    }

    #section-1 > .enterprise-description {
        gap: 2rem;
        margin-top: 2rem;

    }

    .short-desc {
        margin-bottom: 1rem;
    }

}

@media (max-width:630px) {

    #section-0 {
        height: 35rem;
    }

    #section-0 img {
        width: 50%;
        margin: auto;
    }

    #section-0 h1{
        font-size: 0.8rem;
        margin-top: 1rem;
    }

    #section-0 h4{
        font-size: 0.5rem;        
    }

    #section-0 p {
        font-size: 0.5rem;
        margin: 0.2rem 1rem;
    }   


    .section-header > p {   
        right: 15%;  
        top: 90%;
        font-size: 20px;            
    }

    .section-header > h3 {
        font-size: 20px;
        position: absolute;
        left: 15%;  
    }

    .resume .photo-name .grid {
        grid-template-columns: 1fr;
    }

        .photo-name h1 {
            font-size: 30px;
            margin-left: 0rem;
            margin-right: 1rem;
        }
        .photo-name h4 {
            margin-right: 2rem
        }
    .resume {
        border: none;
        margin: auto 0.5rem;
        width: 90%;
        height: auto;
    }

    #section-1 .grid {
        grid-template-columns: 1fr;
        gap: 0rem;
        margin-right: 1rem;
    }

    .skills .grid {
        grid-template-columns: 1fr 1fr;
    }

    ul {
        margin-right: 1rem;
    }

    .connect h3 {
        font-size: 2rem;
    }
   
    .connect i {
        font-size: 0.8rem;
        padding: none;
    }

    .social-icons i {
        font-size: 1.5rem;
    }

    video {
        width: 100%;            
    }
    .social-icons {
        display: flex;
        flex-direction: column;
    }

    #section-10 > div{
        grid-template-columns: 2fr 1fr;
    }

    .download-box {
        width: 100%;
    }
}

@media (max-width:400px) {

    .photo-name .grid {
        grid-template-columns: 1fr;
    }

    #section-1 .grid {
        margin: 1rem;       
    }

    .section-header p {
        top: 95%;
    }
}

/*   MEDIAQUERY >   */