@import url("https://use.typekit.net/sry2ovl.css");

html {
    background: #FFF;
    -webkit-font-smoothing: antialiased;
}

/*
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
*/

/* ----------------------------- */
a {
    text-decoration: none;
    color: #000;
}


a hover, a active{
    color: #808080;
}

/* ----------------------------------------------------------------*/

/*https://www.w3schools.com/howto/howto_js_curtain_menu.asp 
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */

.openNav-icon {
    z-index: 104;
}

.overlay, .overlay-content, p.overlay {
    z-index: 105;
}


.closebtn {
    z-index: 106;
}

        .openNav-icon{
            position: -webkit-sticky;
            position: sticky;
            background-color: none;
            
            color: #0e4afb;
            text-align: right;
            position: absolute;
            top: 40px;
            right: 52px;

        }

        .overlay {
            height: 0%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: linear-gradient(#0e4afb,#f4d3df);
            overflow-y: hidden;
            transition: 0.5s;
        }

        .overlay-content {
            position: relative;
            top: 25%;
            width: 100%;
            text-align: center;
            margin-top: 30px;
        }

        .overlay a {
            padding: 8px;
            text-decoration: none;
            font-size: 250%;
            color: #fff;
            font-family: neuzeit-grotesk, sans-serif;
            font-style: normal;
            font-weight: 600;
            display: block;
            transition: 0.3s;
        }

        p.overlay {
            padding: 8px;
            text-decoration: none;
            font-size: 250%;
            color: #fff;
            font-family: neuzeit-grotesk, sans-serif;
            font-style: normal;
            font-weight: 600;
            display: block;
            transition: 0.3s;
        }

        .overlay a:hover, .overlay a:focus {
            color: #fff;
            text-decoration: underline
        }
        
        /* CLOSING BUTTON */
        .overlay .closebtn {
            position: absolute;
            top: 20px;
            right: 45px;
            font-size: 60px;
        }

        @media screen and (max-height: 450px) {
          .overlay {overflow-y: auto;}
          .overlay a {font-size: 20px}
          .overlay .closebtn {
            font-size: 40px;
            top: 15px;
            right: 35px;
          }
        }



/* PAGE BORDER */
    #left, #right {
        background: linear-gradient(#0e4afb,#f4d3df);
        position: fixed;
        top: 0; bottom: 0;
        width: 15px;
        }
        #left { left: 0; }
        #right { right: 0; }

    #top {
        background: #0e4afb;
        position: fixed;
        left: 0; right: 0;
        top:0;
        height: 15px;
        }

    #bottom {
        background: #f4d3df;
        position: fixed;
        left: 0; right: 0;
        bottom:0;
        height: 15px;
        }

    #left, #right, #top, #bottom {
        z-index: 103;
        } 



/* ----------------------------------------------------------------*/
/* LOGO */
.name {
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    font-size: 200%;
    letter-spacing: 0.1em;
    margin-top: 5em;
    margin-bottom: 0em;
}

.name-2 {
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: #808080;
    font-size: 150%;
    letter-spacing: 0.05em;
    margin-bottom: 0em;
    }

.name-3 {
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #808080;
    font-size: 120%;
    letter-spacing: 0em;
    margin-bottom: 0em;
}


/* md */
@media screen and (max-width: 922px) {
    .name {
        font-size: 160%;
    }
    
    .name-2 {
        letter-spacing: 0.1em;
        font-size: 120%;
    }
    
    .name-3 {
        letter-spacing: 0.1em;
        font-size: 100%;
    }
}

/* ----------------------------------------------------------------*/

/* CONTENT */

body{
    text-align: left;
    font-size: 10px;
    color: #000;
    font-family: neuzeit-grotesk, sans-serif;
    
    cursor: crosshair;
    
    width: 90%;
    max-width: 1200px;
    clear: both;
    margin: 0 auto;
    padding-left: 0%;
    }

@media only screen and (min-width:150px) and (max-width:600px)
{
    body{
        margin:0 auto;
        width:95%;
        clear:both;
    }
  

p {
    font-family: neuzeit-grotesk, sans-serif;
    font-style: normal;
}

.container {
    max-width: 90%;
	height: auto;
    margin-left: auto;
    margin-right: auto;
}







/* LINKS HOVER */
a:hover {
    text-decoration: none;
    color: #0e4afb;
}
    
    

/* ----------------------------------------------------------------*/
/* -- Footer info --*/

.footer-project-pt {
    color: black;
    font-style: normal;
    font-weight: 600;
    font-size: 200%;
    letter-spacing: 0.1em;
    line-height: 1;
}

.footer-back-to-menu {
    color: #808080;
    font-style: normal;
    font-weight: 600;
    font-size: 150%;
    letter-spacing: 0.1em;
    line-height: 1;
}





 .me-detail-1{
    color: black;
    font-style: normal;
    font-weight: 600;
    font-size: 150%;
    letter-spacing: 0.1em;
    line-height: 70%;
    margin-bottom: 1%;
}

 .me-detail-2{
    color: black;
    font-style: normal;
    font-weight: 300;
    font-size: 120%;
    letter-spacing: 0.05em;
    line-height: 130%;
}


.footer-info:hover a {
    text-decoration: underline;
    color:#000;
    }