html {
    height: 100%;
    background-color: #97a89e;
}

body {
    height: 100%;
    
}
a {
    text-decoration: none;
}

p {
    font-size: 18px;
}

.main {
    height: 100%;
}
.social-image{
    width: 30px;
    margin: 15px;
}

.header {
    display: flex;
    justify-content: center;
}
.navbar {
    display: flex;
    justify-content: space-around;
}

.uhh {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}

.title {
    font-family: 'Cabin Sketch', cursive;
    color: #e24444;
    font-size: 26px;
}

.aboutMain {
    background-color: #8b9ba0;
    color: #9b3d36;
}

.oh {
    display: flex;
    justify-content: center;
}

.someOtherImages {
    background-image: url("shooklora.JPG");
    background-repeat: repeat;
    background-size: 200px;
}

h1, h2 {
    font-family: 'Cabin Sketch', cursive;
    color: #164b5b;
}

h3 {
    font-family: 'Cabin Sketch', cursive;
    color: #e24444;
}

p {
    font-family: 'Cabin', sans-serif;
}

.footer {
    display: flex;
    justify-content: flex-start;
}
/*about page CSS*/
.aboutBody {
    display: flex;
}

.aboutMain {
    width: 60%;  
}

.someOtherImages {
    width: 40%;
}

/*character page CSS*/
.content {
    display: flex;
}

.characterDiv {
    width: 50%;
}

.wikiCopyPaste {
    width: 50%;
}
#torna {
    display: inline-block;
    justify-content: center;
    width: 200px;
}

#lora {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #953845;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#jin {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #3F4D79;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#haze {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #A64350;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#addam {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #E0DCB5;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#mythra {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #1BC197;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#minoth {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #A7976D;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#hugo {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #354C66;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#brighid {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #8379B8;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#aegaeon {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #7CAEDA;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#malos {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #3E3E5E;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#goback {
    display: inline-block;
    margin-left: 20px;
    padding: 10px;
    background-color: #826666;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

#characterpage {
    text-align: center;
}

/*gallery*/
.gallery {
    display: flex;
    justify-content: space-around;
}

.thumbnail-image {
    width: 200px;
}

.nice-image {
    width: 400px;
}