html, body {
margin: 0; padding: 0;
width: 100%; height: 100vh;
font-family: "apercu",sans-serif;
background: rgb(61, 60, 60);
color: #fff; box-sizing: border-box;
}

.hero-section {
    width: 100%; height: 100%; 
    
}

.hero-image{
        position: relative;        
}
#main-img{ 
    position: absolute;
    width: 460px; height: 460px;
    top: 20%; overflow: hidden;
    left: 46%;
}

 #title {
    color: rgb(252, 252, 252);
    top: 500px; position: absolute; left: 31%; 
}
.menu-toggle {
    text-decoration: none;
    left: 0;
    margin: 2em;
    color: rgb(201, 201, 201);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "Lucida Sans Unicode";
    cursor: pointer;
	-webkit-transition: -webkit-transform 0.25s;
	transition: transform 0.25s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
  }

  .nav {
      position: absolute;
      left: 0; top: 50px;
}
  
.nav ul {list-style: none;}

.main-menu-item {
    position: relative;
    margin-top: 50px; 
    left: 2%;
}

.main-menu-item a {
    color: rgb(252, 252, 252); 
    font-weight: lighter;
    font-size: 20px;
    line-height: 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.contact {
    position: absolute;
    bottom: 10px;
    right: 14%;
}
.contact p {
    font-weight: lighter;
    color: grey;
    font-family: "Helvetica";
}

.media {
    position: absolute;
    list-style: none;
    bottom: 10px;
    left: 31%;
    
}
.media .media-tag { 
    color: rgb(172, 170, 170);
    font-family: "Helvetica";
    font-size: 21px;
    text-decoration: none;
}

.media-tag:hover {
    color: #f0e9ed;
    transform:scale(1.2,1.2);
    text-decoration: underline;
}

@media(max-width: 768px) {
    .nav {
          padding-top: 30px;
          left: 2%;
    }
    .main-menu-item a {
        font-size: 18px;
        font-weight: normal;
        line-height: 6px;
        left: 10px;
    }
    #main-img{ 
        width: 350px; height: 350px;
        top: 20%;
        left: 27%;
    }
    .media {
        left: 16%;
        font-size: 16px;
        bottom: 12px;
    }
    .contact {
        bottom: 10px;
    }
    #title {
        top: 55%; left: 16%; 
    }
}

@media(max-width: 420px) {
    .menu-toggle {
        left: 0;
        margin: 2em;
        letter-spacing: 1px;
      }
    .nav {left: 0; 
        margin-top: 10px; 
    }
    .main-menu-item {
        margin-top: 10px; 
        left: 0;
    }
    .main-menu-item a {
        left: 0;
        font-size: 17px;
        font-weight: bolder;
        line-height: 6px;
    }
    .media { 
        left: 16%; 
        font-size: 8px; 
        bottom: 3px;
    } 
    .contact {  bottom: 10px; }
    #main-img{ 
        width: 260px; height: 260px;
        top: 20%;
        left: 18%;
    }

    #title {
        top: 60%; left: 8%; 
    }
}