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

/* ===================== Mobile/Portrait Tablet styles and Bigger ================ */

body{
    background-color: rgb(36, 39, 90);
    color:rgb(241, 164, 236);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    max-height: 100vh;
}

.container {
    margin: 10px;
}

.topblock{
      background-color: black;
      margin-bottom: 10px;
      padding-bottom: 40px;
}

h1 {
    text-align: center;
     font-size: 1.5em;
}

h1 span{
    font-size: .8em;
}

nav {
    flex-grow:0;
    gap: 10px;
    justify-content: center;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
 
}

nav a {
    background-color: rgb(89, 0, 71);
    width: 40%;
    text-align: center;
    padding: 6px 4px;
    margin:0px 10px;
    text-decoration: none;
    color: rgb(0, 217, 255);
    font-size: .8em;
    text-transform: uppercase;
    font-weight: bold;
    border: 6px groove rgb(83, 1, 81);
}

.topblock .top {
    border: 4px solid rgb(242, 255, 0);
    min-height: 20px;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    background-color: black;
}

.top .hero {
     min-height: 200px;
     aspect-ratio: 2/1;
     margin: 10px;
    display: flex;
}

.hero .hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top .box {
     background-color: orange;
     min-height: 200px;
     aspect-ratio: 2/1;
     margin: 10px;
}

.top .box h2 {
    color: transparent;
    font-size: 1em;
    font-weight: lighter;
}

.bottomblock {
      background-color: black;
      margin-bottom: 10px;
      padding-bottom: 40px;
}

.bottomblock .bottom {
    border: 6px solid rgb(242, 255, 0);
    min-height: 20px;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    background-color: black;
}

.bottom .hero {
     min-height: 200px;
     aspect-ratio: 2/1;
     margin: 10px;
    display: flex;
}

.hero .hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bottom .box {
     background-color: orange;
     min-height: 200px;
     aspect-ratio: 2/1;
     margin: 10px;
}

/* ================ Landscape Tablet and Bigger =========== */

@media screen and (min-width: 1040px) {

    nav a {
        width: auto;
    }

    .topblock .top {
        flex-flow: row nowrap; 
        justify-content: space-between; 
        padding: 0px 60px;
        min-height: 50vh;
    }

    .top .hero {
        width: 50%; 
        order: 1; 
        position: relative;
    }

    .top .box {
        width: 50%; 
        order: 2;
        position: relative; 
    }

    .top .box h2 {
    color: grey;
    font-size: 1em;
    font-weight: lighter;
    position: absolute;
    top: 20%;
    right: -5%;
}

    .top .hero .hero-img {
        position: absolute; 
        max-width: 60% ;max-height: 60%;
        left: 60%;
        top: 20%;
        z-index: 2;
    }

    .bottomblock .bottom {
        flex-flow: row nowrap; 
        justify-content: space-between; 
        padding: 0px 60px;
        min-height: 50vh;
    }

    .bottom .hero {
        width: 50%; 
        order: 2; 
        position: relative;
    }

    .bottom .box {
        width: 50%; 
        order: 1; 
    }

       .bottom .hero .hero-img {
        position: absolute; 
        max-width: 60% ;max-height: 60%;
        right: 60%;
        top: 20%;
        z-index: 2;
    }

}
/* end of wide-screen styles */