@font-face {
    font-family: "Roboto Regular";
    src: url("fonts/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Lobster Regular";
    src: url("fonts/Lobster-Regular.ttf");
}

a {
    color: #382830;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 4px dotted #382830;
}

body {
    margin: 0px;
    background-color: #e8e8d8;
}

div.box0 {
    padding: 6% 10% 6% 10%;
}

div.box1 {
    padding: 2% 2% 2% 2%;
}

div.box2 {
    padding: 4% 4% 4% 4%;
}

div.center {
    text-align: center;
}

div.row {
    display: flex;
    flex-direction: row;
    flex: 1;
}

div.col {
    display: flex;
    flex-direction: column;
    flex: 1;
}

div.text {
    font-family: "Roboto Regular";
    font-size: 2em;
    color: #382830;
}

div.topic {
    font-family: "Lobster Regular";
    font-size: 7em;
    color: #382830;
}

div.subtopic {
    font-family: "Lobster Regular";
    font-size: 4em;
    color: #382830;
}

div.dark {
    background-color: #382830;
    border-top: 24px double #e8e8d8;
    border-bottom: 24px double #e8e8d8;
    opacity: 0.94;
}

div.dark a {
    color: #e8e8d8;
    border-bottom: 4px dotted #e8e8d8;
}

div.dark div.text {
    color: #e8e8d8;
}

div.dark div.title {
    color: #e8e8d8;
}

div.dark div.topic {
    color: #e8e8d8;
}

div.dark div.subtopic {
    color: #e8e8d8;
}