@font-face {
  font-family: 'Euro';
  src: url('../font/euro.ttf') format('truetype');
}

@font-face {
  font-family: 'Eurob';
  src: url('../font/eurob.ttf') format('truetype');
}

@font-face {
  font-family: 'Heading';
  src: url('../font/heading.ttf') format('truetype');
}

* {
    font-family:Arial, sans-serif;
}

a {
    text-decoration:none;
    color:rgba(255,255,255,0.9);
    font-family: Euro, Arial, sans-serif;
}

.link {
    cursor:pointer;
}

body {
    margin:0;
    padding:0;
    overflow:hidden;
    width:100%;
    height:100%;
    font-family:Arial, sans-serif;
    background:rgb(10,10,10);
}

#lightboxContainer {
    position:absolute;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.8);
    z-index:90;
    overflow:hidden;
    display:none;
    justify-content: center;
    align-items: center;
}
#lightboxContainer.show {
    display:flex;
}

#lightboxImage {
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    padding:2rem;
    box-sizing:border-box;
    transition:all 1s ease;
}

img.lightbox {
    cursor:pointer;
    cursor:zoom-in;
}


#canvas {
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:3;
}

#canvasStars {
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
}

#canvasSpiro {
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    opacity:1;
}

#home {
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
    z-index:4;
    color:white;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-around;
}

#welcome {
    display:flex;
    flex-direction:column;
    align-items:center;
    background:rgba(0,0,0,0.3);
    border-radius:1em;
    box-shadow:0 0 2em rgba(0,0,0,0.5);
    padding:1em;
}


#welcome h1 {
    font-size:13vw;
    font-family: Euro, Arial, sans-serif;
    font-weight:normal;
    color:rgba(255, 255, 255, 0.9);
    margin:0;
    padding:0;
    text-shadow:3px 2px 0 rgba(0,0,0,0.8), 0 0 0.4em rgba(255,255,255,0.5);
    cursor:default;
}

#menu {
    width:100%;
}

#menu ul {
    display:flex;
    list-style-type:none;
    margin:0;
    padding:0.2em;
    font-size:4vw;
    justify-content: space-between;
    border-top:1px solid rgb(255,255,255,0.1);
    font-family: Euro, Arial, sans-serif;
    text-shadow:2px 2px 0 rgba(0,0,0,0.8), 0 0 0.3em rgba(255,255,255,0.5);
}

#menu li {
    color:rgba(255,255,255,0.9);
    font-family: Euro, Arial, sans-serif;
    cursor:pointer;
}

#contact {
    width:80%;
    position:absolute;
    bottom:0;
}

#contact ul {
    display:flex;
    list-style-type:none;
    margin:0;
    padding:0.2em;
    font-size:3vw;
    justify-content: space-between;
    font-family: Euro, Arial, sans-serif;
    text-shadow:2px 2px 0 rgba(0,0,0,0.8), 0 0 0.3em rgba(255,255,255,0.3);
}

#contact ul li:first-of-type {
    flex-grow: 10;
}

#contact a {
    opacity:0.5;
}

#contact a:hover {
    opacity:1;
}

#contact img {
    height:1em;
    margin:0 0.5em;
}

#pros {
    width:100%;
    height:100%;
    background:#25304a;
    background-position: center;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
    z-index:6;
    transform: translateY(-100%);
    color:rgba(255, 255, 255);
    display:flex;
    flex-direction:column;
    box-sizing:border-box; 
    overflow:hidden;
}
#proContainer {
    width:100%;
    height:100%;
    position:relative;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#proBGContainer {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:0;
    left:0;
}

#proBG {
    opacity:0.1;
}

#proClose {
    position:absolute;
    color:rgba(255,255,255,0.4);
    text-shadow:1px 1px 0 rgba(0,0,0,0.5);
    z-index:20;
    width:15rem;
    height:3rem;
    font-size:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:rgba(0,0,0,0.2);
    left:calc(50vw - 7.5rem);
    bottom:0;
    cursor:pointer;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,0.1);
    border-bottom:0;
    transition:all 0.5s ease;
}

#proClose:hover {
    color:rgba(255,255,255,0.8);
    text-shadow:1px 1px 0 rgba(0,0,0,0.9);
    border:1px solid rgba(255,255,255,0.5);
    border-bottom:0;
    background:rgba(0,0,0,0.3);

}

#projectCategoryNames {
    width:100%;;
    display:grid;
    grid-template-rows: auto auto;
    grid-template-columns:auto auto auto auto;
    grid-template-areas: 
    "hafafasha hafafasha ca ca"
    "des sci eng toy";
    z-index:12;
    /*! max-height:calc( 10vh + 5rem ); */
    padding:0;
    margin:0;
}

#projectCategoryNames .projectCategoryName {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size:1rem;
    font-weight:bold;
    text-shadow:1px 1px 0 rgba(0,0,0,0.6);
    height:100%;
    max-width:calc( 100vw / 6 );
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,0);
    border-bottom:0;
    cursor:pointer;
    width:100%;
    padding:0.3rem;
    margin:0;
    transition:all 0.7s ease;
    /*! height:7rem; */
}

#projectCategoryNames a {
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size:1rem;
    font-weight:bold;
    text-shadow:1px 1px 0 rgba(0,0,0,0.6);
    margin:0 1rem;
    transition:0.1s;
    background:rgba(0,0,0,0.1);
    border-radius:1rem;
    /*! height:6rem; */
    padding: 0.3rem;
    overflow: hidden;
}

#projectCategoryNames a:hover {
    background:rgba(255,255,255,0.2);
}

a#linkHafafasha {
    grid-area: hafafasha;
}

a#linkCA {
    grid-area: ca;
}

#projectCategoryNames .projectCategoryName:nth-of-type(1) {
    grid-area:des;
}

@media screen and (max-width:900px) {
   #projectCategoryNames .projectCategoryName, #projectCategoryNames a {
    font-size:0.6rem;
   }
}


#projectCategoryNames .projectCategoryName.open {
    border:1px solid rgba(255,255,255,0.1);
    border-bottom:0;
    background:rgba(255,255,255,0.1);
}

#projectCategoryNames img {
    width:512px;
    height:auto;
    max-width:25vw;
    max-height:10vh;
    object-fit:contain;
    margin:0.5rem;
}

#projectCategoryNames .projectCategoryName span {
    padding:0;
    margin:0;
}

#projectCategories {
    width:100%;
    z-index:13;
    padding:0;
    margin:0;
}

#projectCategories .projectCategoryContent {
    overflow-y:auto;
    overflow-x:hidden;
    height:0;
    box-sizing:border-box;
    transition:all 0.6s ease;
    width:100%;
    max-width:calc( 100vw - 2rem );
    opacity:0;
    padding:0;
    margin:0 1rem;
    width:100%;
    background:rgba(255,255,255,0.1);   
}

#projectCategories .projectCategoryContent.open {
    overflow-y:auto;
    overflow-x:hidden;
    height:calc( 85vh - 13em );
    opacity:1;
    padding:1rem;
    border:1px solid rgba(255,255,255,0.1);
    border-top:0;
    /*! margin-top:3.8rem; */
}

.projectCategoryDesign, .projectCategoryEngineer {
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    align-content: start;
}

.projectCategoryDesign img, .projectCategoryEngineer img {
    flex-grow:1;
    object-fit:cover;
    margin:0.1rem;
    min-height:5rem;
    max-height:12rem;
    border:1px solid rgba(255,255,255,1);
    opacity:0.5;
    transition: all 0.5s ease;
    box-sizing:border-box;
    display:block;
}
.projectCategoryDesign img:hover , .projectCategoryEngineer img:hover {
    opacity:1;
}


#projectCategories .projectCategoryResearch {
    display:flex;
    flex-direction: column;
    justify-content:flex-start;
    flex-wrap:nowrap;
}

#projectCategories .projectCategoryResearch .paper {
    display:flex;
    flex-direction: row;
    align-items: center;
    transition:all 0.3s ease;
    
}


#projectCategories .projectCategoryResearch .paper img {
    width:5rem;
    height:100%;
    float:left;
    margin:0.2rem;
    object-fit:contain;
}

#projectCategories .projectCategoryResearch .paper>div {
    display:flex;
    flex-direction: column;
    padding:0.2rem 1rem;
    border-radius:0.8rem;
    background:rgba(255,255,255,0);
    transition:all 0.3s ease;
}

#projectCategories .projectCategoryResearch .paper:hover>div {
    background:rgba(255,255,255,0.8);
    color:rgba(0,0,0,1);
    box-shadow:0 0 0.5rem rgba(0,0,0,0.3);
}

#projectCategories .projectCategoryResearch span.title {
    font-weight:bold;
    font-size:1rem;
}

#projectCategories .projectCategoryResearch span.date {
    font-weight:normal;
    font-size:0.8rem;
}

#projectCategories .projectCategoryResearch span.book {
    font-weight:bold;
    font-size:0.8rem;
    margin:0.3rem 0;
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

#projectCategories .projectCategoryToys {
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    align-content: start;
}


#projectCategories .projectCategoryToys a {
    display:flex;
    flex-direction: column;
    align-items:center;
    font-family:Heading, sans-serif;
    margin:0.2rem;
    opacity:0.7;
    color:rgba(255,255,255,0.5);
    text-shadow:1px 1px 0 rgba(0,0,0,0.4);
    transition:all 0.4s ease;
    padding:0.5rem;
    border-radius:1rem;
    border:3px solid rgba(255,255,255,0);
    text-align:center;
    flex-shrink: 0;

}

#projectCategories .projectCategoryToys a:hover {
    opacity:1;
    color:rgba(255,255,255,1);
    text-shadow:1px 1px 0 rgba(0,0,0,0.7);
    background:rgba(255,255,255,0.1);
    border:3px solid rgba(255,255,255,1);
}

#projectCategories .projectCategoryToys a img {
    max-width:calc( 100vw / 7 );
    width:300px;
    margin-bottom:0.3rem;
}

#cv {
    width:100%;
    height:100%;
    background:white;
    background-image:url('../img/cv/bg.png');
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
    top:0;
    left:0;
    z-index:6;
    transform: translateY(100%);
    color:rgb(50,50,50);
    display:flex;
    flex-direction:column;
    box-sizing:border-box; 
}

#CVclose {
    width:10em;
    position:relative;
    cursor:pointer;
}


#CVclose span {
  position: absolute;
  cursor:pointer;
  width: 3em;
  height: 3em;
  top:2em;
  left:3em;
  animation: closeCV 1.5s infinite;
  margin-left: -0.5em;
  border-left: 1rem solid rgba(191,52,114,0.8);
  border-bottom: 1rem solid rgba(191,52,114,0.8);
  transform: rotate(-45deg);
  box-sizing: border-box;
  box-shadow:-1rem 1rem 0 rgba(40,180,120,0.4),
      -2rem 2rem 0 rgba(50,120,180,0.25),
      -3rem 3rem 0 rgba(230,150,10,0.1);
}

@media screen and (max-width:1200px) {
    #CVclose {
        width:5em;
        position:relative;
        cursor:pointer;
    }
    #CVclose span {
      width: 2em;
      height: 2em;
      top:2em;
      left:1.5em;
      margin-left: -0.5em;
      border-left: 0.5rem solid rgba(191,52,114,0.8);
      border-bottom: 0.5rem solid rgba(191,52,114,0.8);
      box-shadow:-0.5rem 0.5rem 0 rgba(40,180,120,0.4),
          -1rem 1rem 0 rgba(50,120,180,0.25),
          -1.5rem 1.5rem 0 rgba(230,150,10,0.1);
    }
}

@keyframes closeCV {
  0%, 100% {
     transform: rotate(-45deg) translate(-0.3rem, 0.3rem);
  }
  50% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

#cvTop {
    display:flex;
}



#bio {
    border:3px solid white;
    box-shadow:0 0 0.6rem rgba(0,0,0,0.5);
    margin:1rem 1rem 0 1rem;
    box-sizing:border-box;
    background:rgba(255,255,255,1);
    padding:0.6rem;
    background:white;
    background-image:url('../img/cv/bg.png');
    background-repeat:no-repeat;
    background-size:contain;
    display:flex;
    align-items:center;
    height:10rem;
    flex-grow:10;
}

#cvPhoto {
    height:100%;
    margin:0 1em;
}


#bio .personal {
    display:grid;
    grid-template-rows: 5;
    grid-template-columns: auto auto;
    
}

#bio .personal span {
    text-align:right;
    padding-right:1rem;
    color:rgba(0,0,0,0.5);
    font-size:0.9rem;
    display:flex;
    align-items:center;
    justify-content: flex-end;
}

#bio .personal b {
    font-family: Heading, Arial, sans-serif;
    font-weight:normal;
    font-size:1.6rem;
    display:flex;
    align-items:center;
    color:rgba(0,0,0,0.6);
}

#cards {
    display:flex;
    overflow:auto;
    box-sizing:border-box;
    padding:0;
    align-items: flex-start;
}

#cv .card {
    background:white;
    box-shadow:0 0 1em rgba(0,0,0,0.5);
    margin:1em;
    padding:3px;
    display:flex;
    flex-direction:column;
    min-width:18vw;
    box-sizing:border-box;
    max-height:calc(100vh - 13rem);
    
}

@media screen and (max-width: 1200px) {
    #bio {
        height:8rem;
    }

    #cvPhoto {
        height:100%;
    }
    
    #bio .personal span {
        text-align:right;
        padding-right:1rem;
        color:rgba(0,0,0,0.5);
        font-size:0.7rem;
        display:flex;
        align-items:center;
        justify-content: flex-end;
    }

    #bio .personal b {
        font-size:1.2rem;
    }


    #cv .card {
        background:white;
        box-shadow:0 0 1em rgba(0,0,0,0.5);
        margin:1rem;
        padding:3px;
        display:flex;
        flex-direction:column;
        height:calc(50vh - 5rem - 2rem);
    }
    
    #cards {
        display:grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
    }
}

@media screen and (max-width: 600px), (max-height: 500px)  {

    
    #cv {
        width:100%;
        height:100%;
        display:block;
        flex-direction: column;
        overflow:auto;
    }
    
    #bio {
        height:5rem;
    }
    
    #cvTop {
        display:flex;
        padding-bottom:1rem;
    }
    
    #CVclose span {
        top:1rem;
    }

    #cvPhoto {
        height:100%;
        margin:0;
    }
    
    #bio .personal span {
        text-align:right;
        padding-right:1rem;
        color:rgba(0,0,0,0.5);
        font-size:0.5rem;
        display:flex;
        align-items:center;
        justify-content: flex-end;
    }

    #bio .personal b {
        font-size:0.8rem;
    }
    
    #cards {
        display:block;
        align-items: stretch;
        height:auto;
    }

    #cv .card {
        background:white;
        box-shadow:0 0 1em rgba(0,0,0,0.5);
        margin:1rem;
        padding:3px;
        display:flex;
        flex-direction:column;
        height:auto;
        max-height:unset;
    }
}


#cv .card .label {
    color:rgba(255,255,255,1);
    font-family: Heading, Arial, sans-serif;
    padding:0.2rem 0.5rem;
    font-size:1.5rem;
    display:flex;
    align-items:center;
    flex-direction:row-reverse;
    min-height:1.7rem;
}

#cv .card .label img {
    height:1em;
    opacity:1;
}

#cv .card .label span {
   font-family: Heading, Arial, sans-serif;
   text-shadow:2px 2px 0 rgba(0,0,0,0.4);
   flex-grow:10;
}

#cv .card ul {
    display:flex;
    flex-direction:column;
    margin:0;
    padding:0;
    list-style-type:none;
    overflow:auto;
}

#cv .card ul li.section {
    font-family: Heading, Arial, sans-serif;
    color:rgb(120,120,120);
    font-size:1.5rem;
    margin:0.3rem 0.3rem;
    font-variant:small-caps;
    text-align:center;
}

#cv .card ul li.text {
    font-family: Arial, sans-serif;
    font-weight:normal;
    color:rgb(50,50,50);
    font-size:1rem;
    margin:0;
    padding:0.2rem 0.5rem;
    line-height:130%;
    border-bottom:1px solid rgba(0,0,0,0.2);
}

#cv .card ul li.text img {
    float:left;
    display:block;
    width:3em;
    height:3em;
    object-fit: cover;
    margin-right:0.5em;
    border:3px solid white;
    box-shadow:1px 1px 0 rgba(0,0,0,0.3);
}

#cv .card ul li.date {
    display:block;
    font-weight:bold;
    color:rgb(255,255,255);
    font-size:0.9rem;
    padding:0.1rem;
    text-shadow:1px 1px 0 rgba(0,0,0,0.7);
    border-bottom:1px solid rgba(0,0,0,0.3);
    padding-left:1em;
}

#cv .card ul li.link {
    display:block;
    font-weight:bold;
    text-align:center;
    color:rgb(255,255,255);
    padding:0.1rem;
    text-shadow:1px 1px 0 rgba(0,0,0,0.7);
    border-bottom:1px solid rgba(0,0,0,0.3);
    font-family:Arial, sans-serif;
    width:80%;
    margin:0 auto 0.5em auto;
    box-sizing:border-box;
    border-radius:0 0 1em 1em;
    opacity:0.8;
}

#cv .card ul li.link:hover {
    opacity:1;
}


#cv .card ul li.link a {
    font-weight:bold;
    color:rgb(255,255,255);
    font-size:1rem;
    text-shadow:1px 1px 0 rgba(0,0,0,0.7);
    font-family:Arial, sans-serif;
    opacity:0.8;
    width:100%;
    display:block;
}

#cv .card ul li.photo {
    text-align:center;
}

#cv .card ul li.photo img {
    height:6em;
    max-width:70%;
}

#workCard .label { background:rgba(191,52,114,1); }
#educationCard .label { background:rgba(50,120,180,1); }
#skillsCard .label { background:rgba(40,180,120,1); }
#rewardsCard .label { background:rgba(230,150,10,1); }

#workCard .date { background:rgba(191,52,114,1); }
#educationCard .date { background:rgba(50,120,180,1); }
#skillsCard .date { background:rgba(40,180,120,1); }
#rewardsCard .date { background:rgba(230,150,10,1); }

#workCard .text { background:rgba(191,52,114,0.1); }
#educationCard .text { background:rgba(50,120,180,0.1); }
#skillsCard .text { background:rgba(40,180,120,0.1); }
#rewardsCard .text { background:rgba(230,150,10,0.1); }

#workCard .link { background:rgba(191,52,114,1); }
#educationCard .link { background:rgba(50,120,180,1); }
#skillsCard .link { background:rgba(40,180,120,1); }
#rewardsCard .link { background:rgba(230,150,10,1); }