/* CSS Document */

html {
    scroll-behavior: smooth;
}

body {
    padding: 0%;
    margin: 0; 
    font-family: 'Poor Story', cursive;
    background-color: #2f3134;
    color: #899cb9;
    font-size: 12pt;
}

footer {
    padding: 2%;
    text-align: center;
}

hr {
    border: 1px solid #676e7a;
}

a:link {
    color: #827eaa;
}

a:hover {
    color: #d2cff3;
}

a:visited {
    color: #6fa0bb;
}

.phototips {
    padding-top: 1pt;
    padding-bottom: 1pt;
    margin-top: 12pt;
    width: 60%;
}

.footertext {
    list-style: none;
    font-size: 10pt;
    line-height: 18pt;
}

.websitebox {
    width: 75%;
    margin: auto;
    border: 1px solid transparent;
}

.mainarticle {
    text-align: center;
}

.mainparagraph {
    display: flex;
    justify-content: center;
    margin-bottom: 18pt;
}

.subArticleContainer {
display: flex;
gap: 4%;
}

.subarticle {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: #899cb9 dotted;
    border-radius: 8px;
    width: 35%;
    box-sizing: border-box;
    padding-top: 12pt;
    padding-bottom: 12pt;
}

.subarticletext {
    width: 85%;
}

.minipic {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navi {
    font-size: 24px;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding-top: 5px;
    display: flex;
}

.navi li {
    padding-right: 4%;
}

.navi a:link {
    color: #a789b8;
}

.navi a:hover {
    color: #e3c7f1;
}

.navi a:visited {
    color: #7ab4d3;
}

#mainp {
    font-size: 14pt;
    width: 65%;
    line-height: 24px;
    border: 1pt solid;
    padding: 10pt 20pt;
    border-radius: 8px;
}

#tipslist {
    font-size: 14pt;
}