#nav{
    width:100%;
    height:20%;
    border-bottom: 1px solid #55828B;
    display:flex;
    align-items: center;
    justify-content:space-between;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 800;
    font-size:large;
    background-color:#364958;
    color:#C9E4CA;
}
#logo-name{
    padding-left:2%;
    font-family: "Eagle Lake", serif;
}
#logo-name:hover{
    text-decoration:underline wavy;
    text-decoration-color: #55828B;
    cursor: default;
}
#nav > ul {
    display:flex;   
    width:50%;
    /* border: 1px solid black; */
}
ul > li{
    margin-right:10%;
    list-style-type: none;
}
ul > li:hover{
color:#87BBA2;
cursor: pointer;
}

#nav > form{
    display:flex;
    width:50%;
    margin-left:5%;
    
}
form > input[type = search]{
    border-radius:30px;
    margin-right:1%; 
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 900;
    width:40%;
}
form > label {
    margin-right:2%;
}

#submit{
    border-radius:30px;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 900;
}

#submit:hover{
    cursor: pointer;
}

#card-gallery{
    width:auto;
    height:auto; /** change to % val*/
    background-color: #3B6064;
    display:flex;
    flex-wrap:wrap;
    color:#87BBA2;
}

.tarot-card{
    border-bottom:1px solid rgb(255, 255, 255);
    display:flex;
    padding:1%;
    height:auto; /** alter for responsiveness*/
    font-family: "Eagle Lake", serif;
}
.tarot-card > h1{
    margin-left:1%;
    font-size:16px;
    
    
}
.tarot-card > img{
object-fit: contain;
display:block;
max-width:300px;
max-height:400px;
}
#meaning{
    text-decoration: underline;
}

.tarot-info{
    display:flex;
    flex-direction: column;
    margin-left:3%;
}
#about{
    padding:1%;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 900;
    font-size:x-large;
}
sub{
    font-size:medium;
}

a{
    color:#87BBA2;
    text-decoration: none;
}
a:hover {
    
    color:#55828B;
    text-decoration: underline;
}