* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  /*cursor: pointer;*/
  font-family: Oswald, helvetica, sans-serif;
  font-feature-settings: normal;
  /* font-size: 54px; */
  font-style: normal;
  font-weight: 400;
  letter-spacing: -1.35px;
  background-color: rgb(0, 0, 0);
  color: white;
  line-height: 1.3;
  font-size: calc(1em + 1vw);
}

p {
	font-size: calc(.5em + 1vw);
	margin: .2em;
}
.ubuntu-mono-regular {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-size: .5em;
  font-style: normal;
}

.ubuntu-mono-bold {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-mono-regular-italic {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-mono-bold-italic {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-style: italic;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

.container {
  width: 80%;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: .8em .8em;  /*(100-32*3)/2 */
  justify-content: space-around;
}

.border {
  border: 1px dotted #cdcdcd;
  padding: .5em;
}
/* Create three equal columns that sits next to each other */
.column33 {
  flex: 32%;
  max-width: 31%;
}

/* Create Four equal columns that sits next to each other */
.column4 {
  flex: 25%;
  max-width: 24%;
}

.column50 {
  flex: 50%;
  max-width: 49%;
  font-size: calc(1em + 1vw);
}

.column6 {
  flex: 14%;
  max-width: 14%;
}


/* Responsive layout - makes a two column-layout instead of four columns*/
@media (max-width: 1070px) {
.column50, .column33, .column4, .column6 {
    flex: 50%;
    max-width: 45%;
  }
  .container {
   width: 100%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column50, .column33, .column4, .column6 {
    flex: 100%;
    max-width: 100%;
  }
.container {
   width: 100%;
}
p {
	font-size: calc(1em + 1vw);
}
}