/* font-family: 'Lobster', cursive;
font-family: 'Raleway', sans-serif; */
/* body and all over elements*/


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #0c0032;
  color: #edf0f1;
  font-family: 'Raleway', sans-serif;
  /*background-repeat: no-repeat;*/
}
h1,h2,h3,h4,h5 {
  font-family: 'Lobster', cursive;
}

/*nav bar*/
 header {
  background: #282828;
  box-shadow: 10px 5px 5px #190061;
  position: sticky;
  top: 0;
}

header::after{
  content: '';
  display: table;
  clear: both;

}

#name {
  float: left;
  padding-left: 20px;
  
}
  
nav {
  float: right;
}

nav ul {
margin: 0;
padding-right: 20px;
list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 10px;
  position: relative;
}

nav a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;

}

nav a:hover {
  color: #190061;
  

}

nav a::before {
  content: "";
  display: block;
  height: 5px;
  background-color: #190061;
  position: absolute;
  top: 0;
  width: 0;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
width: 100%;
}
/*nav bar*/


/*quote*/
#quote h1 {
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  color: #ffffff;
  font-size: 4.5em;
  margin-bottom: 40px;
  box-shadow: 10px 5px 5px #190061;
}
#quote p{
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  color: #ffffff;
  font-size: 1em;
  box-shadow: 10px 5px 5px #190061;
}

.quoteimg {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin-bottom: 25px;
  margin-top: 20px;
}
/*quote*/


/*music*/
.music iframe {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin-bottom: 25px;
}
.music  {
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  color: #ffffff;
  font-size: 1.5em;
  box-shadow: 10px 5px 5px #190061;
  margin-bottom: 25px;
}

.music h1 {
  font-size: 2.5em;
  margin-bottom: 25px;
}

.favorite {
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  color: #ffffff;
  font-size: 1.5em;
  box-shadow: 10px 5px 5px #190061;
}

.favorite ul {
  list-style-type: none;
}

.favorite h2 {
  margin-bottom: 25px;
}
/*music*/


/*about*/
#about {
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 25px;
  box-shadow: 10px 5px 5px #190061;
}
.about h1 {
  font-size: 2.5em;
  padding-left: 20px;
}

.about-pic {
  height: 450px;
}
#contact {
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 25px;
  box-shadow: 10px 5px 5px #190061;
  }

  #contact ul {
    list-style-type: none;
  }
  #personallife {
    background-color: #240090;
  text-align: center;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  color: #ffffff;
  font-size: 1.5em;
  box-shadow: 10px 5px 5px #190061;
  }
  /*about*/

  
/*projects*/
.project {
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  color: #ffffff;
  font-size: 1.5em;
  box-shadow: 10px 5px 5px #190061;
}
.project video {
  width: 40%;
}
.project h1 {
  font-size: 2.5em;
  margin-bottom: 25px;
}

/*projects*/


/*education*/
.edu {
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  color: #ffffff;
  font-size: 1.5em;
  box-shadow: 10px 5px 5px #190061;
}
.edu img {
  width: 500px;
}
.edu h1 {
  font-size: 2.5em;
  margin-bottom: 25px;
}
/*education*/

/*resume*/
.resume {
  background-color: #240090;
  text-align: center;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  color: #ffffff;
  box-shadow: 10px 5px 5px #190061;
}
.resume h1 {
  font-size: 4em;
  margin-bottom: 25px;
}

.resume img {
  width: 60%;
}
/*resume*/


/* media queries */

@media only screen and (max-width:630px) {
  #contact {
    width: 90%;
    height: auto; 
  }
}

@media only screen and (max-width:830px) {
  .edu img {
    width: 100%;
    height: auto;
  }
}

@media only screen and (max-width:1000px) {
  .music iframe {
    width: 100%;
    height: auto;
  }
}

@media only screen and (max-width:700px) {
  .about-pic {
    width: 100%;
    height: auto;
  }
}

/* media queries */