@import url(https://fonts.googleapis.com/css?family=Margarine:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Quicksand:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Atma:wght@300;400;500;600;700&display=swap);

* {
    margin: 0;
    padding: 0;
}

h1 {
    font-family: "Margarine";
    color: #FF8799;
}

h2 {
    font-family: "Margarine";
    color: #FF8799;
}

b {
    font-family: "Quicksand";
    color: #FF8799;
}

p {
    margin-top: 10px;
    margin-bottom: 10px;
}

.tab { margin-left: 70px; }

.content .container li {
    margin-left: 45px;
}

.content .container ul li {
    margin-left: 45px;
}

body {
    background-color: mistyrose;
}

#logo-img {
    display: flex;
    max-width: 100%;
}

nav {
   width: 100%;
   height: 70px;
   background-color: lightpink; 
   font-family: "Atma";
   text-align: center;
}

nav ul {
   display: flex;
   justify-content: space-around;
}

nav ul li {
   list-style: none;
   position: relative;
}

nav ul li a {
   display: block;
   text-decoration: none;
   color: white;
   font-weight: bolder;
   padding: 19px 20px;
   font-size: 20px;
}

nav ul li a:hover {
   background-color: #FFE0E5;
   color: #FF8799;
}

nav ul li ul {
   display: none;
   position: absolute;
   background-color: lightpink;
   padding: .5px;

}

nav ul li:hover ul {
   display: block;
}

nav ul li ul li {
   width: 250px;
}

nav ul li ul li a:hover {
   background-color: #FFE0E5;
   color: #FF8799;
   padding: 14.5px 20px;
}

@media (max-width: 1048px) {
    nav ul {
        margin-right: 20px;
    }

    nav ul li a {
        font-size: 15px;
    }

    nav ul li ul li {
        width: 150px;
     }
}

@media (max-width: 600px;) {
    nav ul {
        margin-right: 10px;
    }

    nav ul li a {
        font-size: 10px;
    }
}

.italics {
    font-style: italic;
}

.content {
    font-family: "Quicksand";
    color: black;
    max-width: 95%;
    margin: 18px auto;
    padding: 30px 20px 30px 20px;
    background-color: white;
    min-height: 50%;
}

.container {
    padding: 15px 40px 15px 40px;
}

.container a {
    color: #FF8799;
}

.content a {
    color: #FF8799;
}

.narcissa-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.narcissa-img {
   max-width: 100%;
   height: auto;
}

.narcissa-text {
    padding-left: 23%
}

.raka-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.raka-img {
   max-width: 100%;
   height: auto;
}

.raka-text {
    padding-left: 11%
}

.haldisa-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.haldisa-img {
   max-width: 100%;
   height: auto;
}

.haldisa-text {
    padding-left: 16%
}

.chava-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.chava-img {
   max-width: 100%;
   height: auto;
}

.chava-text {
    padding-left: 23%
}

.calanthe-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.calanthe-img {
   max-width: 100%;
   height: auto;
}

.calanthe-text {
    padding-left: 17%
}

.senka-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.senka-img {
   max-width: 100%;
   height: auto;
}

.senka-text {
    padding-left: 23%
}

.sari-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.sari-img {
   max-width: 100%;
   height: auto;
}

.sari-text {
    padding-left: 23%
}

.nisha-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.nisha-img {
   max-width: 100%;
   height: auto;
}

.nisha-text {
    padding-left: 23%
}

.inara-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.inara-img {
   max-width: 100%;
   height: auto;
}

.inara-text {
    padding-left: 19%
}

.naltla-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.naltla-img {
   max-width: 100%;
   height: auto;
}

.naltla-text {
    padding-left: 23%
}

.ravna-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.ravna-img {
   max-width: 100%;
   height: auto;
}

.ravna-text {
    padding-left: 24%
}

.galleia-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.galleia-img {
   max-width: 100%;
   height: auto;
}

.galleia-text {
    padding-left: 24%
}

.mara-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.mara-img {
   max-width: 100%;
   height: auto;
}

.mara-text {
    padding-left: 20%
}

.cairn-box {
    margin: 25px 0;
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.cairn-img {
   max-width: 100%;
   height: auto;
}

.cairn-text {
    padding-left: 24%
}

.creator-box {
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
}

.creator-img {
   max-width: 100%;
   height: auto;
}

.creator-text {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 2%;
}

.anastasia-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.anastasia-img {
   max-width: 100%;
   height: auto;
}

.anastasia-text {
    padding-left: 23%
}

.soto-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.soto-img {
   max-width: 100%;
   height: auto;
}

.soto-text {
    padding-left: 21%
}

.lumi-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.lumi-img {
   max-width: 100%;
   height: auto;
}

.lumi-text {
    padding-left: 24%
}

.lamia-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.lamia-img {
   max-width: 100%;
   height: auto;
}

.lamia-text {
    padding-left: 24%
}

.adrian-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.adrian-img {
   max-width: 100%;
   height: auto;
}

.adrian-text {
    padding-left: 24%
}

.noelle-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.noelle-img {
   max-width: 100%;
   height: auto;
}

.noelle-text {
    padding-left: 22%
}

.bridget-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.bridget-img {
   max-width: 100%;
   height: auto;
}

.bridget-text {
    padding-left: 22%
}

.kimi-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.kimi-img {
   max-width: 100%;
   height: auto;
}

.kimi-text {
    padding-left: 22%
}

.adriel-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.adriel-img {
   max-width: 100%;
   height: auto;
}

.adriel-text {
    padding-left: 22%
}

.heliod-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.heliod-img {
   max-width: 100%;
   height: auto;
}

.heliod-text {
    padding-left: 20%
}

.camellia-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.camellia-img {
   max-width: 100%;
   height: auto;
}

.camellia-text {
    padding-left: 20%
}

.astrid-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

.astrid-img {
   max-width: 100%;
   height: auto;
}

.astrid-text {
    padding-left: 13%
}

.max-box {
    padding: 30px 20px 30px 20px;
    box-shadow: 0 5px 15px rgba(199, 26, 86, 0.199);
    display: flex;
}

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

.max-text {
    padding-left: 11%
}

.footer {
    font-family: "Atma";
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: lightpink;
    color: white;
    text-align: center;
    font-style: italic;
}