@font-face {
    font-family: pixelFont;
    src: url(fonts/DTM-Mono.otf);
}

body {
    font-family: pixelFont;
    text-align: center;
    background-color: #48006a;
    color: #0e0024;


    /* Making the pixelated images smooth */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;

    /* Hero image */
    background-image: url("img/pixelated_background.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

* {
    box-sizing:border-box;
}

h1 {
    font-size: 3vw;
}

h2 {
    font-size: 2vw;
}

.title {
    padding: 2vw;
}

.left {
    padding:20px;
    float:left;
    width:33.3%; /* The width is 20%, by default */
  }
  
.main {
    padding:20px;
    float:left;
    width:33.3%; /* The width is 60%, by default */
  }

.video-container {
    width: 60%;
    aspect-ratio: 16/9;
    margin: 0 auto;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.right {
    padding:20px;
    float:left;
    width:33.3%; /* The width is 20%, by default */
  }
  
  /* Use a media query to add a break point at 800px: */
  @media screen and (max-width:1000px) {
   .left  , .main, .right {width:100%;}
  }

.frame {
    background-color: #48006a;
    padding: 0;
}

.frame img{
    background-image: url("img/image_holder.png");
    background-repeat: no-repeat;
    background-color: #8300cf;
    width: 100%
  }