*{
	margin:0;
	padding:0;
	font-family: 'Nanum Myeongjo', serif;
	background-color: #c8e0da;
}


@media screen and (max-width: 1535px) {
	.middle{
		width: 37% !important;
	}
}

@media screen and (max-width: 1374px) {
	.text-box h1 {
		font-size: 40px !important;
	}

	.text-box p {
		font-size: 23px !important;
	}

	.middle{
		width: 35% !important;
		top: 17% !important;
	}
}

@media screen and (max-width: 1270px) {
	.middle{
		width: 33% !important;
		top: 17% !important;
	}
}

@media screen and (max-width: 1170px) {
	.middle{
		width: 31% !important;
		top: 17% !important;
	}
}

@media screen and (max-width: 1115px) {
  .left {
    width: 100% !important; 
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .audio {
  	max-width: 300px;
  }

  .right {
  	width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .container {
  	max-width: 600px;
  }

  .massPause {
  	margin-right: 20% !important;
  }

  footer {
  	position: static !important;
  	flex-shrink: 0 !important;
  	padding-top: 7%;
  	padding-right: 10%;
  	padding-left: 10%;
  	padding-bottom: 2%;
  }

  .container {
		height:200px !important;
	}

	.middle {
		display: none !important;
	}

}

@media screen and (max-height: 665px) {
	.content {
		padding-top: 0em !important;
	}

	.audio {
	margin: 30px auto !important;
	}

	footer {
  	position: static !important;
  	flex-shrink: 0 !important;
  	padding-top: 7%;
  	padding-left: 10px;
  	padding-bottom: 10px;
  	float: left!important;
  }

  .modal-content {
  	margin: 6% auto !important;
  	font-size: 15px;
  }
}

@media screen and (max-width: 850px) {
	.modal-content {
	  width: 60% !important; 
	}
}

@media screen and (max-width: 700px) {
  .text-box h1 {
		font-size: 32px !important;
	}

	.text-box p {
		font-size: 18px !important;
	}

	.txtb, h3{
		font-size: 16px !important;
	}

	.task {
		font-size: 15px !important;
	}

}

.body {
	min-width:450px; 
	display: flex;
}

.header{
	width:100%;
	background-position: center;
	background-size: cover;
	position: relative;
	padding-bottom: 7%;
}

.nav-links {
	display: flex;
	align-items: center;
	float: right;
	padding-right: 1%;
}

.kofitext, .kofiimg {
	background-color: #386857;
}

.header button {
	border: none;
	text-transform: uppercase;
	font-weight: bolder;
	margin-right: 25px;
	margin-top: 10px;
	padding: 10px;
	font-size: 18px;
	cursor: pointer;
}

.header button::after {
	content:'';
	width:0%;
	height:2px;
	background:#44806c;
	display: block;
	margin: auto;
	transition:0.4s;
}

.header button:hover::after {
	width: 100%;
}

.modal {
  display: none;
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content {
  background-color: white ;
  margin: 10% auto;
  padding: 40px;
  border: 1px solid #888;
  width: 40%; 
}

.modal-content a {
	color: black;
}

.modal-content p, .modal-content h2, .modal-content a, .modal-content span{
	background-color: white !important;
}

.close {
  color: #aaa;
  float: right;
  top: 5px;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.content {
	padding: 2em;
}

.left {
	position: relative;
	float: left;
	height:100%;
	width: 30%;
	margin-left: 2%;
	display: block;
	padding: 10px;
}

.middle {
	position: absolute;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	display: inline;
	top: 15%;
}

.illustration {
	width: 100%;
}

.text-box{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	max-width:500px;
	text-align: center;
}

.text-box h1 {
	font-size: 54px;
}

.text-box p {
	font-size: 26px;
}

.container {
	width:90%;
	height:300px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	overflow-y: overlay;
}


.txtb{
	width:93%;
	border:none;
	border-bottom: 2px solid #000;
	padding:10px;
	background:none;
	font-size: 18px;
}


h3 {
	margin: 10px 0;
}

.task {
	max-width:92%;
	background: rgba(255,255,255,.5);
	padding: 12px;
	margin:5px 0;
/*	overflow:hidden;*/
	overflow-wrap: break-word;
}

.task i{
	float: right;
	margin-left: 20px;
	background-color:transparent;
}

.fas:hover{
	cursor: pointer;
}

.comp .task {
	background: rgba(0,0,0,.5);
	color:#fff;
}

.right{
	margin-right: 4%;
	float: right;
}

.audio {
	margin: 36px auto;
	width: 100%;
}

.audio span {
	align-items: center;
	display:flex;
	margin: 10px;
}

.audio button {
	appearance:auto;
	height:15px;
	width:15px;
	cursor:pointer;
	border:none;
	background:transparent;
	background-size: 15px;
}

.unpressed button {
	background-image:url(https://img.icons8.com/android/24/000000/play.png);
}

.pressed button {
	background-image: url(https://img.icons8.com/android/24/000000/pause.png);
}

.volume-control {
	background-image: url(https://img.icons8.com/material-rounded/24/000000/no-audio--v2.png);
	background-size:16px;
	height:16px;
	width:16px;
	display:flex;
	margin-right: 5px;
}

.muted {
	background-image: url(https://img.icons8.com/material-rounded/24/000000/no-audio--v1.png);
}

.vol-control {
 	-webkit-appearance: none;
 	width:250px;
 	height: 2px;
 	border-radius: 5px;  
 	background: #333333;
  position:relative;
  display:flex;
}

.vol-control::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%; 
	background: #44806c;
	cursor: pointer;
}

.massPause {
	display: flex;
	justify-content: flex-end;
	margin-left: auto;
	margin-right: auto;
}

#pauseAll {
	height: 15px;
	width: 15px;
	-webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 2px solid #000;
  border-radius: 2px;
  cursor: pointer;
  background-color: transparent;
}

#pauseAll:checked {
	background-color: #000;
	content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCAxNzIgMTcyIgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjkyMiwxMC45MjIpIHNjYWxlKDAuODczLDAuODczKSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibm9uZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48ZyBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiNmNWY1ZjYiIHN0cm9rZS13aWR0aD0iMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNTAuNjA3NSwzMy4xNzcxOWMxLjI3NjU2LDIuMjg0MzggMS4xNTU2Myw1LjA3OTM4IC0wLjMyMjUsNy4yNDI4MWwtNjkuMTIyNSwxMDUuNTY1Yy0xLjA3NSwxLjY1MjgxIC0yLjgwODQ0LDIuNzY4MTMgLTQuNzcwMzEsMy4wNjM3NWMtMS45NDg0NCwwLjI4MjE5IC0zLjkzNzE5LC0wLjI4MjE5IC01LjQ0MjE5LC0xLjU1ODc1bC00Ny45NDUsLTQxLjQ5NWMtMi4wOTYyNSwtMS41NDUzMSAtMy4xMzA5NCwtNC4xMjUzMSAtMi43MDA5NCwtNi42OTE4N2MwLjQzLC0yLjU1MzEzIDIuMjcwOTQsLTQuNjQ5MzggNC43NDM0NCwtNS40MTUzMWMyLjQ4NTk0LC0wLjc3OTM4IDUuMTg2ODgsLTAuMDgwNjMgNi45ODc1LDEuNzg3MTlsNDEuOTI1LDM2LjIyNzVsNjQuNzE1LC05OS4wMDc1YzEuMjA5MzgsLTEuOTM1IDMuMzA1NjMsLTMuMTQ0MzcgNS41OSwtMy4yMjVjMi42MDY4OCwtMC4xMjA5NCA1LjA2NTk0LDEuMjM2MjUgNi4zNDI1LDMuNTA3MTl6Ij48L3BhdGg+PC9nPjxwYXRoIGQ9Ik0wLDE3MnYtMTcyaDE3MnYxNzJ6IiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciI+PC9wYXRoPjxnIGZpbGw9IiNmNWY1ZjUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIj48cGF0aCBkPSJNMTQ0LjI2NSwyOS42N2MtMi4yODQzNywwLjA4MDYzIC00LjM4MDYyLDEuMjkgLTUuNTksMy4yMjVsLTY0LjcxNSw5OS4wMDc1bC00MS45MjUsLTM2LjIyNzVjLTEuODAwNjIsLTEuODY3ODEgLTQuNTAxNTYsLTIuNTY2NTYgLTYuOTg3NSwtMS43ODcxOWMtMi40NzI1LDAuNzY1OTQgLTQuMzEzNDQsMi44NjIxOSAtNC43NDM0NCw1LjQxNTMxYy0wLjQzLDIuNTY2NTYgMC42MDQ2OSw1LjE0NjU2IDIuNzAwOTQsNi42OTE4N2w0Ny45NDUsNDEuNDk1YzEuNTA1LDEuMjc2NTYgMy40OTM3NSwxLjg0MDk0IDUuNDQyMTksMS41NTg3NWMxLjk2MTg4LC0wLjI5NTYyIDMuNjk1MzEsLTEuNDEwOTQgNC43NzAzMSwtMy4wNjM3NWw2OS4xMjI1LC0xMDUuNTY1YzEuNDc4MTMsLTIuMTYzNDQgMS41OTkwNiwtNC45NTg0NCAwLjMyMjUsLTcuMjQyODFjLTEuMjc2NTYsLTIuMjcwOTQgLTMuNzM1NjIsLTMuNjI4MTIgLTYuMzQyNSwtMy41MDcxOXoiPjwvcGF0aD48L2c+PHBhdGggZD0iIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciI+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
}

.hidden {
	visibility: hidden;
}

#note {
	font-size: 14px;
}

footer {
	position: absolute;
	bottom: 10px;
  left: 10px;
	color: #000;
	display: block;
	float: right;
	font-size: 15px;
}

footer a {
	color: #000;
}