style.css

body {
  background-color: white;
}

#container-jumbotron.jumbotron {
  margin-bottom: 0rem;
  padding-bottom: 1rem;
}

#container-background {
  display: grid;
  height: 100%;
}

.hogwarts {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

#container-form {
  text-align: center;
  border: 2px solid black;
  margin: 75px 50px 0px;
  padding: 20px 60px;
  border-radius: 10px;
}

.form {
  margin: 0px 0px 10px;
}

div#container-buttons {
  justify-content: space-evenly;
  display: inline-flex;
  margin: 50px 0px 50px;
}

#container-houses {
  position: relative;
  display: grid;
  height: 100%;
}

img.houses {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

div#container-student {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

div#container-army {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  top: 250px;
}

.house-button {
  width: 200px;
}

div.card {
  border: 2px solid black;
  margin: 40px 0px;
  border-radius: 10px;
  width: 300px;
}

.card-body {
  padding: 20px 0px;
}

h5.card-title {
  font-size: 30px;
  text-align: center;
}

p.card-text {
  font-size: 20px;
  text-align: center;
}

.card-subtitle {
  padding: 10px;
}

a.btn.btn-primary {
  width: 125px;
}

button#startSort.btn.btn-primary {
  width: 125px;
}

a#start-sort.btn.btn-primary.btn-lg {
  width: 250px;
}

p.card-text.Gryffindor {
  background-color: #b71c1c;
  color: white;
}

p.card-text.Ravenclaw {
  background-color: #0d47a1;
  color: white;
}

p.card-text.Slytherin {
  background-color: #1b5e20;
  color: white;
}

p.card-text.Hufflepuff {
  background-color: #fdd835;
  color: white;
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}