/**
 * Body CSS
 */


/* This is a work-around so that the background image position will stay fixed on mobile devices */

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background-color:gainsboro;
  /* background-image: url("./assets/unsplash2.jpg"); */
  /* no-repeat center center; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html,
body {
  height: 100%;
  width: auto;
}

html,
body,
input,
textarea,
buttons {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}


/**
  * Layout CSS
  */

#header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  transition: left 0.2s;
}

.header-color {
  background-color: #00796b !important;
}

img {
  height: auto;
  max-width: 100%;
}


/* THIS IS THE TOP RIGHT WHITE DIV
    ITS BOTTOM NEEDS TO BE REDUCED JUST A BIT
    IN ORDER TO LINE UP PERFECTLY WITH THE REST 
    OF THE APPBAR
 */

.mui--appbar-line-height {
  line-height: 64px;
}

.mui--text-title {
  color: white !important;
}

#sidedrawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 200px;
  left: -200px;
  overflow: auto;
  z-index: 2;
  background-color: rgba(48, 48, 61, 0.596);
  color: white;
  transition: transform 0.2s;
}

a {
  color: white !important;
}

#content-wrapper {
  min-height: 100%;
  overflow-x: hidden;
  margin-left: 0px;
  transition: margin-left 0.2s;
  /* sticky bottom */
  margin-bottom: -160px;
  padding-bottom: 160px;
}

#footer {
  height: 120px;
  margin-left: 0px;
  transition: margin-left 0.2s;
  margin-top: 20px;
}

@media (min-width: 768px) {
  #header {
    left: 200px;
  }
  #sidedrawer {
    transform: translate(200px);
  }
  #content-wrapper {
    margin-left: 200px;
  }
  #footer {
    margin-left: 200px;
  }
  body.hide-sidedrawer #header {
    left: 0;
  }
  body.hide-sidedrawer #sidedrawer {
    transform: translate(0px);
  }
  body.hide-sidedrawer #content-wrapper {
    margin-left: 0;
  }
  body.hide-sidedrawer #footer {
    margin-left: 0;
  }
}


/**
  * Toggle Side drawer
  */

#sidedrawer.active {
  transform: translate(200px);
}


/**
  * Header CSS
  */

.sidedrawer-toggle {
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 20px;
  margin-right: 10px;
}

.sidedrawer-toggle:hover {
  color: #fff;
  text-decoration: none;
}


/**
  * Footer CSS
  */

#footer {
  background-color: rgba(55, 61, 61, 0.85);
  /* background-color: 3d3f41ea; */
  color: #fff;
}

#footer a {
  color: #fff;
  text-decoration: underline;
}


/**
 * Side drawer CSS
 */

#sidedrawer-brand {
  padding-left: 20px;
  color: whitesmoke !important;
}

#sidedrawer ul {
  list-style: none;
}

#sidedrawer>ul {
  padding-left: 0px;
}

#sidedrawer>ul>li:first-child {
  padding-top: 15px;
}

#sidedrawer strong {
  display: block;
  padding: 15px 22px;
  cursor: pointer;
}

#sidedrawer strong:hover {
  background-color: #E0E0E0;
}

#sidedrawer strong+ul>li {
  padding: 6px 0px;
}


/* Hide body until page is completely loaded */

body>.inner {
  display: none;
}

body.pg-loaded>.inner {
  display: block;
}

.pg-loading-screen .pg-loading-center-middle {
  vertical-align: baseline;
}


/* LOADING-PAGE MESSAGE  */

.loading-message {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 3em;
  background-color: mediumaquamarine !important;
}


/* ELEPHANT IMAGE POSITIONING */

/* img.pg-loading-logo {
  max-width: 100%;
  height: auto;
} */


/* CONTENT CARDS BACKGROUND */


/* a.anchor needed in order to properly line up hashtag links */

a.anchor {
  /* display: block; */
  position: relative;
  top: -250px;
  /* visibility: hidden; */
}

.mui--z4 {
  background-color: rgba(255, 255, 255, 0.596);
  text-align: center;
  margin: 15px;
  padding: 20px;
}

.mui--z5 {
  font-size: 1.5em !important;
  background-color: rgba(25, 25, 255, 0.596);
  /* text-align: center; */
  height: auto;
  width: 200px;
  margin: 25px;
  padding: 50px;
  /* align-items: center; */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1 0 auto;

}

#project-scroll {
  height: 400px;
  width: 100%;
  border: 6px double mediumaquamarine;
  overflow: scroll;
  display: flex;
  flex: 1 0 auto;
  justify-content: space-between;
  flex-basis: auto;
  
}

/* FONT AWESOME SOCIAL MEDIA LINKS ON HEADER  */

.fa {
  padding: 10px;
  margin-top: 10px;
  font-size: 30px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  float: right;
}

.smaller-image {
  width: 15em;
  border-radius: 50%;
}

#top {
  margin-top: 6vh;
}

div span {
  margin-top: -10vh;
  /* Size of fixed header */
  padding-bottom: 10vh;
  display: block;
}

.languages {
  font-size: 6em !important;
  margin: 10px;
  padding: 5px;
}

.languages-list {
  padding: 5px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  border: 3px solid black;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.derp {
  display: flex;
  justify-content: center
}

h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}