html, body {
height: 100%;
margin: 0;
/*background-color: lightblue;*/
}
.container {
/*background: aqua;*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
padding: 2% 2% 0% 2%;
}
.flex {
order: 1;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 90%;
padding: 2% 2% 2% 2%;
/*background: url('bg.png')
background-size: 100% 100%;
background-origin: border-box;
background-clip: border-box;*/
/*background: red;*/
}
.vimeoFrame {
position: relative;
width: 100%;
padding-top: 100%;
/*background-color: #61E6A8;*/
}
.aspect4x5 {
width: 100%;
padding-top: 125%;
}
.alignTop {
align-self: flex-start;
}
.title {
font-family: 'Krona One', sans-serif;
font-size: 28px;
}
.description {
margin-left: auto;
position: relative;
width: 44%;
max-width: 44%;
background-color: #FFFFFF;
padding: 0% 2% 2% 2%;
font-family: 'Commissioner', sans-serif;
font-size: 18px;
/*background: aqua;*/
}
h1 {
font-family: 'Cinzel', serif;
font-size: 28px;
}
h2 {
font-family: 'Cinzel', serif;
font-size: 14px;
}
/*format for landscape*/
@media (min-aspect-ratio: 4/3) {
.flex {
flex-basis: 46%;
padding: 1% 1% 2% 1%;
}
.description {
max-width: 44%;
padding: 0% 2% 0% 4%;
/*background-color: lightblue;*/
}
}