@font-face {
    font-family: 'Sequel100Black-95';
    src: url('Sequel100Black-95.woff2') format('woff2'),
        url('Sequel100Black-95.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('BarlowCondensed-Medium.woff2') format('woff2'),
        url('BarlowCondensed-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('BarlowCondensed-Bold.woff2') format('woff2'),
        url('BarlowCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('BarlowCondensed-Regular.woff2') format('woff2'),
        url('BarlowCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,body{
  margin:0;
  padding:0;
}
h1{
    font-family: 'Sequel100Black-95';
    font-weight: 900;
    color:#FFF;
    font-size:5em;
    margin:10px 20px;
}

p{
    font-family: 'Barlow Condensed';
    font-weight: 500;
        color:#FFF;
          font-size:2em;
          margin:-15px 0 15px 0;
}

.background{
  width:100%;
  height:100vh;
  background:url('background.jpg');
  background-repeat: no-repeat;
  background-size:cover;
}

.logo{
  max-width: 900px;
  width:100%;
  margin: auto;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction: column;
}

.logo img{
    width: 30%;
    max-width:200px;
  }


.blackbar{
  height:75px;
  background:#000;
  position:absolute;
  bottom:0;
  width:100%;
  display: flex;
  justify-content: space-between;
}

.instagram::before{
  display: block;
  content:'';
  width:10px;
  height:65px;
  background:url('bars.png');
  background-size:cover;
}


.instagram::after{
  display: block;
  content:'';
  width:10px;
  height:65px;
  background:url('bars.png');
  background-size:cover;
}

.instagram{
  border: 5px solid  black;
  border-style:inset;
    font-family: 'Barlow Condensed';
    font-weight:bold;
  height:65px;
  background: #FFF;
    display: flex;
    align-items: center;
}

.instagram a{
    padding:0px 40px;
  color:#000;
  text-decoration: none;
}

.info{
        font-size:0.5em;
  display: flex;
  justify-content: flex-end;
  align-items:center;
  margin-right:20px;
}

.info p{
  margin:0;
  display: flex;
}


.info p:nth-child(1):after,
.info p:nth-child(2):after{
  display: inline-block;
  content:'';
  width:20px;
  height:20px;
  margin:0 20px;
  background:url('slash.png');
  background-size:cover;
}

@media only screen and (max-width:800px){
  h1{
      font-size:2em;
  }
  p{
      font-size:1em;
  }
  .blackbar{
      flex-direction: column;
      height:150px;

  }

  .info{
    justify-content:center;
    align-items: center;
    padding-bottom:20px;


  }

  .instagram{
    width:calc(100%-10pc);

  }
  .instagram a{
      margin: auto;
  }


}