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

body, html {
    /* background-color: #000; */
    overflow: hidden;
    height: 100%;
    margin: 0%;
  }
  
p,h1{
color: #fff;
font-family: 'Roboto Mono', monospace;
}

.quote{
  font-family: 'Helvetica', sans-serif;
  font-size: 0.8rem;
  font-style: italic;

}

.bg-img {
    /* background-image: url('../img/River_full.gif'); */
    /* background-image: linear-gradient(rgba(12,3,51,0.3)); */
    /* position: relative; */
    /* padding: 0 5%;  */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;

}

/* #myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
} */

.box {
    position:fixed;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    /* background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 5px rgba(255, 255, 255, 0.3); */
    background-color: rgba(0,20,0, 0.5);
    box-shadow: 0 3px 5px rgba(0,35,0, 0.3);
    backdrop-filter: blur(3px);
    width: 90%;
    height:max-content;
    max-width: 580px;
    border-radius: 7px;
    align-items: center;
    /* min-height: fit-content; */
}

.header {
    position: relative;
    top: 5%;
    left: 10%;
    padding-top: 1.5rem;
    text-align: center;
    width: 80%;

  }

  .footer {
    position: relative;
    top: 20%;
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 2rem;
    /* center all images inside */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .social-logo {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  
    transition: transform 0.2s;
  
    width: 2rem;
    height: 2rem;
  }
  
  .social-logo:hover {
    transform: scale(1.5);
  }

  /* @media (max-width:767px){
    .box{
      height: 57%;
    }
  } */