/*/////////////////////////// FONT FACE DECLARATION ///////////////////////////*/
@font-face{
  font-family: "Figtree";
  src: url(Fonts/Figtree.tff);
}

@font-face{
  font-family: "CreteRound";
  src: url(Fonts/CreteRound.tff);
}


/*///////////////////// BREAKPOINTS & RESPONSIVENESS //////////////////////////*/

/* SMALL PHONES */
@media only screen and (max-width: 600px) {
    .logo{
      width: 200px;
      /*background: blue;*/
    }

    .content{
      margin: 400px auto 0;
    }
    .content h1{
      font-size: 40px;
    }
    .content p, a{
      font-size: 18px;
    }

    .instagramfooter h1{
      font-size: 22px;
    }
    .instagramfooter a img{
        width: 70px;
    }
}


/* PORTRAIT TABLETS & LARGE PHONES */
@media only screen and (min-width: 600px) {
    .logo{
      width: 275px;
      /*background: green;*/
    }

    .content{
      margin: 450px auto 0;
    }
    .content h1{
      font-size: 45px;
    }
    .content p, a{
      font-size: 20px;
    }

    .instagramfooter h1{
      font-size: 24px;
    }
    .instagramfooter a img{
        width: 70px;
    }
}


/* lANDSCAPE TABLETS */
@media only screen and (min-width: 768px) {
    .logo{
      width: 350px;
      /*background: purple;*/
    }

    .content{
        margin: 550px auto 0;
    }
    .content h1{
      font-size: 50px;
    }
    .content p, a{
      font-size: 24px;
    }

    .instagramfooter h1{
      font-size: 26px;
    }
    .instagramfooter a img{
        width: 60px;
    }
}


/* SMALL LAPTOPS */
@media only screen and (min-width: 1200px) {
    .logo{
      width: 400px;
      /*background: red;*/
    }

    .content{
      margin: 800px auto 0;
    }
    .content h1{
      font-size: 65px;
    }
    .content p, a{
      font-size: 26px;
    }

    .instagramfooter h1{
      font-size: 30px;
    }
}

/* LARGE DESKTOPS */
@media only screen and (min-width: 2000px) {
}



/*///////////////////// GENERAL STYLING //////////////////////////*/
*{                                                                              /* General styling that will apply to the entire website */
    margin: 0;
    padding: 0;
    font-family: 'Figtree', serif;
    box-sizing: border-box;
}


.hero{                                                                          /* Hero section (Navigation Logo and Text)*/
    width: 100%;
    min-height: 100vh;
    background-image:linear-gradient(180deg, rgba(0, 62, 109, 0.50), rgba(0, 36, 90, 0.25));
    background-position: center;
    background-size: cover;
    padding: 40px 8%;                                                           /* padding for sides of the hero section */
    text-align: center;
    color: #ffffff;
}

nav{                                                                            /* Navigation Bar (Housing for Logo) */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo{                                                                          /* Logo */
    cursor: pointer;
}


.content h1{
    font-weight: 300;
    padding-bottom: 40px;
}
.content h1 span{
    font-weight: 600;
}
.content p, a{
    font-weight: 300;
    width: 90%;
    height: 40px;
    color: #ffffff;

    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}


.instagramfooter{
    margin: 55px auto 0;
    text-align: center;
    justify-content: center;
    color: #ffffff;
}
.instagramfooter h1{
  font-weight: 600;
  padding-bottom: 40px;
}


#StarrySkyVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}