/* || General rules */

html,
body {
  margin: 0;
  padding: 0;
  background-color: #1B262C;
  height: 100vh;
}


p {
  margin: 0;
}

/* include border and padding in element width and height */
* {
  box-sizing: border-box;
}


/* nav */
.nav-wrapper {
  background-color: #1B262C;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  vertical-align:middle;
}

.go-home {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.go-home img {
  height: 20px;
}


/* main ctn */
.container {
  display: grid;
  place-items: center;
  height: 90%;
  width: 100vw;
  max-width: 90vw; /* override materiliaze here */
}

.home-main-ctn {
  display: flex;
  flex-direction: column;
  justify-items: center;
  width: 50%;
  margin-top: -5vmin;
}


/* buttons */
.btn-ctn {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 50%;
}

.btn-ctn a {
  background-color: #1B5364;
  margin: 1vmin 0;
  color: white;
}

.btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus {
  background-color: #48b3c6 !important;
}

.btn:hover, .btn-large:hover, .btn-small:hover, .btn-floating:hover {
  background-color: #48b3c6 !important;
}

.horiz-separator {
  border-top: 1px solid white;
  width: 80%;
  display: flex;
  margin: 2vmin auto;
}

.material-icons {
  color: white;
  font-size: 18px
}



/* .btn {
  background-color: #48b3c6;
  padding: 0px;
} */


/* .btn i{
  height: 20px !important;
  width: 20px !important;
} */







/* || Media Queries */

/* Tablets */

@media screen and (max-width: 1024px) {
  .container {
    max-width: 100vw;
  }
}

/* Phone */

@media screen and (max-width: 600px) {
  .container {
    max-width: 100vw;
  }
}