* {
box-sizing: border-box;
}

/*containers*/
            #container {
                max-width: 900px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

            #flex {
                display: flex;
            }

            *#leftSidebar {
            border: 1;
            }

            /*fonts*/
            @font-face {
                font-family: Serif4;
                src: url('../fonts/SourceSerif4-Regular.ttf');
            }

            @font-face {
                font-family: Serif4;
                src: url('../fonts/SourceSerif4-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Serif4;
                src: url('../fonts/SourceSerif4-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Serif4;
                src: url('../fonts/SourceSerif4-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;}

body{
    background-image: url("../images/main/green.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Serif4', sans-serif;
}

/*middle portion*/
main {
    background-color: transparent;
    flex: 1;
    padding: 20px;
    border: 2;
}

/*article style*/
article p{
    text-align: center;
}
 
article ul, li{
    text-align: left;
}

article{
    margin-bottom: 20px;
    border: dashed #35b753 3px;
    padding: 25px;
    border-radius: 30px;
    object-fit: contain;
    background-color: white;
    text-align: center;
    color: black;
}

article img{
  object-fit: contain;
}

/*link color*/
a{
color: green;
font-weight: bold;
}

a:hover{
    color: lightgreen;
}

h3:a{
  color: white;
}

article img{
  object-fit: contain;
}

/*side portion*/
aside {
background-color: transparent;
text-align: center;
color: black;
width: 250px;
padding: 15px;
border-radius: 30px;
margin-top: 18px;
margin-bottom: 20px;
height: 100%;
}

aside a{
    color: green;
}

/*additional styling*/
.title a{
  color: white;
  text-decoration: none;
  font-family: "Serif4";
}

.title{
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 35px;
  text-align: center;
  text-decoration: none;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: #84d666;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
      font-family: "Serif4";
}

.scrollbox{
  overflow-y: scroll;
  max-height: 200px;
  border: 2px dotted lightgreen;
  background-color: green;
  color: white;
}

.reviewbox{
  overflow-y: scroll;
  max-height: 200px;
  border: 2px dotted green;
  background-color: lightgreen;
  color: black;
}

table, td{
    border: solid green 2px;
    margin: 0 auto;
}

details{
  border: 2px dashed green;
  border-radius: 8px;
  padding: 0.5rem;
  text-align: left;
  margin-left: 10px;
}

/* Media Query*/
            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }
                main {
                    order: 1;
                    width: 100%;
                }

                #leftSidebar {
                    order: 2;
                }

                aside {
                    width: 100%;
                    order: 2;
                }

                article {
                    width: 100%;
                }
                
            }


@media screen and (max-width: 600px) {
  .columnedit {
    width: 100%;
  }
}