@import url(https://fonts.googleapis.com/css?family=Poppins:400,700|Work+Sans:400,500,700|Cabin&display=swap);


/* **** COLOR PALETTE: ****
    darkorange;
    #ef3e4a;
    #ef703e;
    whitesmoke;
    lightcoral;
    salmon;
    lightsteelblue;
    lightblue;
*/


/*--------------------GLOBAL STYLES------*/

html {
    height: 100%;
}

body {
    background: #d8333e; 
    font-family: 'Poppins', sans-serif;
    color: rgb(234, 246, 250);
}

/*----------------------CONTENT---------*/

.name {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 3.7em;
    text-align: center;
    margin-top: 10%;
    margin-bottom: 0%;
    color: white;    
  }
  
.name.index {
  text-align: unset;
  margin-left: 38%;
}

.tagline {
    font-family: 'Work Sans', sans-serif;
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    color: lightskyblue;  
    margin-top: 0%;
    margin-bottom: 0%;  
    padding-left: 9%;
    max-width: 4;
}

.pic {
    float: left;
    width: 280px;
    /*padding-left: 18%;*/
    position: fixed;
    top: 25%;
    left: 20%;
}

.desc.first {
    margin-top: 1.6%;
}
.desc {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.6em;
    font-weight: 400;
    text-align: left;
    line-height: 1.1em;
    color: lightskyblue;  
    margin-top: 0%;
    margin-bottom: 0.3%;  
    margin-left: 38%;
    max-width: 4;
    overflow:hidden;
    /* color: lightskyblue; */
}

.two {
    text-align: center;
    font-weight: bold;
    background: #b430398a;
    background: rgba(145, 180, 192, 0.336);
    color: #9e282f;
    color: lightblue;
    padding: 0.25%;
    clear:both;
}

.info {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.6em;
    line-height: 1.2em;
    text-align: left;
    color: rgb(234, 246, 250);  
    margin-top: 2.2%;
    margin-bottom: 5%;  
    margin-left: 38%;
    max-width: 40%;
    overflow:hidden;
}

/*---------------------NAVIGATION BAR-----*/

nav {
   clear: both;
   font-family: 'Poppins', sans-serif;
   font-weight: bolder;
   font-size: 2.25em;
   text-align: center;
   margin-left: 10%;
   margin-top: 6%; 
   margin-right: 10%;
   margin-bottom: 3%;
   /* max-width: 4; */
   overflow:hidden;
}

nav ul {
    list-style-type: circle;
}

nav li {
    display: inline;
    margin: 2%;
}

nav a, nav a:visited {
    text-decoration: none;
    color: lightcoral;
}

nav a:hover {
    color: lightskyblue;
}

nav a:active {
    color: lightblue;
}

/*---------------------PROJECTS PAGE-----*/

p.tag {
  font-family: 'cabin', sans-serif;
  font-size: 1.50em;
  font-weight: 400;
  /*text-align: left;*/
  text-align: center;
  color: lightcoral; 
  margin: 0% 34% 2.1% 34%;
  
}

.tintin {
  border-radius: 0px;
}

.alfalfa {
  margin-top: 3%;
}

.note {
  font-size: 1em;
  font-weight: 400;
  /*text-align: left;*/
  text-align: center;
  color: darkgrey; 
}


/*--------------------FOOTER------*/

footer {
    font-family: 'cabin', sans-serif;
    font-size: 1.50em;
    color: #9e282f;
    display: none;
}


/*--------------------TYPING--------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .container- {
    /*height: 100vh;*/
    display: flex;
    justify-content: left;
    align-items: center;
    margin-left: 37.75%;
  }
  .container- p {
    font-size: 1.9rem;
    padding: 0.5rem;
    font-weight: bold;
    letter-spacing: 0.05rem;
    text-align: center;
    overflow: hidden;
  }

  .container- p.tagline span.typed-text {
    font-weight: normal;
    color: lightskyblue;
    background-color: rgba(109, 131, 138, 0.253);
  }
  .container- p.tagline span.cursor {
    display: inline-block;
    background-color: #ccc;
    margin-left: 0.1rem;
    width: 3px;
    animation: blink 1s infinite;
  }
  .container- p.tagline span.cursor.typing {
    animation: none;
  }
  @keyframes blink {
    0%  { background-color: #ccc; }
    49% { background-color: #ccc; }
    50% { background-color: transparent; }
    99% { background-color: transparent; }
    100%  { background-color: #ccc; }
  }

/*-----------------UNDER CONSTRUCTION---------*/
body.image {
  background-image: url("../images/laptop.png");
  background-repeat: no-repeat;
  background-attachment: relative;
  background-position: 78% 26%;
  background-size: 210px;
}