@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');
/****************************************************************************/
/********************************    BODY    ********************************/
/****************************************************************************/
html, body {
    overflow-y: hidden;
    overflow: hidden;
}
/*  body aspects */
body{
    z-index:-800;
    font-family: "Noto Serif", serif;
}
body.is-dark {
    background-color: black;
    color:wheat;
}
body.is-light{
    background-color: wheat;
    color:black;
}

/****************************************************************************/
/*****************************    OUTTER FRAME   ****************************/
/****************************************************************************/
#outterFrame {
    width:100%;
    height:100%;
    /*  background-color:#222831;*/
    
    z-index:-9999;
}
#outterFrame.is-dark {
    background-color: black;
    color:wheat;
}
#outterFrame.is-light {
    background-color: wheat;
    color:black;
}
#outterFrame * {
    position: fixed;
    border-color:black;
}
#outterFrame  .VL {
    border-left: 0.1vw solid;
    height: 50vh;
}
#outterFrame .HL {
    border-top: 0.1vw solid;
    width: 55vw;
}
#outterFrame .left {
    top: 10px;
    left: 50px;
}
#outterFrame  .right {
    bottom:10px;
    right:50px;
}
#outterFrame  .top {
    top: 50px;
    left: 10px;
}
#outterFrame  .bottom {
    bottom: 50px;
    right: 10px;
}

/****************************************************************************/
/*****************************    INNER FRAME   *****************************/
/****************************************************************************/
#innerFrame {
    /* almost black colors : 
    #2d2d2d;;
    #090909;
    z-index:200;
    */
    /* color:wheat; */
    z-index:200;
    position: fixed;
    top : 51px;
    left : 51px;
    bottom:51px;
    right: 51px;
    /* margin:4vw; */
    padding :2vw;
}
#innerFrame.is-dark {
    background-color: #111111;
    color:wheat;
}
#innerFrame.is-light {
    background-color: wheat;
    color:black;
}

/****************************************************************************/
/********************************  HEADERS   ********************************/
/****************************************************************************/
/* header to skip intro */
header#headerSkipIntro {
    transform: rotate(90deg);
    position:fixed;
    top:118px;
    right:-35px;
    width:150px;
}

fieldset#fieldsetSkipIntro{
    width: fit-content;
    display:flex;
    align-items: center;
    vertical-align: middle;
    width: fit-content;
 }
 fieldset#fieldsetSkipIntro label{
   display:block;
   width:fit-content;
}
fieldset#fieldsetSkipIntro input {
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border-radius: 4px;
    /* outline: none; */
    transition-duration: 0.3s;
    background-color: wheat;
    cursor: pointer;
  }

body.is-light fieldset#fieldsetSkipIntro input {
    border: 1px solid #111111;
    color: wheat;
}
 body.is-dark fieldset#fieldsetSkipIntro input {
    border: 1px solid wheat;
    color:black;
  }

fieldset#fieldsetSkipIntro  input:checked {
  background-color:  	black;
  backdrop-filter: blur(10px);
 }


/* options HEADER */
header#optionsHeader {
    display:inline-block;
    top:10px;
    right:50px;
    height:41px;
    /* top: 1.5vw;
    right:3vw; */
    /* height:1.5vw; */
    width:40%;
    position: fixed;
}
/* custom light/dark radio buttons */
input[type="radio"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;
}
body.is-dark input[type="radio"] {
    background-color:inherit;
}
body.is-light input[type="radio"] {
    background-color: inherit;
}
fieldset {
    margin:0;
    padding:0;
    border:none;
    padding:0;
    display:flex;
    align-content: center;
    width: 50px;
}
fieldset.inlineButton input + label  {
    display:flex;
}
fieldset.inlineButton input[checked="true"]  + label,
fieldset.inlineButton input[checked="true"]  {
    display:none;
}
fieldset#radioLanguage {
    margin-right:20px;
}
fieldset.inlineButton label {
    width:35px;
    height:35px;
    cursor:pointer;
    /* margin:auto; */
    text-align:center;
    align-items: center;
} 

[role="radio"] {
    cursor:pointer;
}
/* SVG sun */

header#navHeader {
    z-index:900;
    font-size:1.4em;
}
/*  Site HEADER  */
header#siteHeader {
    width:100%;
    z-index:900;

}

/*  site title  */
h1#siteTitle {
    font-weight: 400;
    width:fit-content;
    position:inherit;
    margin:0;
    font-family:"Bruno Ace", sans-serif;
    font-size:3em;
    width:100%;
}

/*  options nav  */
nav#optionsNav { 
    position:inherit;
    height:inherit;
    width:inherit;
    display:flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content: right;  
    margin:auto;
}


/*  left Nav  */
nav#leftNav {
    width:fit-content;
}
nav#leftNav ul {
    margin-top:5vh;
    list-style-type: none;
    padding-left: 0;
}
nav#leftNav li {
    font-weight: 600;
    padding-bottom:0.5vh;
    transition: font-size 3s;
    transition: padding-left 1s;
    cursor:pointer;
    padding:1vh 0 1vh 0;

}
nav#leftNav li:hover, nav#leftNav li.active  {
    font-size: 1.5em;
    padding-left:1vw;
}
/* hides legend except for assistive technologies */
.visuallyHidden  {
    position: fixed !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
    z-index:-600000;
}

label#labelSkipIntro {
    cursor:pointer;
}

/****************************************************************************/
/********************************    MAIN    ********************************/
/****************************************************************************/
main {
    position:absolute;
    /* position:relative; */
    top: 20vh;
    left:35vw;
    right:5vw;
    bottom:5vh;
    z-index:7;
    overflow-y: scroll;
}
html#home main::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
html#home main {
    -ms-overflow-style: none;  /* IE and Edge */
    /* scrollbar-width: none;  Firefox */
  }
.sectionPage {
    position:relative;
    left:10vh;
    overflow-y: scroll;
    height:80%;
    width:100%;
}

#mainDiv {
    position:relative;
    /* left:10vw; */
    width:100%;
    opacity:0.8;
    height:100%;
    text-align:left;
    /* font-size:1.5em; */
    font-size:large;
}

a {
    color:inherit;
    text-decoration:none;
}
a:hover {
    opacity:0.7;
}
a:visited {
    color:inherit;
}

/****************************************************************************/
/********************************    HOME    ********************************/
/****************************************************************************/

div.home {
    
    font-family:"Bruno Ace", sans-serif;
    font-weight:600;

    /* font-family: "Noto Sans", sans-serif;     */
    /* font-style:italic; */
}
div.home p {
    font-size:1.5em;
}
/****************************************************************************/
/********************************     BIO    ********************************/
/****************************************************************************/


img#bioPortrait {
    max-height: 30vh;
    float:left;
    margin: 0 2vw 2vh 0 ;
    border-radius: 10px;
}
/****************************************************************************/
/********************************     ABOUT    ********************************/
/****************************************************************************/

div.about a, div.bio a, div.contact a {
    font-weight:bold;
}

body.is-dark a:hover {
    /* color:#F4A460;*/
    /* color:#FFF8DC */
    color:#D2B48C;
} 

body.is-light a:hover{
    color:#800000
}

/****************************************************************************/
/********************************  PROJECTS  ********************************/
/****************************************************************************/
a.projectContainer {
    display:block;
    height:inherit;
    /* height:10vh; */
    margin:1vh 1vw 2vh 1vw;
    padding-bottom:3vh;
    padding: 1rem 1rem 1rem 1rem;
}
a.projectContainer:hover {
    cursor:pointer;
    opacity:0.6;
    /* background-color:#CD853F; */
    /* background-color:#FFF8DC; */
}
body.is-light a.projectContainer:hover {
    background-color:#FFF8DC;
}
body.is-dark a.projectContainer:hover {
    background-color:#2F4F4F;
}

div#mainDiv.projects h2 {
    font-weight:600;
    font-size:1em;
    padding:0;
    margin:0;
}
img.projectSnapShot {
    /* width:8vw; */
    height:100px;
    width:160px;
    margin-right:1vw;
    float:left;
    border-radius:10px;
}

div#mainDiv.projects ul {
    display:flex;
    flex-direction:column;
    margin-top:1vh;
    list-style-type: none;
    padding-left:0;
}
div#mainDiv.projects ul.techs {
    display:flex;
    flex-direction:row;
    margin-top:0;
    padding-left:0;
    opacity:80%;
}

div#mainDiv.projects ul.techs li, 
ul.techs li {
    display:inline-block;
    /* opacity:100%; */
    margin-right:1vw;
    padding:0.5vh 0.5vw 0.5vh 0.5vw;
    border-radius:9999px;
    font-size:0.5em;
    font-weight:600;
}

.partners {
    font-size:0.7em;
    margin-top:0vh;
    margin-bottom:1vh;
    display:inline-block;
}

body.is-dark ul.techs li {
    /* background-color:beige; */
    background-color:wheat;
    color:black;
}
body.is-light  ul.techs li {
    background-color:black;
    /* color:beige; */
    color:wheat;
}

/****************************************************************************/
/********************************   FOOTER   ********************************/
/****************************************************************************/

#footerSocial {
    position: fixed;
    bottom:47px;
    right:4px;
    z-index: 9999;
    margin-left:5px;
    margin-bottom:5px;
   
}
ul.socialNetworkIcons {
    list-style-type: none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction: column-reverse;
}
ul.socialNetworkIcons li {
    display:inline-block;
   
}

body.is-dark ul.socialNetworkIcons svg path {
    fill: wheat;
}