#title {
	margin-left: 40%;
    margin-right: 40%;
    width: -webkit-fill-available;
    height: 25px;
    width: -moz-available;
    resize: none;
    background-color: rgb(245,245,245,0.4);
    color: rgba(29, 28, 28, 1);
}

#message {
    margin-left: 20%;
    margin-right: 20%;
    width: -webkit-fill-available;
    height: 300px;
    width: -moz-available;
    resize: none;
    background-color: rgb(245,245,245,0.4);
    color: rgba(29, 28, 28, 1)
}

textarea:focus {outline:0;}

#counter {
    background: transparent;
    border: none;
    color: black;
}

html { 
	background-color: white;
  }

#pealkiri {
    margin-top: 3em;
    margin-bottom: 0.5em;
    text-align: center;
}

.nupp {
    margin-top: 1em;
    border: none;
    border-radius: 4px;
    text-align: center;
    background-color: rgb(224,224,224);
    width: 60px;
    height: 25px;
}

.nupp:hover {
    background-color: rgb(235, 232, 232);
}
.nupp:focus {outline:0;}


.btn {
    margin-top: 3em;
    background-color: none;
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
}

a:link {
    color: rgb(230, 225, 225);
    text-decoration: none;
}

a:hover {
    color: rgb(255, 247, 247);
    text-decoration: underline;
}

.maincontainer {
    display: flex; 
    justify-content: center;
    flex-wrap: wrap;
}

.box1 {
    flex: 40%;
    margin-right: 3em;
    margin-left: 3em;
    text-align: center;
}
.layer {
    padding: 5px;
    min-height: 250px;
    max-height: auto;
    text-align: center;
    background-color: rgb(245,245,245,0.4);
    color: rgba(29, 28, 28, 1);
}

.box2 {
    flex: 40%;
    margin-left: 3em;
    margin-right: 3em;
    text-align: center;
}

.layer2 {
    padding: 5px;
    min-height: 250px;
    max-height: auto;
    text-align: center;
    background-color: rgb(245,245,245,0.4);
    color: rgba(29, 28, 28, 1);
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer; /* Add a pointer on hover */
  }

#info{
    position: absolute;
    width: 32em;
    height: 30em;
    top: 50%;
    left: 50%;
    margin: -15em 0 0 -16em;
    -webkit-box-shadow: 4px 2px 35px -6px rgba(0,0,0,0.65);
    -moz-box-shadow: 4px 2px 35px -6px rgba(0,0,0,0.65);
    box-shadow: 4px 2px 35px -6px rgba(0,0,0,0.65);
    background-color: rgba(252, 245, 245, 0.9);
    border-radius: 5px;
    text-align: center;
    padding: 1em;
    z-index: 11;
}

.infonupp {
    background-color: Transparent;
    border: none;
    cursor:pointer;
    outline:none;
    color: rgb(224,224,224);
    font-size: 20px;
}

@media screen and (max-width: 900px) {
	.box1, .box2 {flex-direction: column; flex: 100%}
}