Crypto-Birdies/client/assets/css/styles.css

/* HTML Elements */
body {
    background: 
    url(../images/vector-river-scene-with-trees-and-hills.jpg);
    background-size: cover;
    font-family: Poppins;
    font-weight: 500;
    letter-spacing: 1px; 
    }

footer {
    background: whitesmoke;
    border-radius: 5px;
    height: 30px;
    padding: 2vh;
    padding-bottom: 40px;
    text-align: center;
    width: auto;
}

h1 {
    color: #f8f9fa;
}

html {
    box-sizing: border-box;
    color: rgb(48, 46, 46);overflow-y: scroll;
}

p {
    color: #f8f9fa;
    height: 0.8em;
}

/* Classes */
.birdAttributes {
    background-color: #ededed;
    border-radius: 10px;
    left: 3em;
    padding: 25px;
}

.birdBox {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    z-index: 20;
}

.bottomList {
    margin-left: -2.5em;
}

.buyBox {
    background-color: #f8f9fa;
    border-radius: 10px;
    display: inline-flex;
    height: 34em;
    min-width: 20.7em;
    max-width: 20.7em;
    z-index: 20;
}

.buyButton {
    border-radius: 5px;
    margin-left: 7em;
}

.cancelButton {
    border-radius: 5px;
    margin-left: 5em;
}

.card-deck{
    background: transparent;
    border-width: 5px;
    position: relative;
    top: 0em;
    z-index: 1;
}

.card-img-top {
    height: 200px;
}

.card-special {
    background-color: seagreen;
    height: 10em;
}

.card-text {
    color: black;
    font-weight: bold;
    text-align: center;
}

.card-title {
    font-weight: bold;
    text-align: center;
}

.catalogBox {
    background-color: #f8f9fa;
    border-radius: 10px;
    height: 34em;
    min-width: 20.7em;
    max-width: 20.7em;
    padding-right: 30px;
    z-index: 20;
}

.dnaDiv {
    bottom: 5px;
    font-size: 18px;
    left:20px;
    position: absolute;
}

.evolvingHeart {
    left: -20em;
    position: relative;
    top: -20em;
}

.navbar {
    border-radius: 5px;
    color: black;
    font-weight: bold;
}

.offerBox {
    background-color: #f8f9fa;
    border-radius: 10px;
    display: inline-flex;
    height: 34em;
    min-width: 20.7em;
    max-width: 20.7em;
    z-index: 20;
}

.row {
    margin-left: -0.4em;
}

.submitButton {
    margin-right: 1em;
}

.topCard {
    background: seagreen;
    border-width: 5px;
    float: none;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

/* IDs */
#breedAgainButton {
    left: 28.4em;
    position: relative;
    top: -65em;
}

#breedButton {
    left: 10em;
    position: relative;
    top: -50em;
}

#breedFooter {
    position: relative;
    top: -33em;
}

#cardButton {
    left: 2em;
    position: relative;
}

#cardTitle {
    color: #343a40;
    text-align: center;
}

#childBox {
    background-color: #f8f9fa;
    border-radius: 10px;
    height: 31em;
    min-width: 21em;
    max-width: 21em;
    padding-right: 30px;
    z-index: 20;
}

#childDisplay {
    left: 21.3em;
    opacity: 90%;
    position: relative;
    top: -66em;
    width: 30em;
    z-index: 50;
}

#createButton {
    border-radius: 5px;
    left: 21em;
}

#dadData {
    float: right;
    margin-right: 1em;
}

#dameBox {
    background-color: #fdb1f3;
    border-radius: 10px;
    height: 31em;
    min-width: 21em;
    max-width: 21em;
    padding-right: 30px;
    z-index: 20;
}

#dameButton {
    left: 8em;
    position: relative;
    top: -34em;
}

#dameDisplay {
    left: 1em;
    opacity: 90%;
    position: relative;
    top: -3em;
    width: 30em;
}

#defaultButton {
    border-radius: 5px;
    left: 3.4em;
}

#genData {
    float: right;
    margin-right: 1em;
}

#idData {
    float: left;
}

#logo {
    border-radius: 40%;
}

#mumData {
    float: left;
}

#offerAmount {
    position: relative;
    width: min-content;
}

#pauseMessage {
    text-align: center;
}

#randomizeButton {
    border-radius: 5px;
    left: 0.2em;
}

#sireBox {
    background-color: #5caaf8;
    border-radius: 10px;
    height: 31em;
    min-width: 21em;
    max-width: 21em;
    padding-right: 30px;
    z-index: 20;
}

#sireButton {
    left: 40em;
    position: relative;
    top: -34em;
}

#sireDisplay {
    left: 41.5em;
    opacity: 90%;
    position: relative;
    top: -34.5em;
    width: 30em;
}

#swapButton {
    left: 26.4em;
    position: relative;
    top: -49em;
}