@import url('https://fonts.googleapis.com/css2?family=Coiny&family=Roboto&display=swap');

html {
    height: 100%;
    background: #fff;
}

body {
    color: #545454;
    margin: 0;
}

.homeBody {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 400;
    line-height: 1.2;
    font-family: 'Coiny';
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}

a {color: #0083e8;}

.av {
    font-size: 1em;
}

b, strong {font-weight: 600;}

samp {display: none;}

.ft {
    display: flex;justify-content: center;align-content: center;align-items: center;
    margin-top: 0.4em;
}
.ft h1 {
    margin:0;
    flex: 0 auto;
}
.ft h2 {
    margin: 0;
    flex: 0 auto;
}
.content {
    flex: 0 1 auto;
    line-height: 1.5;
    font-size: 1.2em;
    font-family: 'Roboto', sans-serif;
}

.buster {
    flex: 0 0 auto;
    background-color: #292a2b;
    text-align: center;
    background-image: url(/img/buster2.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 8em;
    max-height: 1117px;
    display: block;
}
.hcenter {
    text-align: center;
}
.appico {
    height: 32px;
    width: 32px;
    vertical-align:bottom;
    margin-right: 0.4em;
    text-align: center;
}
.appicoS {
    height: 32px;
    width: 32px;
    vertical-align:bottom;
    margin: 0.4em;
    text-align: center;
}
.mar10 {
    margin: 1em;
}
.dslink {
    display: flex;justify-content: flex-end;align-content: flex-end;margin: 0.3em 1em 0.3em 0.2em;
    font-family: 'Roboto';
}
.footer {
    flex-shrink: 0;
    margin-top: 1em;
}
.pageHeader {
    background-color:black;color:white;display:flex;justify-content:flex-start;align-content:center;align-items: center;
    font-family: 'Roboto';
}
.headerText {
    font-size:1.2em;margin: 0.15em;
}
.pageHeader a:link {
  text-decoration: none;
}

.pageHeader a:visited {
  text-decoration: none;
}

.pageHeader a:hover {
  text-decoration: none;
}

.pageHeader a:active {
  text-decoration: none;
}


.instagram{
  width: 180px;
  height: 28px;
  border: 1px solid #CCD;
  margin-left: 8px;
  color: blue;
  border-radius: 5px;
}
.instagram:hover{
  background-color: #CCD;
  color: #FFF;
}
.link{
  text-decoration: none;
}
.display{
  padding: 2px 0px 2px 10px;
}
.logo{
  float: left;
  width: 24px;
  height: 24px;
  background: linear-gradient(to bottom right,#feda75,#fa7e1e,#d62976,#962fbf);
  border-radius: 20%;
}
.container{
  width: 100%;
  height: 100%;
  float: left;
  padding-top: 1px;
}
.camera{
  margin: auto;
  width: 70%;
  height: 70%;
  border-radius: 25%;
  background: transparent;
  border: 2px solid #FFF;
}
.lens{
  width: 40%;
  height: 40%;
  border: 2px solid #FFF;
  border-radius: 100%;
  margin-left: 17%;
}
.flash{
  background-color: #FFF;
  width: 14%;
  height: 14%;
  border-radius: 100%;
  margin-top: 10%;
  margin-left: 70%;
}
.text{
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: black;
}
.text-container{
  padding: 2px 0px 0px 34px;
}

@media screen and (min-width: 28.75em)
{
    h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    }
    h1 {
    font-size: 4em;
    }
    h2 {
    font-size: 2em;
    }
    .content {
    line-height: 1.5;
    font-size: 0.75em;
    }
    .av {
        font-size: 1.3em;
    }
    .buster {
    height: 10em;
    }
}
@media screen and (min-width: 40.5em)
{
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.5;
    }
    h1 {
        font-size: 4em;
    }
    h2 {
        font-size: 2em;
    }
    .appico {
        width:64px;
        height: 64px;
    }
    .content {
    line-height: 1.5;
    font-size: 1em;
    }
    .buster {
    background-image: url(/img/busterBig.png);
    height: 16em;
    }
}