html {
  height: 100%;
}

@font-face {
  font-family: localRobotoFont;
  src: url('fonts/Roboto-Regular.ttf');
}

@font-face {
  font-family: localRobotoFontBlack;
  src: url('fonts/Roboto-Black.ttf');
}

body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  background: linear-gradient(to bottom, #f5f5f5, #);
  height: 100%;
  font-family: localRobotoFont, Arial, sans-serif;
  overflow-x: hidden;
}

.flex-parent {
  display: flex;
  border: 1px solid black;
  flex-direction: row-reverse;
  
  height: 700px;
  margin: 50px;
  
  
}

.box1, .box2, .box3 {
  border: 1px solid black;
  flex-basis: 33%;
  flex-shrink: 1;
  flex-grow: 1;

  
}


.video-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9: YouTube; */
.video-container-16x9 {
  padding-bottom: 56.42%;
}

/* 4x3 Older Videos */
.video-container-4x3 {
  padding-bottom: 142%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




.box1 {

order: 3;
flex-basis: 33%;
  flex-shrink: 1;
  flex-grow: 1;


}


.box2 {

order: 1;
flex-basis: 33%;
  flex-shrink: 1;
  flex-grow: 1;

}

.box3 {

order: 2;
flex-basis: 33%;
  flex-shrink: 1;
  flex-grow: 1;

}

#myLuke {

width: 100%;
height: auto;

}

#Lukes_stand {

width: 100%;
height: auto;


}