body {
    font-family:'Courier New', Courier, monospace;
    background-color: beige; 
    box-sizing: border-box; 
}

header {
    background-color: blueviolet;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.header-left {
    margin: 10px;
    padding: 10px;
    color: black;
    font-size: 32px;
    font-weight: bold;
    border: 2px solid black;
    display: inline-flex;
    justify-content: left;
}

.header-right{
    display: flex;
    justify-content: right;
    padding : 10px;
    margin: 10px;
}   

@media (max-width: 900px) {
    .header-left, .header-right {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.header-right a {
    color: white;
    text-decoration: none;
    margin: 10px;
    padding: 10px;
    border: 1px solid white;
    font-weight: bold;
}
.header-right a:hover {
    background-color: white;
    color: blueviolet;
}
.header-right a:active {
    color: white;
    background-color: darkblue;
}

#colors-container {
    border: 1px solid black;
    margin-top: 20px;
    padding: 10px;
    background-color: white;
    overflow: hidden;
    
}

.color1-box{
    background-color: blueviolet;
    width: 200px;
    height: 120px;
    margin: 10px;
    float: left;
}

.color1-box p {
    color: white;
    text-align: center;
    padding: 5px;
}

.color2-box{
    background-color: darkslateblue;
    width: 200px;
    height: 120px;
    margin: 10px;
    float: left;
}

.color2-box p {
    color: white;
    text-align: center;
    padding: 5px;
}

.color3-box{
    background-color: yellow;
    width: 200px;
    height: 120px;
    margin: 10px;
    float: left;
}

.color3-box p {
    color: black;
    text-align: center;
    padding: 5px;
}

.color4-box{
    background-color: beige;
    width: 200px;
    height: 120px;
    margin: 10px;
    float: left;
}

.color4-box p {
    color: black;
    text-align: center;
    padding: 5px;
}

#typography-container {
    border: 1px solid black;
    margin-top: 20px;
    padding: 10px;
    background-color: white;
}
.underline {
    text-decoration: underline;
}

.font-croissant-one .main-text {
    font-family: 'Croissant One', sans-serif;
}

.font-croissant-one .bold-text {
    font-family: 'Croissant One', sans-serif;
    font-weight: bold;
}
.font-croissant-one .italic-text {
    font-family: 'Croissant One', sans-serif;
    font-style: italic;
}
.font-merriweather .main-text {
    font-family: 'Merriweather', serif;
}

.font-merriweather .bold-text {
    font-family: 'Merriweather', serif;
    font-weight: bold;
}

.font-merriweather .italic-text {
    font-family: 'Merriweather', serif;
    font-style: italic;
}

.font-roboto .main-text {
    font-family: 'Roboto', sans-serif;
}

.font-roboto .bold-text {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

.font-roboto .italic-text {
    font-family: 'Roboto', sans-serif;
    font-style: italic;
}

#text-styles-container {
    border: 1px solid black;
    margin-top: 20px;
    padding: 10px;
    background-color: white;

}

.header-style h1{
    font-size: 36px;
    font-weight: 900;
    font-family: "Merriweather", serif;
}

.subheader-style h2{
    font-size: 28px;
    font-weight: 700;
    font-family: "Croissant One", sans-serif;
}
.paragraph-style p {
    font-size: 18px;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
}

#buttons-container {
    border: 1px solid black;
    margin-top: 20px;
    padding: 10px;
    background-color: white;
    overflow: hidden;
}

.button-primary  button {
    background-color: blueviolet;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    float: left;
    margin: 20px;
    font-family: 'roboto', sans-serif;
}

.button-primary button:hover {
    background-color: darkslateblue;
}
.button-secondary button {
    background-color: yellow;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    float: left;
    margin: 20px;
    font-family: 'roboto', sans-serif;
}

.button-secondary button:hover {
    background-color: beige;
}