/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.os{
position: fixed;
width: 100vw;
  height: 130px;
  bottom:0px;
  z-index: 10; 
  overflow: hidden
}
#bottom{
background: url('toolbar_CT.webp');
position: absolute;
  background-repeat: no-repeat; 
  background-size: 100% auto;
  height: 3.5vh;
  width: 100%;
  bottom:0px;
  z-index: 10;
}
#powerup{
  position: absolute;
width: 6vw;
  height: 12vh;
  bottom:-2.5vh;
  z-index: 11;
  left: -1.5vw;
}
body {
  background: url('meow.jpg');
    background-repeat: no-repeat;
      background-size: cover;
  color: black;
  font-family: Verdana;
  overflow:hidden;
  margin: 0;
  box-sizing: border-box;
}
.container{
  top: -3vh;
 display: flex; 
     width: 40vw;
     position:relative;
  height: 100vh;
  font-size: .7em;
     flex-direction: column; 
    flex-wrap: wrap;
      column-gap: .5vw;
  padding-left: 40px;
  padding-top: 20px   ;
  padding-bottom: 25px;
}
#notreal{
      background-color: transparent !important;
  border: none; 
  display: flex;
  flex-direction: column; 
  align-items: center;   
  height:70%;
  width:60%;
   background-size: cover; 
  background-repeat: no-repeat;
}

.button-container {
         width:7vw;
         height:12vh;
  display: flex;
  flex-direction: column; 
  align-items: center;   
  position:relative;
  justify-content: center;
        text-align: center;
}

.button-text {
  color: white;
    justify-content: center;
      -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: black;
}
.button-container button {
    background-color: red;
  border: none; 
  display: flex;
  flex-direction: column; 
  align-items: center;   
  background:url('app.webp');
  height:70%;
  width:60%;
   background-size: cover; 
  background-repeat: no-repeat;
}
.notesappyay2{
  left:25%;
  top: 15%;
  height: 70vh;
  width: 50vw;
  position: absolute;
  background: white;
  border-radius: 10px;
  display:none;
  z-index:9999999;
}
#uppertabofnotepad{
background: url('toolbar_CT.webp');
background-size: cover;
height: 3.7vh;
width:100%;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center
}

#notestextarea{
background: white;
height: 67vh;
width:99.3%;
resize: none; 
  border-radius: 0 0 5px 5px;
  overflow-x:hidden;
  overflow-y: scroll;
}
textarea:focus {
    outline: none;
    border-color: transparent; 
    box-shadow: none;        
}


#buttonscontainofnotespad {
 height:3vh;
 width:5vw;
 position: relative;
 left:85%;
 display:flex;
 gap:0px;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #484846 #484846;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #484846;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #484846;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }