*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.nav{
    overflow: hidden;
    height: 55px;
    background-color: #000;
    display: block;
    justify-content:space-evenly;
    align-items: center;
    padding: 0rem calc((100vw -1300px)/2);
}
.nav-items #myLinks {
    display: none;
}

.nav-items a{
    float: center;
    text-decoration: none;
    color: #FFFF;
    justify-items: center;
    font-size: 3rem;
    padding: 0 13.4rem;
}

.nav-items a.icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 1rem;
}

.nav-items a:hover {
    background-color: #ddd;
    color: black;
}

.hero{
    background: #757575;
}

.hero-container{
    display: flex;
    grid-template-columns: repeat(1fr 1fr);
    height: 95vh;
    padding: 0rem calc((100vw -1300px)/2);
    gap: 10px;
}

.bot {
    background-color: #543A58;
    height: 50px;
    bottom: 0;
    width: 100%;
}
@media only screen and (max-width: 620px) {
    /* For mobile phones: */
    .nav, .nav-items .hero, .hero-container{
      width: 100%;
    }
    .nav{
        height: 30px;
    }
    .nav-items a{
        justify-content: space-between;
        font-size: 1.57rem;
        padding: 0 .83rem ;
    }
}