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

body {
    width: 100vw;
    height: 100vh;
    padding: 8vw;
    background: #ffffff;
}


img {
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 0;
    display: block;
    position: relative;
    margin: 0 auto;
}

.rectangle {
    width: 36px;
    /*background-color: transparent;*/
    /*background: -webkit-radial-gradient(circle, #171919 0, #171919 5px, #B4B7B2 6px); !* Safari 5.1-6.0 *!*/
    /*background: -o-radial-gradient(circle, #171919 0, #171919 5px, #B4B7B2 6px); !* Opera 11.6-12.0 *!*/
    /*background: -moz-radial-gradient(circle, #171919 0, #171919 5px, #B4B7B2 6px); !* Firefox 3.6-15 *!*/
    /*background: radial-gradient(circle, #fff 4px, #ccc 5px, transparent  6px);*/
    /*background-size: 327px 70px;*/
    /*background-position: -145px 16px;*/
    /*position: relative;*/
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.hole{
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 50%;
}