html {
  box-sizing: border-box;
}

/* The Universal Selector */
*, /* All elements*/
*::before, /* All ::before pseudo-elements */
*::after {
  /* All ::after pseudo-elements */
  /* height & width will now include border & padding by default but can be overridden as needed */
  box-sizing: inherit;
}

/* resets font size to be 62.5% of the user preference - in most browser configurations this will be 10px */
:root {
  font-size: 62.5%;
}

body {
  /* Use a system font, if none are available use an available sans-sarif font */
  font-family: 'Acme', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-areas:
    "nav"
    "main";
  font-size: 1.8rem;
  background: url('/images/background4.jpg') darkblue;
  background-size: cover;
}

nav {
  grid-area: nav;
  background-color: #4D77FF;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px 0 30px;
}

nav > a {
  margin: 20px;
  text-decoration: none !important;
  padding: 6px;
  border-radius: 5px;
  color: #FFCA03;
  text-shadow: 1px 1px 1px black;
  font-size: 2rem;
}

nav > a:hover {
  color: white;
  background-color: #424748;
}

main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
  color: white;
}

h1 {
  font-size: 4.5rem;
  text-shadow: 2px 2px 2px black;
}

h2 {
  font-size: 3.4rem;
  text-shadow: 2px 2px 2px black;
}

h3 {
  font-size: 2.5rem;
  text-shadow: 2px 2px 2px black;
}

h4 {
  font-size: 2.2rem;
}

.card-text {
  margin: 4px;
  font-size: 2.2rem;
}

.main-title h1{
  margin-top: 15%;
}

.title {
  margin: 2% 0;
}

.main-button-container {
  margin-top: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-button-container a {
  margin: 0 30%;
  font-size: 2rem;
  box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
}

.add-btn {
  margin-bottom: 2%;
  font-size: 2rem !important;
  box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
}

.card-button-group {
  margin-top: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-button-group a {
  margin: 0 7px;
}

.btn-success, .btn-danger {
  width: 70px;
  font-size: 2rem !important;
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,.8);
}

.add, .btn-warning {
  font-size: 1.8rem !important;
  width: 100px;
  margin-bottom: 1%;
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,.8);
}

.look {
  font-size: 2rem !important;
  width: 120px;
  margin-bottom: 1%;
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,.8);
}

.new-item {
  text-align: center;
  padding: 1%;
  border: solid 2px black;
  background-color: #a5cafa;
  color: rgb(0, 0, 0);
  font-size: 2.2rem;
}

.new-item button {
  width: 30%;
  margin-bottom: 3%;
  font-size: 2rem;
  box-shadow: 2px 2px 4px 2px rgba(0,0,0,.8);
}

.new-item p {
  font-size: 1.8rem;
  margin: 0 auto;
}

.profile-ref {
  text-decoration: none !important;
  color: #F0A500;
}

.prof-card {
  text-decoration: none !important;
  text-shadow: 1px 1px 1px black;
}

.fas::before {
  font-size: 2.2rem;
  font-family: "Font Awesome 5 Free";
}

.card {
  color: black;
  margin-bottom: 1%;
  background-color: #a5cafa;
  border: solid 1px black;
}

.card-body {
  padding: 10px 0 1%;
}

.card-title {
  text-shadow: none;
}

.card img {
  max-width: 80%;
}

.btn {
  font-size: 1.6rem;
}

#logo {
  width: 45px;
  object-fit: contain;
  margin-right: auto;
  text-align: center;
}

#galaxy-description {
  width: 65%;
}

@media only screen and (max-width: 1050px) {
  nav > a {
    margin: 0 5px;
    text-decoration: none !important;
    padding: 4px;
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 500px) {
  
  main {
    width: 90%;
  }

  .card {
    width: 80% !important;
  }
}