@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

body {
  background-color: rgba(101, 101, 101, 0.877);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 1.8rem;
  margin: 0;
  padding: 0;
}
.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
  background: #776f6b url(https://juvenilelawyerlosangeles.com/wp-content/uploads/2017/06/marsoony-murlonchik-lawyer.jpg) no-repeat;
  background-position: 20% 32px;
}
.glass-effect {
  box-shadow: 0 10px 24px rgba(8, 26, 25, 0.16);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.gradient-bar {
  position: absolute;
  top:0;
  width: 100%;
  min-height: 32px;
  background: linear-gradient(135deg, #bef9d7 0%, #bef9d7 15%, #94e5c1 15%, #94e5c1 20%, #7df2e4 20%, #7df2e4 42%, #a9f9f6 42%, #a9f9f6 66%, #9ab3f9 66%, #9ab3f9 72%, #9795db 72%, #9795db 86%, #c9ace5 86%, #c9ace5 100%);
}
.gradient-bar2 {
  min-height: 387px;
  background: linear-gradient(135deg, rgba(201, 172, 229, 1) 10%, rgba(169, 249, 246) 17%, rgba(201, 172, 229, 1) 17%, rgba(201, 172, 229, 1) 25%, rgba(201, 172, 229, .6) 20%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.1) 31%, rgba(169, 249, 246, 0.1) 51%, rgba(169, 249, 246) 70%, rgb(154, 179, 249, 0.7) 70%, rgba(154, 179, 249) 77%, rgba(151, 149, 219, 1) 77%, rgba(151, 149, 219, 1) 86%, rgba(201, 172, 229, 1) 86%, rgba(201, 172, 229, 1) 100%);
}
#nav {
  position: fixed;
  display: inline-flex;
  top: 28px;
  right: 50px;
}
h1 {
  text-decoration: underline;
  text-align: center;
}
h1, h2 {
  color: #fff;
  text-shadow: 7px 7px 1px rgba(151, 149, 219, 1);
  letter-spacing: .15rem;
  margin-bottom: 35px;
}
h3 {
  font-size: 28px;
}
#projects ul, #exercises ul {
  list-style: none;
  text-align: center;
}
ul a, a {
  color: rgba(244, 237, 252);
}

/* just-ascii-about-me */
#ascii {
  background-color: rgba(201,172,229,1);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 1.8rem;
  text-align: center;
  margin: 0;
  padding: 0;
}
#ascii h1 {
  text-decoration: underline;
}
#ascii a{
  color: rgba(244, 237, 252);
}
#ascii h1, #ascii h2 {
  color: #fff;
  text-shadow: 7px 7px 1px rgba(151, 149, 219, 1);
  letter-spacing: .15rem;
  margin-bottom: 35px;
}
#monmon {
  width: 400px;
  height: auto;
  margin-bottom: -30px;
}

/* project-one-research */
/* project-two-sitemap */
#project-1 {
  margin-left: 6%;
  margin-right: 6%;
}

#home{
  width: 50px;
}

#project-2{
  margin-left: 40px;
}
#sitemap{
  display: flex;
  width: 80%;
  margin: 150px 150px 10px 150px;
}

#sitemapmain{
  margin-top: 50px;
}

#colorsite {
  position: relative;
  width: 97%;
  margin: 150px 10px 0 20px;
}
.stylepic:nth-child(1){
  position: relative;
  display: inline-flex;
  width: 48%; 
  float: left;
}
.stylepic:nth-child(2){
  position: relative;
  width: 48%; 
  display: inline-flex;
  float: right;
}

#project-1 article {
  width: 100%;
}
#project-1 img {
  position: relative;
  display: flex;
  width: 98%;
}
#competitors li {
  margin-bottom: 16px;
}
#project-1 h2 {
  color: rgba(255, 148, 77, 1);
  text-shadow: 7px 7px 1px rgb(51, 51, 51);
  text-align: center;
  letter-spacing: .15rem;
  margin: 20px 0;
}
#project-1 h3 {
  color: #fff;
  text-shadow: 7px 7px 1px  rgb(51, 51, 51);
  letter-spacing: .15rem;
  margin-bottom: 35px;
}
#project-1 #go-home {
  margin: auto;
  max-width: 368px;
}
#project-1 ul a, a {
  color: rgb(245, 212, 163);
}

/* exercise-two-getting-to-know-url */
/*art-forgery-with-css*/
.exercise2 {
  width: 100%;
  height: 300%;
  position: absolute;
  margin: 0;
  padding: 0;
  background: -webkit-gradient(linear, right top, left top, from(#073763), color-stop(#0b5394), color-stop(#3d85c6), color-stop(#6fa8dc), color-stop(#9fc5e8), color-stop(#c8bede), color-stop(#b3a6d5), color-stop(#8675b8), color-stop(#674ea7), color-stop(#351c75), color-stop(#741b47), color-stop(#a64d79), color-stop(#c27ba0), color-stop(#d5a6bd), color-stop(#d8aca4), color-stop(#dd7e6b), color-stop(#cc4125), color-stop(#a61c00), color-stop(#85200c), to(#571407));
  background: linear-gradient(270deg, #073763, #0b5394, #3d85c6, #6fa8dc, #9fc5e8, #c8bede, #b3a6d5, #8675b8, #674ea7, #351c75, #741b47, #a64d79, #c27ba0, #d5a6bd, #d8aca4, #dd7e6b, #cc4125, #a61c00, #85200c, #571407);
  background-size: 4000% 4000%;
  background-repeat: repeat-y;
  -webkit-animation: colors 30s ease infinite;
          animation: colors 30s ease infinite;
}

@-webkit-keyframes colors {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 100%;
  }
}

@keyframes colors {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 100%;
  }
}

#main-nav {
  position: fixed;
  display: block;
  width: 100%;
  top: 0px;
  background-color: rgba(162, 243, 231, 0.5);
  margin: 0 auto;
  box-shadow: 0 10px 24px rgba(8, 26, 25, 0.16);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

#main-nav ul {
  position: relative;
  display: flex;
  justify-content: center;
  width: 84%;
  top: 0px;
  margin: 0 auto;
  padding: 1% 15%;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

#main-nav ul li {
  font-size: 1em;
  padding: 6px;
  list-style: none;
  text-decoration: none;
  cursor: pointer;
}

#gtkurl {
  margin-top: 200px;
  text-align: center;
}

.two-pics {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}
.two-pics img:nth-child(1) {
  float: left;
  width: 35%;
}
.two-pics img:nth-child(2) {
  float: right;
  width: 35%;
}
.img-medium {
  width: 500px;
}

.artpic{
  display: inline-flex;
  max-width: 22%;
  margin: 0 5% 0 5%;
  float: left;
}
@media screen and (max-width: 991px) {
  #main-nav ul li a {
    font-size: .6em;
  }
}

@media screen and (max-width: 640px) {
  #main-nav ul li a {
    font-size: .4em;
  }
}
/*project-four-wireframes*/
#web4{
  width: 98%;
  margin: 150px 10px 40px 10px;
}
.wirepic1{
  width: 48%;
  float: left;
  margin: 0 1% 1% 1%;
}
#extra{
  width: 98%;
  margin: 0px 5px 0px 5px;
}
#tablet-mobile4 {
  display: inline-block;
  width: 100%;
  
}

.wirepic2 {
  vertical-align: top;
  display: inline-grid;
  width: 30%;
  padding: 0 1%;
}

.lb {
	display: none;
	position: fixed!important;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
  text-align:center;
}

.lb img {
	max-width: 98%;
	max-height: 98%;
	margin-top: 1%;
}

.lb:target {
	outline: none;
	display: block;
}

a.lb:hover {cursor:default;}
img:hover {cursor:pointer;}