/* 
 Batuhan Duras 22002854 CSS
 */

 html {
   background-color: #8275AA;
   font-family: 'VT323';
   font-size: 30px;
 }

 .main {
   background-image: url(background.jpg);
   width: 700px;
   height: 830px;
   margin: 0 auto;
 }

 .header {
   text-align: center;
   color: #D67E72;
   font-weight: bold;
   font-size: 40px;
   padding-top: 10px;
   padding-bottom: 40px;
 }

 table {
   margin: 0 auto;
   cursor: default;
   padding-bottom: 10px;
 }

 td.visible {
   border: 5px solid black;
   border-radius: 8px;
   width: 48px;
   height: 48px;
   font-size: 0px;
   text-align: center;
 }


 .letter-picker {
   width: 280px;
   height: 280px;
   border-radius: 50%;
   background-color: #6A6A38;
   border: 4px solid #FCDBD2;
   margin: 0 auto;
   position: relative;

 }

 .shuffle {
   position: absolute;
   font-size: 100%;
   top: 118px;
   left: 126px;
 }

 .display {
   display: flex;
   margin: 0 auto;
   height: 60px;
   justify-content: center;
   padding-bottom: 15px;
 }

 .outtext {
   border-radius: 20px;
 }

 .intext {
   margin: auto;
   padding: 3px;
   ;
   font-size: 50px;

   color: white;
 }

 .show {
   background-color: #6A6A38;
   width: 60px;
   height: 60px;
   border-radius: 30px;
   border: 4px solid #FCDBD2;
   text-align: center;
   font-size: 100%;
   position: relative;
   left: 300px;
   bottom: 30px;
 }

 .show>i {
   position: relative;
   top: 10px;
 }

 .letter-circle {
   width: 72px;
   height: 72px;
   border-radius: 36px;

   text-align: center;
   line-height: 72px;

   font-size: 50px;
   font-weight: bold;
 }

 #pos1 {
   position: absolute;
   top: 9px;
   left: 106px;
 }

 #pos2 {
   position: absolute;
   top: 60px;
   left: 190px;
 }

 #pos3 {
   position: absolute;
   top: 155px;
   left: 190px;
 }

 #pos4 {
   position: absolute;
   top: 195px;
   left: 106px;
 }

 #pos5 {
   position: absolute;
   top: 155px;
   left: 20px;
 }

 #pos6 {
   position: absolute;
   top: 60px;
   left: 20px;
 }

 .found {
   border: 5px solid black;
   border-radius: 8px;
   width: 48px;
   height: 48px;
   font-size: 0px;
   background-color: rgba(80, 84, 74, 0.7);
   color: white;
   text-align: center;
   font-weight: bold;
   font-size: 50px;
 }

 .hint {
   border: 5px solid black;
   border-radius: 8px;
   width: 48px;
   height: 48px;
   font-size: 50px;
   background-color: #FCDBD2;
   color: black;
   opacity: 0.7;
   text-align: center;

 }

 .show:hover {
   color: #FCDBD2;
   font-size: 150%;
   transition: all ease 1s;
 }

 .show:not(:hover) {
   transition: all ease 1s;
 }