body {
	background: #b1b1b1;
	color: #400027;
	font-family: 'Courier New', Courier, monospace;
	margin: 0;
	padding: 0;
    text-align: center;
  }

  .headbox{
    background:#011e73;
    color:#dd8703;
  }

  .text-center {
	text-align: center;
  }

  .d-none { display: none;}

  .btn {
	font-family: 'Courier New', Courier, monospace;
	font-size: 1.1em;
	padding-block: 8px;
	padding-inline: 12px;
	cursor: pointer;
  }

  .disabled {
	color: #c7c7c7;
    pointer-events: none;
    background-color: #999;
    border-color: #848484;
    opacity: 0.65;
  }

  .mb-3 {
	margin-bottom: 2em;
    margin-top: 2em;
  }

  #game-container {
	width: 90%;
	max-width: 850px;
	margin: 2em auto;
	background: #ffffc6;
	padding: 2em;
	border-radius: 4px;
  }

  #output {
	height: 400px;
	overflow-y: auto;
	background: #111;
	padding: 1em;
	margin-bottom: 1em;
	border-radius: 4px;
	white-space: pre-wrap;
	line-height: 1.4;
  }

  #input-area {
	display: flex;
	gap: 0.5em;
  }

  #user-input {
	flex: 1;
	padding: 0.5em;
	font-size: 1em;
	border: none;
	border-radius: 4px;
  }

  #submit-btn {
	padding: 0.5em 1em;
	font-size: 1em;
	background: #fb0000;
	color: #c1e045;
	border: none;
	border-radius: 4px;
	cursor: pointer;
  }

  #submit-btn:hover {
	background: #345a57;
  }

  .text-white {
	color: ##ffe153;
  }

a {color:#4f004e;
font-weight: bold;}
a:active {color:#00ffe5;}
a:visited {color:#5f006b;}
a:hover {color:#c1e045;}

.bottombox{
	padding:1em;
    background:#FFA05A;
	border-radius:25px;
	color:#011e73;
}

#thumb {width:45%;
    background-color:#cccccc;
    padding:15px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#thumb img {width:100%;
}

#desc {padding:15px;
    width:45%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    }

    #publication {list-style-type: none;
        margin: 0px;
        padding: 0px;
        display:flex;
        flex-direction:row;
        padding-bottom:50px;
    }

    @media only screen and (max-width: 959px) and (min-width: 769px) {
        #publication2 {flex-direction:column;}
        section {width:768px;
                margin:0px auto;}
         
         
            #thumb {width:45%; padding:5px;
                
            }
    
    

               
    }

    @media only screen and (max-width: 768px) {
       
        #thumb {width:100%;
            padding:0px;
        }
        
        #publication{flex-direction:column;
        }
    
        #desc {padding:0px 5px; 
        width:100%;
        }
       
}