html {
    height: 100%
}
body {
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    position: relative;
    height: 100%;
}

ul {
    padding-inline-start: 3em;
}

@media (max-width: 420px) {
    .info-width {
        width: 100%;
        height: 50%;
        font-size: 4vw;
    }
}
@media (min-width: 420px) and (max-width: 1600px) {
    .info-width {
        width: 28%;
        font-size: 2vw;
    }
}
@media (min-width: 1600px) {
    .info-width {
        width: 22%;
        font-size: 1.4vw
    }
}

@media (max-width: 420px) {
    .info {
        float: left;
        color: #FFF;
        position: fixed;
        bottom: 0;
        box-shadow: -1px -1px 9px 0px #333;
    }
}
@media (min-width: 420px) {
    .info {
        min-height: 100%;
        float: left;
        color: #FFF;
        position: relative;
        box-shadow: -1px -1px 9px 0px #333;
    }
}

@media (max-width: 420px) {
    .content {
        margin-top: 11vw;
        position: fixed;
        z-index: -1;
        height: 50%;
        width: 100%;
    }
}
@media (min-width: 420px) {
    .content {
        position: fixed;
        z-index: -1;
        height: 100%;
        width: 100%;
    }
}
@media (min-width: 420px) and (max-width: 1600px) {
    .content-width {
        margin-left: 10%;
    }
}
@media (min-width: 1600px) {
    .content-width {
        margin-left: 4%;
    }
}