* {
  box-sizing: border-box;
}

html {
  font: 110%/1.5 monospace
}

h2{
    text-decoration: underline;
}

/*body {*/
/*  margin: 2rem;*/
/*  max-width: 90%;*/
/*  margin: auto;*/
/*}*/

/*list design*/

li{
      margin-bottom:0.9em;
      text-indent:0.4em;
      font-weight:bold;
    }


    button{
      padding: 10px;
      margin-top: 25px;
      font-size: 18px;
      border-radius: 5px;
      border: 1px solid #fff;
    }
    button:hover{
      background: #810120;
      cursor: pointer;
      border-color: #f00;
      color: #fff;
    }
    button:clicked{
      background: #D342F9;
    }

/*popup start*/

#overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
#overlay:target {
  visibility: visible;
  opacity: 1;
}

#popup {
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

#popupPara{
  font-size: 18px;
 
  width: 90%;
  word-break: break-all;
}

/*popup end*/


/*google search*/

.tF2Cxc{
      margin: 15px 15px;
      background: #fff;
      /*border: 1px solid #00f;*/
      padding: 10px 15px;
      border-radius: 0px 10px;
      
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
      transition: 0.3s;
      min-width: 40%;
      border-radius: 5px;
      border-bottom: 2px solid green;
      /*border-radius: 0px 0px 10px 10px;*/
      padding: 10px;
      margin: 15px 15px;

      word-break: break-all;
      white-space: pre-line;
    }

.tF2Cxc h3 {
  color: #f00;
  width: 90%;
      word-break: break-all;
      white-space: pre-line;

}

.tF2Cxc:hover{
        cursor: pointer;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 1);
    }

@media(max-width:  600px) {
    body {
      margin: 2rem;
      max-width: 100%;
      margin: auto;
    }
    .tF2Cxc{
        margin: 25px 0px;
    }

    #popup {
      margin: 20px auto;
      padding: 20px;
      background: #fff;
      border-radius: 5px;
      width: 80%;
      position: relative;
      transition: all 5s ease-in-out;
    }

    #popupPara{
      font-size: 18px;
      margin-top: 10px;
      width: 100%;
      word-break: break-all;
    }
}

/*card.css*/

.card{
			border-bottom: 2px solid #4727F2;
			border-radius: 10px;
			margin: 25px 15px;
			padding: 20px;
			background: #fff;
			cursor: pointer;
		}
		
		.card img{
			float: left;
			width: 30%;
			padding: 10px;
			margin: auto;
		}
		
		.card:hover{
		    background: #fff !important;
		    border-bottom-color: #000;
		}
		
		
		.card h1{
			text-align: center;
			font-size: 18px;
			font-family: serif;
			padding: 10px;
		}
		
		.card h2{
			font-size: 14px;
		}
		
		@media(min-width: 400px) {
			.card{
				width: 80%;
				margin: auto;
				margin-bottom: 10px;
			}
		}

		@media(min-width: 600px) {
			.card{
				width: 70%;
				margin: auto;
				margin-bottom: 10px;
			}
		}

		@media(min-width: 800px) {
			.card{
				width: 60%;
				margin: auto;
				margin-bottom: 10px;
			}
		}

		@media(min-width: 1000px) {
			.card{
				width: 50%;
				margin: auto;
				margin-bottom: 10px;
			}
		}