body {
background-image: url("https://printfgrechka.neocities.org/pattern%20446.jpg");
 background-color: #3F3F44;
margin: 0;
color: #321313;
}
header {
  background-color: #533710;
  text-align: center;
  padding: 10px;
  color: #F0D394;
}
      
   #container {
   border-radius: 25px;
   padding: 20px;
  max-width: 600px;
  height: auto;
       margin: 10px 0;
        background: linear-gradient(180deg, #98651E 0%, #F0D394 100%);
          border-style: solid;
        }
        
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #6E4B1F;
  color: #F0D394;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: block;
  color:#F0D394;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color:#533710;}

ul.topnav li a.active {background-color: #533710;}
#container2 {
border-radius: 5px;
      overflow: scroll;
      overflow-x: hidden;
      height: auto;
      padding: 1rem;
      border-top: 3.5px double #533710;
      border-left: 3.5px double #533710;
      border-right: 3.5px double #533710;
      border-bottom: 3.5px double #533710;
    }
    .footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(83, 55, 16, 0.5);
  color: #F0D394;
  text-align: center;
}
#container2::-webkit-scrollbar {
        width: 8px;
        }

        #container2::-webkit-scrollbar-track {
        background-color: #e4e4e4;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        }

        #container2::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #e4e4e4;
        border: 1px solid #aaa;
        }
        hr.dashed {
  border-top: 3px  solid #6E4B1F;
}
 mark, span {
    font-size:1.3em;
    overflow:none;
    background-color:transparent;
    font-family: starborn;
    font-weight:700;
    color:#fff;
    text-align:center;
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: #403121; -webkit-text-fill-color: #F0D394; position: relative; z-index: 9; display:inline-block; 
  }
  
  #contec p, #contec a {
    text-align: left;
    font-family: "VCr";
    color: #403121;
    transition: opacity 1000ms;
  }

  #contec:hover{
    overflow-x:hidden;
    overflow-y:scroll;
  }
  
  #contec:hover p, #contec:hover a {
    color: #403121;
    text-align: left;
    font-family: vcr;
    -webkit-animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both;
    animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both
  }
  
  mark{display:none;}
  
  #contec:hover mark  {
    font-weight: 700;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #403121;
    -webkit-text-fill-color: #F0D394;
    z-index: 9999;
    display: inline;
  }

  #contec:hover span{
    display: none;
  }
 
  #contec {
    -webkit-box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
    box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
    border: 2px solid #d3e1d4;
    background: #98651E;
    border-radius: 7px;
    width:40%;
    height: 70px;
    transition: 0.6s ease;
    padding: 5px;
    cursor: help;
    overflow: scroll;
    overflow-x: hidden;
    display: inline-block;
    transition: transform 1s;
    z-index: 8;
    overflow:hidden;
  }

  #contec:hover {
    background: #98651E;
    z-index: 9999;
    position: relative;
    width: 50%;
    height: 90px;
    transform: translate(12px, 27px) scale(1.8, 1.8);
  }
  @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0
    }

    100% {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1
    }
  }

  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0
    }

    100% {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1
    }
  }
  
  ::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

@media screen and (max-width: 600px) {
  ul.topnav li.right, 
  ul.topnav li {float: none;}
}
@media screen and (max-width: 600px) {
  container, 
  ul.topnav li {float: none;}
}