body {
    background-color:rgb(242, 242, 242);
    margin-top: 2%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100vw;

    margin: 0px;
    z-index: -200;
}

#underName {
    letter-spacing: 3px;
    font-family: "cooper-black-std", serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    letter-spacing: 10px;
    font-size: 4em;
    font-size: 3.5em;
    padding-top: 17vh; 
    color:#747474;
}

#footer{
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 2px;
}

#navigateWork {
    font-size: 13px;
    letter-spacing: 2px;
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
    position: relative;
    padding-bottom: -20px;
    line-height: 0px;
    text-align: left;
    color:#747474;
}
#featured {
    font-size: 11px;
    letter-spacing: 2px;
    font-family: rubik, sans-serif;
    font-weight: 200;
    font-style: normal;
    position: relative;
    padding-bottom: -20px;
    line-height: 0px;
    text-align: left;
    color:#747474;
}

.my-element {
    display: inline-block;
    animation: animate__fadeIn;
    animation-duration: 5s;
}

#texts {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

#homeIcon {
    padding-bottom: 5px;
    margin-top: 20px;
    margin-left: 3%;
    position: fixed;
    width:50px;
    display: inline-block;
    vertical-align: middle;
}

#homeLink {
    text-decoration: line-through;
    display: inline;
}

#hyphenOne {
    color: rgb(47, 47, 47);
    display: inline-block;
}

#hyphen {
    color: rgb(58, 58, 58);
    display: inline-block;
    padding: 7px;
}

li {
    display: inline-block;
    text-align: center;
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#head {
    float: right;
    margin-right: 3%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

a {
    color:#605f5f;
    text-decoration: none;
    display: inline-block;
}

a:hover {
    cursor: pointer;
    -webkit-transition: color .2s ease-out;
    -moz-transition: color .2s ease-out;
    -o-transition: color .2s ease-out;
    transition: color .2s ease-out;
}

h1 {
    text-align: center;
    font-size: 20px;
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
    letter-spacing: 10px;
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
}

h2 {
    color: rgb(74, 74, 74);
    font-size: 12px;
    position: relative;
}

#footer {
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8px;
    letter-spacing: 1px;
    color: rgb(74, 74, 74);
    font-size: 13px;
    z-index: 20000;
}

h6 {
    color:#747474;
    font-size: 10px;
}

#bottomLinks {
    word-spacing: 10px;
}

a {
    display: inline;
    padding: 7px;
    margin: -7px;
}

#linkClickable {
    display: inline;
}




@media(max-width:500px) {
  
    body{
        overflow-x: hidden;   
    }
 
    .back-to-top-link {
        color: white;
        letter-spacing: 3px;
        font-size: 13px;
        display: table;
        padding-bottom: 100px;
        margin-bottom: -40px;
        width: 5px;
        visibility: hidden;
    }

    .titleWork{
        white-space: nowrap;
         /* user-select: none; */
    }
  

    .descriptName{
        white-space: nowrap;
    }
    #footer{
        margin-bottom: 50px;
    }

    #underName {
    letter-spacing: 3px;
    font-family: "cooper-black-std", serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    letter-spacing: 10px;
    /* font-size: 80px; */
    color:#747474;
}
}

@media(max-width:1000px),
(max-height:500px) {
    #nameTitle {
        top: 50%;
    }
    body{
        overflow-x: hidden;
    }

    h1 {
        top: 30%;
        font-size: 17px;
        white-space: nowrap;
    }
    h2 {
        white-space: nowrap;
        font-size: 12px;
        display: inline;
        letter-spacing: 5px;
    }
    #divideLine {
        color: rgb(55, 55, 55);
    }
    #bottomLinks {
        white-space: nowrap;
        top: 90%;
    }
    body {
        margin-left: 10px;
        margin-bottom: 2px;
    }
    #footer {
        bottom: 0px;
        width: 100%;
        text-align: center;
        text-align: center;
        font-size: 13px;
    }
    #bottomLinks {
        word-spacing: 10px;
    }
    p {
        color: rgb(179, 179, 179);
    }
}

@media (min-width: 500px)
 {
    h1 {
        white-space: nowrap;
    }

    .menu-wrap .menu {
        position: fixed;
        top: -50%;
        left: 30%;
        width: 80%;
        height: 14%;
        visibility: hidden;
        overflow: hidden;
        display: block;
        align-items: center;
        justify-content: center;
    }

    h2 {
        display: inline;
        letter-spacing: 7px;
    }
    #divideLine {
        color: rgb(85, 85, 85);
        margin-right: 1%;
        margin-left: 1%;
    }
    #footer {

        bottom: 0;
        width: 100%
    }
    .titleWork{
        line-height: 3vw;
        font-size: 1vw;
    }
}


.menu {
    text-align: right;
    font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
}

.btn {
    display: inline-block;
    border: none;
    background: var(--primary-color);
    color: #fff;
    margin-top: 1rem;
    transition: opacity 1s ease-in-out;
    text-decoration: none;
}

.text {
    text-align: right;
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
    letter-spacing: 10px;
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 5px;
}

.btn:hover {
    opacity: 0.7;
}


#margined {
    margin-left: 15%;
    margin-right: 15%;
}

.shortBio {
    color: rgb(97, 95, 95);
    letter-spacing: 2px;
    z-index: 20;
}

#bioBody {

    font-family: jubilat,serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 2px;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    width: 925px;
    color:#747474;
    font-family: "proxima-nova", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.01em;
}


summary {
    display: flex;
    /* cursor: pointer; */
}

summary::-webkit-details-marker {
    display: none;
}
/* collapsible end */
#expandResume {
    font-size: 15px;
}

#addSpaceAbout {
    padding-top: 5%;
}

    
    summary {
        font-size: 25px;
        color: rgb(121, 121, 121);
        font-family: rubik, sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    #miniHeader {
        color: rgba(104, 115, 119, 10);
        font-size: 16px;
        font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;;
    }
    
    #miniHeader2 {
        color: rgba(104, 115, 119, 10);
        font-size: 15px;
        font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 2px;
    }

    h3 {
        display: inline;
        text-align: left;
    }


    /* skill */
    
    li {
        /*style the li tag*/
        list-style-type: none;
        font-family: sans-serif;
        letter-spacing: 1px;
        font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;

    }

     /* back to top */
    
     .back-to-top-link {
        color: white;
        letter-spacing: 3px;
        font-family: magneta, serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        display: table;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 15px;
    }
  
    @media screen and (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }
    

    
    html,
    body {
        max-width: 100%;
    }

    h5 {
        font-family: magneta, serif;
        font-weight: 400;
        font-style: normal;
        line-height: 25px;
        display: inline-block;
        text-align: right;
        margin-left: 60%;
    }


    #ctt {
        margin-left: 10%;
    }
    
    #sectionHead {
        text-align: left;
    }

    col #exit {
        margin-left: 3%;
    }

    li {

        list-style-type: none;
        font-family: sans-serif;
        letter-spacing: 1px;
        font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
    }
    
    

    a.bottom:before {
        content: "";
        position: absolute;
        width: 90%;
        height: 5;
        bottom: 0;
        left: 0;
        transition: all .3s ease-in-out;
    }
    
    a.bottom:hover:before {
        visibility: visible;
        height: 1.5px;
        width: 30px;
    }

    .titleWork {
        font-size: 17px;
        letter-spacing: 4px;
    font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
        position: relative;
        padding-bottom: -20px;
        line-height: 0px;
        z-index: 60;
    }

    sup {
        color: rgba(104, 115, 119, 255);
        color: #9786a0;
        /* ACCENT COLOR */
        /* color:#A9A193; */
    }

    .descriptName {
        font-size: 12px;
        margin-left: 35px;
        color: rgb(28, 28, 28);
        font-family: jubilat-thin,serif;
        font-weight: 200;
        font-style: normal;
        letter-spacing: 2px;
    }

    .item {
        display: inline;
    }
    
    .item::after {
        content: "\a";
        white-space: pre;
    }


    button {
        background: transparent;
        color:#4d4d4d;
        text-shadow: 0px 0px 0px transparent;
    } 

    @media screen and (max-width: 1350px){
        #margined{
            margin-left: 15%;
            margin-right: 15%;  
        }

        #underName{
            letter-spacing: 1px;
            /* font-size: 10vw; */
        }
        
        #bioBody{

            width: 95%;
        }

        .titleWork{ 
            font-size: 14px;
            letter-spacing: 3px;
            font-family: "agenda", sans-serif;
            font-weight: 500;
            font-style: normal;
            position: relative;
            padding-bottom: -20px;
            line-height: 0px;
            z-index: 60;
            
        }

       

        .descriptName{
            font-size: 11.5px;
            color: rgb(28, 28, 28);
            font-family: jubilat-thin,serif;
            font-weight: 200;
            font-style: normal;
            letter-spacing: 2px;  
        }

        button{
        font-size: 11px;
        padding: 5px;
        margin-left: 5px;
        margin-top: 20px;
    } 
 }



#divideTab {
    padding-right: 4em;
    padding-left: 4em;
    font-size: .9em;
    cursor: default;
    align-items: center;
    vertical-align: middle;
}

.my-element {
    display: inline-block;
    animation: animate__fadeIn;
    animation-duration: 5s;
}


#texts {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}


ul {
    display: inline-block;
}

li {
    display: inline-block;
    text-align: center;
    font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
}

li {
    float: left;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

#sideLinks {
    text-align: right;
    right: 80%;
    display: inline;
    margin-right: 2vw;
    position: absolute;
    right: 0;
    -webkit-transform-origin: left top;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    position: fixed;
    background: #4c4c4c;
}

ul.sideNav li {
    margin-right: 20px;
    float: right;
    height: 100%;
    line-height: 45px;
}


a:hover {
    /* cursor: pointer; */
    -webkit-transition: color .2s ease-out;
    -moz-transition: color .2s ease-out;
    -o-transition: color .2s ease-out;
    transition: color .2s ease-out;
}



h6 {
    color: rgb(74, 74, 74);
    font-size: 10px;
}


a {
    color:#605f5f;
    text-decoration: none;
    display: inline-block;
    display: inline;
    padding: 7px;
    margin: -7px;
}

.menuLinks {
    font-size: 20px;
    padding-bottom: 20px;
    text-shadow: 0px 1px 2px rgb(237, 237, 237);
}


.projectName{
    color:#626262;
}


@media(max-width:1000px),

(max-height:500px) {
    #nameTitle {
        top: 50%;
        height: .2vh;
        font-size: .4vw;
    }
.text{
    margin-bottom: .8vh;
}

    
    #divideLine {
        color:#747474;
        font-family: jubilat-thin,serif;
        font-weight: 200;
        font-style: normal;
    }
    ul{
        margin-right: 2rem;
    }
}

@media (min-width: 500px)
{
    h1 {
        white-space: nowrap; 
    }
    .menu-wrap .menu {
        left: 30%;
        width: 80%;
        height: 14%;
        visibility: hidden;
        overflow: hidden;

        display: flex;

        align-items: center;
        justify-content: center;
    }
    
    #divideLine {
        color:#747474;
        margin-right: 1%;
        margin-left: 1%;
        font-family: rubik, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 9.5px;
    }
}

@media (max-width: 500px){ 


    #margined{
        margin-left: 7.5%;
        margin-right: 7.5%;  
    }

    /* #divideTab {
      display: none;
    } */

    .menuLinks {
        font-size: 3.5vw;
        margin-right: 3vw;   
    }

    ul{
        margin-right: 1rem;
    }  
    body{
    overflow-x: hidden;
    }   
}

a.bottom {
    position: relative;
}

a.bottom:hover:before {
    visibility: visible;
    visibility: hidden;
    height: 1.5px;
    width: 20%;
}

.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */

.dropdown .dropbtn {
    font-size: 15px;
    border: none;
    outline: none;
    background-color: inherit;
    font-family: inherit;
}

/* Add a red background color to navbar links on hover */

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 1;
}



.dropdown:hover .dropdown-content {
    display: block;
}

:root {
    --menu-speed: 0.75s;
}


.btn {
    display: inline-block;
    border: none;
    background: var(--primary-color);
    color: #fff;
    margin-top: 1rem;
    transition: opacity 1s ease-in-out;
    text-decoration: none;
}

.text {
    text-align: right;
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
    letter-spacing: 10px;
    font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
    font-size: 5px;
}

.btn:hover {
    opacity: 0.7;
}




body {

    overflow-x: hidden;

}
@media (max-width: 1000px)
 {
     #underName{
        padding-top: 80px;
    
    }
 }



 @media (min-width: 1070px) {

    .menu-wrap{display: none;}
    .menu-wrap2{
        text-align: right;
        margin-right: 10vw;
}
#large{
    vertical-align: middle;
    width: 100vw; 
}
    #divideTab {
        padding-right: 2em;
        padding-left: 2em;
        font-size: .1em;
        cursor: default;
    }
 li {
        font-size: 14px;
        padding-bottom: 20px;
        text-shadow: 0px 1px 2px rgb(237, 237, 237);
        text-align: center;
        line-height: 1px;
        position: relative;
        font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
        color:#747474;
        padding-left: 10px;
        padding-right: 10px;
        list-style-type: none;
        letter-spacing: 4px;
    }
  }

@media (max-width: 1070px) {
    #homeIcon{
        position: relative;
    }
    #underName{ 
        padding-top: 17vh; 
    }
    .menu-wrap2{
        text-align: right;
        margin-right: 10vw;
}

    /* li{
        padding-left: 3em;
        padding-right: 3em;
        
    
    } */
  
    #menuLinks{
        font-size: 17px;
    }
}
#one{
    margin-right: 1.75px;
}



#underName2{
    /* font-size: 1.75em; */
    font-weight: 300;
    font-style: normal; 
    /* font-family: "agenda", sans-serif; */
    font-weight: 500;
    font-style: normal;
    margin-top: -35px;
    color: rgb(121, 121, 121); 
    /* margin-left: 10; */

}
u{
    border-bottom: 1px dotted #000;
    text-decoration: none;
}

button{ 
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.03em;
}
.projectName{
    font-size: 1.03em; 
    font-family: "agenda", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.descriptName{
    margin-left: 2.5em;
    font-family: "agenda", sans-serif;
    font-weight: 300;
    font-style: normal;  
}
li{      font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;}

    #background{
        width: 90%;
        background-color: white;
        padding-left: 5%;
        border-radius:10px;
        border-radius:10px;
        box-shadow: 10px 10px 10px rgb(223, 223, 223);
        box-shadow: 10px -10px -10px rgba(113, 106, 172, .9); 
        margin-bottom: 3em;
        backdrop-filter: blur( 2px );
    background: rgba( 255, 255, 255, 0.35 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 1px );

    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 0px solid rgba( 255, 255, 255, 0.18 );
    }

  /* updated menu */
  body {
    background-color:rgb(242, 242, 242);
    margin-top: 2%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100vw;
}

#homeIcon {
    padding-bottom: 5px;
    margin-top: 20px;
    margin-left: 3%;
    position:fixed;
    width:50px;
    display: inline-block;
    vertical-align: middle;
}

#homeLink {
    text-decoration: line-through;
    display: inline;
}

.hyphen {
    color: rgb(58, 58, 58);
    display: inline-block;
    padding: 7px;
}


li {
    display: inline-block;
    text-align: center;
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
    /* float: left; */
    vertical-align: middle;
    text-align: center;
}


#sideLinks {
    text-align: right;
    right: 80%;
    display: inline;
    margin-right: 2vw;
    right: 0;
    -webkit-transform-origin: left top;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    position: fixed;
    background: #4c4c4c;
}



li {
    list-style-type: none;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
}


a {
    display: inline;
    padding: 7px;
    margin: -7px;
    
}


@media(min-width:800px) {


    #divideLine {
        color: rgb(55, 55, 55);
        
    }
 
}


@media (max-width: 1050px)
 {


    #margined {
    
        margin-left: 15%;
        margin-right: 15%;
        margin-left: 40%;
        margin-right: 40%;
    }

}




#margined {
 
    margin-left: 15%;
    margin-right: 10%;  
}

 /* Fix nav */
 #divideTab {
    padding-right: 4em;
    padding-left: 4em;
    font-size: .9em;
    cursor: default;
    align-items: center;
    vertical-align: middle;
}



ul {
    display: inline-block;
}

li {

    list-style-type: none;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-family: "agenda", sans-serif;
    font-weight: 500;
    font-style: normal;
}

a:hover {
    /* cursor: pointer; */
    -webkit-transition: color .2s ease-out;
    -moz-transition: color .2s ease-out;
    -o-transition: color .2s ease-out;
    transition: color .2s ease-out;
}

a {
    display: inline;
    padding: 7px;
    margin: -7px;
    color:#605f5f;
    text-decoration: none;
    display: inline-block;
}

.menuLinks {
    font-size: 20px;
    padding-bottom: 20px;
    text-shadow: 0px 1px 2px rgb(237, 237, 237);
}


@media(max-width:1000px),

(max-height:500px) {
    #nameTitle {
        top: 50%;
        height: .2vh;
        font-size: .4vw;
  
    }

    #divideLine {
        color:#747474;
        font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
    }
    ul{
        margin-right: 2rem;
    }
    #margined{
        margin-left: 15%;
        margin-right: 15%;  
    }
    #underName {
        letter-spacing: 3px;
        /* font-family: "agenda", sans-serif; */
        font-weight: 500;
        font-style: normal;
        position: relative;
        /* font-size: 5em; */
        padding-top: 100px;
        color:#747474;  
    }
}

@media (min-width: 500px)
{
    h1 {
        white-space: nowrap; 
    }

    #divideLine {
        color:#747474;
        margin-right: 1%;
        margin-left: 1%;
        font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 9.5px;
    }
}

@media (max-width: 500px) {


    .containerContact{
        width: 90%;
        margin-left: 5%;}

    #margined{
        margin-left: 7.5%;
        margin-right: 7.5%;     
    }

  
    #footer{
        margin-bottom: 50px;
        position: relative; 
    }
    

  

    /* #divideTab {
      display: none;
    } */


    ul{
        margin-right: 1rem;
    }

}


@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
  

}


@media (min-width: 1070px) {
    .containerContact{
        width: 60%;
margin: auto;
 
    }
    .menu-wrap2{
        text-align: right;
        margin-right: 10vw;

}

    #divideTab {
        padding-right: 2em;
        padding-left: 2em;
        padding-right: 4em;
        padding-left: 4em;
        font-size: .1em;
        cursor: default;
    }

 li {
        font-size: 14px;
        padding-bottom: 20px;
        text-shadow: 0px 1px 2px rgb(237, 237, 237);
        text-align: center;
        line-height: 1px;
        position: relative;
        font-family: "agenda", sans-serif;
        font-weight: 500;
        font-style: normal;
        color:#747474;
        padding-left: 10px;
        padding-right: 10px;
        letter-spacing: 4px;
        list-style-type: none;
    }
 
  }


@media (max-width: 1070px) {
    .containerContact{
        width: 90%;
        margin-left: 5%;}

#homeIcon {
    position: absolute;
    width:50px;
}


    
    .m2{display: none;visibility:hidden;}
    

}


@media screen and (max-height:900px){
    .footer{position: relative;
    }
}
u{
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

   .menu-wrap2{
        text-align: right;
        margin-right: 10vw;
}
body{
    overflow-x: hidden;
}