html *
{
  font-family: 'Libre Franklin', sans-serif;
  margin: auto;
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

.off-white {
  background-color: #ebeff5;
  width: 100%;
  
}


.name {
  text-align: center;
  justify-content: end;
  white-space: nowrap;
  font-weight: bolder;
  color: #4478d4;


}

.skills {
  color: #4478d4;
}

.portfolio {

  color:#ebeff5;
}

.inner-port {
  padding-left: 12.5%;
  padding-right: 12.5%
}

.port {
  height: 100%;
  width: 100%;
  background-color: #1d50a8;
  padding-top: 3%;
  padding-bottom: 2%;
  box-shadow: 
  inset 0px 11px 8px -15px black,
  inset 0px -11px 8px -15px black; 
}

h2 {
  font-weight: bold;
  font-size: 2.0vw;
  
}

p {
  font-size: 1.5vw;
}


body {
    background-color: light;
}

.navbar {
  color:#ebeff5;
  font: bold;
  font-size: 1.5vw;
  display: flex;
  background-color: #4478d4;
}


.navbar-text:hover{
  opacity: .5;
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

}

.col {
  padding: 0;
}

.navbar-text {
  transition: transform .2s; /* Animation */
  justify-content: flex-end;
  margin: 1vw;
  text-decoration: none;

}
.navbar-text:hover {
  opacity: .5;
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  text-decoration: none;
  cursor: default;
  color: #ebeff5;
}

a {
  color: #ebeff5;
  font: bolder;
  text-decoration: none;
  scroll-behavior: smooth;
}

.container {
  width: 100%
}

.about {
  background-color: #ebeff5;
  width: 100%;
}


.grey {
  height: 200%;
  width: 100%;
  background-color: #4478d4;
  box-shadow: -10px 0px 20px 0.5px #aaaaaa;
  
}

.blue-text {
  transition: transform .2s; /* Animation */
  text-decoration: none;
  color: #4478d4;
}

.blue-text-two {
  transition: transform .2s; /* Animation */
  text-decoration: none;
  color: #4478d4;
}

.blue-text:hover {

    opacity: .5;
    text-align: center;
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    text-decoration: none;
    cursor: default;
    color: #4478d4;
  
}

.blue-text-no-center {
  transition: transform .2s; /* Animation */
  text-decoration: none;
  color: #4478d4;
}

.blue-text-no-center:hover {

  opacity: .5;
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  text-decoration: none;
  cursor: default;
  color: #4478d4;

}

.white-text-no-center {
  transition: transform .2s; /* Animation */
  text-decoration: none;
  color: #ebeff5;
}

.white-text-no-center:hover {

  opacity: .5;
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  text-decoration: none;
  cursor: default;
  color: #ebeff5;

}

.img-pop:hover {
  opacity:.5;
}

li {
  list-style-type: none;
  text-align: center;
}

.justify-center {
  justify-content: center;
}

.overflow-hidden {
  overflow: hidden;
}

.headshot {

  -webkit-filter: drop-shadow(15px 50px 50px #666);
  filter:         drop-shadow(15px 50px 50px #666);
  pointer-events: none;
  }

  

.row {
    display: flex;
    flex-wrap: wrap;

  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 50%;
    max-width: 100%;
    padding: 0;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    transition: transform .2s; /* Animation */
    -webkit-box-shadow: 0 8px 6px -6px #aaaaaa;

    -moz-box-shadow: 0 8px 6px -6px #aaaaaa;
    
    box-shadow: 0 8px 6px -6px #aaaaaa;
  }

  .column img:hover {
    opacity: .5;
    transform: scale(1.01); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    cursor: default;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {

    .column {
      flex: 100%;
      max-width: 100%;
    }
  }

  /* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ebeff5;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}