body {
    background-color: teal;
    font-size: 1em;
    font-family: monospace;
    padding: 10px;
    margin: 10px;
}

main {
    display: flex;
    justify-content: center;
    margin: 10px;
}

p{
    font-family: "Roboto Mono", sans-serif;
    font-size: large;
}

.box-group {
    display: flex;
    gap: 10px;
}

.box1 {
    border: 5px;
    border-color: black;
    border-style: solid;
    width: 200px;
}
.box2 {
    border: 5px;
    border-color: black;
    border-style: solid;
    margin: 0 auto;
    width: 500px;
}
.box3 {
    border: 5px;
    border-color: black;
    border-style: solid;
    width: 200px;
}
@media(orientation: portrait) { 
    main {
        display: flex;
        justify-content: center;
        margin: 10px;
    }
    .box-group {
        display: flex;
        gap: 10px;
    }
    .box1 {
        border: 5px;
        border-color: black;
        border-style: solid;
        width: 50px;
    }
    .box2 {
        border: 5px;
        border-color: black;
        border-style: solid;
        margin: 0 auto;
        width: 100px;
    }
    .box3 {
        border: 5px;
        border-color: black;
        border-style: solid;
        width: 50px;
    }
}