* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial;
	font-size: 1em;
	text-align: center;
    background-color: aqua;
}

h1, h2, h3, h4, .center {
    text-align: center;
}

h1 {
    font-size: 3em;
    color: blue;

}

h2 {
    background-color: white;
    border: 1px solid grey;
    border-radius: 5px;
}

h3 {
    font-size: 2.4em;
    color: blue;
}

p {
	font-family: arial;
	font-size: 1.4em;
	text-align: center;
	padding: 1em 5% 1em 5%;
}

p.red {
    color: rgb(255, 0, 170);
    font-weight: 600;
}

img {
	display: block;
	margin: 0 auto 0 auto;
    width: 20%;
}


.introduction {
    background-color: aliceblue;
    border: 5px solid blue;
    border-radius: 40px;
    margin: 0 10%;
    padding: 2% 5%;
}

.introduction ol{
    margin: 0 10%;
}

.introduction ol li{
    padding: .2em 1em;
    text-align: left;
}

.main {
    background-color: rgb(244, 250, 161);
    border: 5px solid blue;
    border-radius: 40px;
    margin: 0 5%;
    padding: 2% 1%;
}

.wordlist {
    display: grid;
    grid-template-columns: auto;
    margin: 0 20%;
    padding: 0;
}

.wordlist p {
    margin: 0 10% .5em 10%;
    color: rgb(5, 5, 5);
    text-align: center;
    border: 2px solid grey;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 1em;
    padding: .2em 0;
}

.one {
    background-color: rgb(160, 250, 195);
    
    /* margin-bottom: .5em; */
    
}

.two {
    background-color: rgb(160, 160, 250);
    
}

.three {
    background-color: rgb(250, 160, 175);
    
}
/* .end {
    background-color: aliceblue;
    border: 5px solid blue;
    border-radius: 40px;
    margin: 0 10%;
    padding: 2% 5%;
} */
.grid-abc10 {
    display: grid;
    grid-auto-flow: row;
    gap: 2px;
}

.grid-abc {
    display: grid;
    grid-auto-flow: column;
    gap: 2px;
}

.grid-wordpos10 {
    display: grid;
    grid-auto-flow: row;
    gap: 2px;
    margin: 0 20%;
}

.grid-wordpos {
    display: grid;
    grid-auto-flow: column;
    gap: 2px;
}



.grid-container {
    height:500px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 7px;
    background-color: #2196F3;
    padding: 7px;
    margin: auto 5%;
}

.item1 {
    background-color: rgba(210, 250, 135, 0.8); 
    grid-area: 1 / 2 / span 1/ span 7;
    padding: 10px 0 0 0;
    font-size: 20px;
    word-wrap: break-word;
    /* word-break:break-all; */
}

.item2 {
    background-color: rgba(250, 135, 169, 0.8);
    grid-area: 1/1/1/1;
    padding: 30px 0 0 0;
    text-align: center;
}

.item3 {
    background-color: rgba(250, 238, 135, 0.8);
    grid-area: 2/1/2/1;
    text-align: center;
}

.center {
    text-align: center;
}

.note {
    text-align: center;
    font-size: smaller;
}
.centerupdown {
    text-align: center;
    padding: 5px 5px;
}

.arraysinformation {
    text-align: center;
    visibility: hidden;
}





.chooselist {
    text-align: center;
    
}

.wordsdisplay {
    margin: 0 10px;
    /* text-justify: left; */
    /* word-wrap: break-word; */
    /* word-break: break-all; */
    
}

h4.chooselistlbl {
    background-color: rgb(160, 250, 195);
    border: 2px solid grey;
    border-radius: 5px;
    margin: 0 30%;
    padding: 5px;
}

  

button.Not {
    background-color: rgb(147, 250, 186);
    text-align: center;
    border-radius: 8px;
    padding: 1px 3px;
    font-size: 1.1em;
}

button.In {
    background-color: yellow;
    text-align: center;
    border-radius: 8px;
    padding: 1px 3px;
    font-size: 0.7em;
    /* visibility: hidden; */
}


button.Out {
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 8px;
    padding: 1px 3px;
    font-size: 0.7em;
}

button.showwords1 {
    background-color: rgb(247, 33, 182);
    width: 100px;
    color: rgb(5, 5, 5);
    text-align: center;
    border-radius: 8px;
    padding: 1px 3px;
    font-size: 0.7em;
}

button.showwords2 {
    background-color: rgb(37, 33, 247);
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 8px;
    padding: 1px 3px;
    font-size: 0.7em;
}

button.showwords3 {
    background-color: rgb(247, 233, 33);
    color: rgb(5, 5, 5);
    text-align: center;
    border-radius: 8px;
    padding: 1px 3px;
    font-size: 0.7em;
}

button.showwords4 {
    background-color: rgb(2, 248, 84);
    color: rgb(5, 5, 5);
    text-align: center;
    border-radius: 8px;
    padding: 1px 3px;
    font-size: 0.7em;
}

button.chooselist1 {
    background-color: rgb(160, 250, 195);
    color: rgb(5, 5, 5);
    text-align: center;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 0.7em;
}

button.chooselist2 {
    background-color: rgb(160, 160, 250);
    color: rgb(5, 5, 5);
    text-align: center;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 0.7em;
}
button.chooselist3 {
    background-color: rgb(250, 160, 175);
    color: rgb(5, 5, 5);
    text-align: center;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 0.7em;
}

button.up_down {
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 8px;
    padding: 1px 3px 5px 3px;
    font-size: 0.7em;
}

.photo {
    margin: 1% 3%;
    padding: 3% 3% 1% 3%;
}

.one-photo {
    /* background-color: aqua; */
    text-align: center;
}

.one-photo img.vlarge {
    width: 100%;
}

.one-photo img.landscape {
    width: 60%;
}

.one-photo img.port {
    width: 30%;
}

@media (min-width: 1350px) {
    .grid-abc10 {
        grid-auto-flow: column;
    }

    .grid-wordpos10 {
        grid-auto-flow: column;
        margin: 0 42%
    }

    .wordlist {
       grid-template-columns: auto auto auto;
    }

    /* button.Not {
        font-size: 2em;
    } */
}