Current Profile on Hex

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Montserrat" rel="stylesheet">
<title>Galaxies in Her Eyes</title>
<style>

/* main stuff */

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Open sans", sans-serif;
  font-size: 16px;
  font-weight: 100;
  color: white;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* links */

a {text-decoration:none;
      -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

/* nav bar styling */

.container form {
left:50%; /* makes the whole thing move to the middle of the page */
position: fixed;
height: 100%;
-webkit-flex;
display: flex;
-webkit-flex-direction: row; /* makes it a row */
-ms-flex-direction: row;
flex-direction: row;
}


/* nav bar buttons */

.container form input {
  height: 15;
  margin: 25px 4;
  z-index: 1;
}

/* code for buttons when selected */

#slide1:checked ~ .labels label {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

#slide2:checked ~ .labels label {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

#slide3:checked ~ .labels label {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
}

#slide4:checked ~ .labels label {
  -webkit-transform: translateY(-300%);
  transform: translateY(-300%);
}

#slide5:checked ~ .labels label {
  -webkit-transform: translateY(-400%);
  transform: translateY(-400%);
}

/* panels - don't touch this bit  */

.container form .labels {
position: absolute;
top: 0 ;
left: -50vw; /*move the slide back to the edge of the page */
width: 100vw;
height: 100vh;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

/* default background colour and transition time for panel movement */

.container form .labels label {
  min-width: 100%;
  min-height: 100%;
  background-color: #2B2B38;
  z-index: 0;
    -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* background colours */

#slide1 {
  background-color: #EECBFF;
}

#slide2 {
  background-color:#e6a92e;
}

#slide3 {
  background-color:#36bc9b;
}

#slide4 {
  background-color:#34495e;
}

#slide5 {
  background-color:#3498db;
}

/* styling for content boxes */

.content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}


</style>
</head>

<body>
<div class="container">
  <form>
   <input type="radio" id="Slide1" name="slid" checked>
    <input type="radio" name="slid" id="Slide2">
    <input type="radio" name="slid" id="Slide3">
    <input type="radio" name="slid" id="Slide4">
    <input type="radio" name="slid" id="Slide5">

    <div class="labels">

      <label for="Slide1" id="Slide1" class="Slide">
      <div class="content">
<div class="box1">I'ljlkj</div>
      </div>
      </label>

      <label for="Slide2" id="Slide2" class="Slide">
      <div class="content">
slide 2
      </div>
      </label>

      <label for="Slide3" id="Slide3" class="Slide">
      <div class="content">
slide 3
      </div>
      </label>

      <label for="Slide4" id="Slide4" class="Slide">
      <div class="content">
slide 4
      </div>
      </label>

       <label for="Slide5" id="Slide5" class="Slide">
      <div class="content">
slide 5
      </div>
      </label>


  </form>
</div>

</body>
</html>