*{
    margin:0;
    padding: 0;
    scroll-behavior: smooth !important;
}

html::-webkit-scrollbar{
    scroll-behavior: smooth !important;
    display: none;
}

/**
HEADER - NAVBAR
*/

.selectedList
{
    text-shadow: rgb(223, 223, 212) 0px 0px 3px;
}

header
{
    position: sticky;
    top:0;

    z-index: 2;

    display:flex;
    align-items: center;
    justify-content: center;

    height: 100px;
    width: 100%;
    
    background-color: rgba(0,0,0,.5);
    
    /* border: 2px dashed red; */
}

nav>li
{
    display: flex;
    gap:20px;
    /* border: 2px dashed aqua; */
    
}

nav>li>ul
{
    height:30px;
    

    text-align: center;

    margin:0 30px 0 30px;
    padding:0 30px 0 10px;
    
    list-style: none;
    font-size: 32px;
    /* border: 2px dashed white; */
}

nav>li>ul>a{
    color:rgb(223, 223, 212);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
}

nav>li>ul>a:hover{
    font-family:'Nothing You Could Do', cursive;
}

.background{
    background:url(./images/Background.png) ;
}

/**
*HOME PAGE
*/

.homeContainer{
    display: grid;
    place-items: center;
    height:100vh;
    /* border: 2px dashed red; */
    flex-wrap: wrap;
}
.middleContainer{
    display: flex;
    flex-direction: row;
    /* border: 2px dashed green; */
    flex-wrap: wrap;
    background-color: rgba(248, 242, 242, 0.5) ;
    border-radius: 3%;
    

}
.innerContainer{
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* border: 2px dashed blue; */
    flex-wrap: wrap;
}

#profile-image-border{
    max-height:230px;
    max-width:230px;
    
    
    border: 5px solid #032435;
    border-radius: 50%;

    background-color: rgb(118, 181, 200);
    box-shadow: 0 0 5px #032435;
}

#profile-line{
    width: 100vh;
    height:0vh;
    border-bottom: 5px solid #032435;
    
}

#profile-image{
    max-height:200px;
    max-width:200px;
    padding-bottom:2px;
    margin:10px;
    border:3px solid rgb(27, 61, 71);
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(33, 74, 86);
    
}

#typewriteTop{
    font-size: 60px;
    font-family: 'Nanum Pen Script', cursive;
    color: #1d4861;
}

#typewriteBottom{
    font-size: 60px;
    font-family: 'Nanum Pen Script', cursive;
    color: #1d4861;
}

/*
*   RAMI THE DEVELOPER
*/
#RamiTheDev{
    background-image: url(./images/BKG_RamiTheDev.JPG);
    height: 100vh;
    width: 100vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

#Tbx_RamiTheDev{
    background:rgba(130, 0, 78, 0.886);
    border-radius: 10%;
    
    height: 50vh;
    width: 1000px;

    padding:20px;

    color:rgb(247, 247, 250);
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    /* border: 2px dashed red; */
}

#Tbx_RamiTheDev>h1{
    margin:20px 0 0 20px;
    display: block;
    position: sticky;
    top:0;
}

#scroll>p{
    margin:10px 10px 0 20px;
}

#scroll{
    height: 90%;
    /* width: 100%; */

    margin:20px;
    /* border: 2px dashed blue; */

    overflow-y: scroll;
    
}

/* width */
#scroll::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
#scroll::-webkit-scrollbar-track {
    background:rgb(125, 65, 101);  
  }
   
  /* Handle */
 #scroll::-webkit-scrollbar-thumb {
    background: rgb(111, 1, 67); 
  }
  
  /* Handle on hover */
#scroll::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

/*
* Projects
*/
#projects{
    /* position:absolute; */
    display: flex;
    /* justify-content: flex-end; */
    height:100vh;
    width: 100vw;
    background-image: url(./images/screen.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* border: 2px dashed purple; */
}

#screen{
    flex-grow: 6;
    margin-top: 4vh;
    margin-left: 6%;
    height:69.1vh;
    /* flex-basis: 70%; */
    width:60% ;
    flex-shrink:0;
    /* border: 2px dashed rgb(211, 139, 211); */
}

#screen>img{
    height: 100%;
    width: 100%;
}


#internet, #github {
    width: 40px;
}

#titleline{
    display: flex;
    justify-content: space-between;
}

#links{
    display: flex;
    
    gap:5px;
}

.projectDescriptionGroup{
    display: flex;

    height: fit-content;
    width: fit-content;
    margin-top: 25vh;

    position: relative;
    top:5vh;
    right:10vw;
    /* border: 2px dashed rgb(211, 139, 211); */
}


.arrows{
    height:60px;
    width: 60px;
    margin-top: 16vh;
    display: inline-block;
    border-radius: 50%;
    background-color: rgb(159, 146, 23,.9);
    color:rgb(247, 247, 250);
    font-size: 60px;
    text-align: center;
    font-family: 'Nanum Pen Script', cursive;
    
}

#backArrow{
    padding:2vh 3vh 3vh 2vh;
    margin-right: -20px;
    z-index: 2;
}

#frontArrow{
    padding:2vh 2vh 3vh 3vh; 
    margin-left: -20px;
    z-index: 2;
}

#projectDesc{
    display: flex;
    flex-direction: column;
    min-height:40vh;
    height: fit-content;
    width: 30vw;
    padding:30px;

    color:rgb(247, 247, 250);
    font-size: 30px;
    /* border: 2px dashed red; */
    background-color: rgba(159, 146, 23, 0.816);
    border-radius: 5px;
}

#projectTitle{
    font-family:'Nothing You Could Do', cursive;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 900;
}

#projectText{
    height:25vh;
    overflow-y: scroll;
    /* border: 2px dashed rgb(198, 190, 190); */
    /* font-family: 'Nanum Pen Script', cursive; */
    font-family: Arial, Helvetica, sans-serif;
}

/* width */
#projectText::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
#projectText::-webkit-scrollbar-track {
    background:rgba(114, 105, 18, 0.816);
  }
   
  /* Handle */
 #projectText::-webkit-scrollbar-thumb {
    background: rgb(191, 174, 26,0.8);; 
  }
  
  /* Handle on hover */
#projectText::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

#stackImages{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 10vh;
}

#stackImages>img{
    width:70px;
    padding:0;
    /* border: 2px dashed red; */
}
/*
* MEDIA QUERIES
*/

@media only screen and (max-width: 800px) {
    #profile-line{
        width: 100%;
    }
    
  }

  

@media only screen and (max-width: 1600px) {
    #profile-line{
        width: 100%;
    }
    #stackImages>img{
    width:40px;
}
  }