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

html,body{
height: 100%;

}

body {
  background-color: #fde7e7;
  font-family: Life saver;
}

a {
  text-decoration: none;
}

.wrapper {
  height: 100%;
  border: 1px #fa2eb6 solid;
  margin: 20px;

}

#hero{
display:flex;
flex-direction: column;
justify-content: space-between;
}

body.gif .wrapper {
  height: auto;
}

h1 {
  color: #ed7479;
  text-align: center;
  font-size: 28px;
  padding-top: 30px;
}

h2 {
  color: #b41c22;
  padding-top: 70px;
  padding-left: 200px;
}

section>div {
  height: 100%;
  border: solid 2px #F98F8F;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pink-box {
  border-radius: 3px;
  padding: 20px;
  background-color: #f3aaaa;
  color: white;
  display:inline-block
}

.wrapper.header {
  background: url(pictures/background2vector.png);
    background-position: center;
    background-size: inherit;
}


/* Menu */
.menu {
  list-style-type: none;
  text-align: center;
}

  ul.menu {
    margin-top: 20px;
  }
.menu li {
  display: inline-block;
  margin: 10px 5px;
}

.menu li a {
  border-radius: 3px;
  padding: 10px 30px;
  background-color: #f5aaad;
  color: #ffffff;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #ed7479;
}

#logo img {
  width: 90px;
  margin: 20px;
}

#logo {
text-align: center
}

.index-logo {
  text-align:center
}

.index-logo img {
  width: 200px;
  margin: 20px;
}

/* Art works */
.art-works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style-type: none;
  justify-content: center;
  padding: 0;
}
  .art-works li {
    text-align: center;
    margin: 10px 0;
  }
  .art-works li .pink-box {
    width:250px;
    padding:8px;
    margin:px
  }


/* About Me*/

.about-me .main-content {
  display: grid;
  grid-template-columns:200px auto;
  column-gap: 40px;
  width: 800px;
  margin:0 auto;
}

.about-me img {
  padding: 30px;
}

/*GIF series page*/

ul.gif li img {
  width:400px;
}

ul.gif li {
  height: 557px;
  overflow:hidden;
}

/*Macro Pic page*/

ul.macropic {
  text-align: center;
}

ul.macropic li {
  list-style-type: none;
  display: inline-block;
}

/*glitch page*/

ul.glitch {
  text-align: center;
}

ul.glitch li {
  list-style-type: none;
  display: inline-block;
}

@media only screen and (max-width: 1000px) {
  .menu li {
    display: block;
    margin-top: 30px;
  }
  .about-me .main-content {
    display: block;
    text-align: center;
    width: auto;
  }
    #about-me h2 {
      color: #b41c22;
      padding-top: 0;
      padding-left: 0;
      margin: 0 0 40px 0;
    }
  .wrapper {
    height: auto;
  }
  .art-works {
    grid-template-columns: 1fr;
  }
}