html, body{
    margin: 0;
    padding-top: 100px;
    height:100%;
    width:100%;
}
body{
    top: 0;
    right: 0;
    background-color:  black !important;
}
nav{
  align-items: center;
  height: 150px;
}

.navbar-toggle {
  border: none;
  outline: none;
}

.navbar-toggler:focus, .navbar-toggler:active {
  outline: none;
  box-shadow: none;
}

.logo{
  width: 150px;
  height: 150px;
}
.main-container{
  display: grid;
  grid-template-columns: repeat(3 3fr);
  justify-content: center;
}
.left{
  width: 20vw;
  grid-column: 1;
  align-self: center;
}
.middle{
  grid-column: 2;
  z-index: 3;
}

.right{
  grid-row: 1;
  width: 20vw;
  grid-column:3;
  align-self: top;
}
.right img{
  width: 30vw;
  margin-left: -8vw;
  transform: rotate(90deg);
}

.last{
  grid-column-end: 4;
  grid-row-end: 2;
  align-self: end;
}

.card{
  width: 50vw;
}

p{
  font-size: 2rem;
  color:rgb(212, 209, 209);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  margin:5px;
}

.last img{
  width: 20vw;
  align-self: end;
}
img{
    box-align:center;
    max-width: 35vw;
    height: 30vw;
}

.meteor{
  width: 25vw;
  filter: invert(90%);
  transform: rotate(-90deg);
}
.carousel{
  text-align: center;
}

footer{
  margin: 0;
  width: 100%;
}

@import "susy";
@import "compass/reset";

.stars, .twinkling, .clouds {
  position:fixed;
  display:block;
  top:0; bottom:0;
  left:0; right:0;
  width:100%; height:110%;
}

/*.stars {
  z-index: -3;
  background: #000 url('https://image.ibb.co/mjnygo/stars.png') repeat top center;
}

.twinkling{
  z-index: -2;
  background:transparent url('https://image.ibb.co/ir1DE8/twinkling.png') repeat top center;
  animation: move-twink-back 200s linear infinite;
}

.clouds{
  z-index: -1;
    background:transparent url('https://image.ibb.co/bT4N7T/clouds.png') repeat top center;
  animation: move-clouds-back 200s linear infinite;
}
*/

@keyframes move-twink-back {
  from {background-position:0 0;}
  to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
  from {background-position:0 0;}
  to {background-position:10000px 0;}
}

@media(pointer:none), (pointer:coarse) {
  .right, .last, .left{
    width: 5vw;
  }
  .right, .last, .left > img{
    width: 5vw;
    display: none;
  }
  .card{
    width: 80vw;
  }
  p{
    font-size: 3rem;
  }
  .main-container{
    justify-content: center;
  }
}