@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600&display=swap');
:root{
     --accent-color: #000;
     --top-color: #37B8C3;
}
*::selection{
     background: #0000;
}
*{
     margin: 0;padding: 0;box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
}
a{color: inherit;text-decoration: none;} li{list-style-type: none;}
body{
     overflow: hidden;
}
.top{
     height: 10vh;
     background: #333;
     width: 100%;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     -ms-align-items: center;
     align-items: center;
     justify-content: space-between;
     padding: 0px 3rem;
}
     .top h1{
          color: var(--accent-color);
          text-transform: uppercase;
          letter-spacing: 5px;
          word-spacing: 15px;
          font-weight: 200;
     }
     .top h1 i{
          transition: .5s all ease;
     }
     .top h1 i:hover{
          transform: rotateZ(720deg);
     }
     #randomize{
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          color: var(--accent-color);
          border: 2px solid;
          padding: .5rem 1rem;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          font-weight: 600;
          border-radius: 1rem;
          cursor: pointer;
          -ms-align-items: center;
          align-items: center;
          justify-content: center;
     }
          #randomize span{
               height: 2rem;
               line-height: 1.4rem;
               transition: .3s all ease;
               padding: .3rem 1rem;
          }
          #randomize span:hover{
               background: #fff2;
          }
               .divider{
                    height: 2rem;
                    width: 2px;
                    margin: 0 1rem;
                    background: var(--accent-color);
               }
               .fas{
                    margin: 0 .4rem;
               }
     .color{
          color: var(--accent-color);
          font-size: 23px;
          font-weight: 200;
          border-radius: 1rem;
          border: 2px solid;
          padding: .6rem 1.6rem;
          transition: .3s all ease;
          cursor: pointer;
     }
     .color:hover{
          background: #fff;
          color: #111;
     }
     #hexcode{
          opacity: 0;
          position: absolute;
          left: -999999px;
     }
     .hidden{
          display: none;
     }

.screen{
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     width: 100%;
     height: 90vh;
}
     .pane{
          height: 90vh;
          width: 100%;
     }
          .left{
               display: -webkit-flex;
               display: -ms-flex;
               display: flex;
          }
               .left-left{
                    color:#333;
                    width: 100%;
                    background: var(--accent-color);
                    display: grid;
                    place-items:center;
               }
               .left-right{
                    width: 100%;
                    background: #333;
                    color: var(--accent-color);
                    display: grid;
                    place-items:center;
               }
          .right{
               font-size: 2rem;
               background: #fff;
               color: var(--accent-color);
               display: grid;
               place-items:center;
          }

.saved{
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100vw;
     height: 50vh;
     background: white;
     overflow-y: scroll;
     display: none;
}
     .saved-color{
          width: 100%;
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          justify-content: space-around;
          padding: 1rem;
          color: #fff;
     }
     .saved-color h1{
          background: #0001;
          color: #fff9;
          display: inline;
          padding: .3rem 1rem;
          border-radius: .5rem;
          -webkit-box-shadow: inset 16px 17px 14px -10px rgba(0,0,0,.4);
          -moz-box-shadow: inset 16px 17px 14px -10px rgba(0,0,0,.4);
          box-shadow: inset 16px 17px 14px -10px rgba(0,0,0,.4);
     }
     .saved-color-buttons{
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          gap:1rem;
     }
     .copy-saved{
          background: #0003;
          display: grid;
          place-items:center;
          font-weight: 600;
          border-radius: 1rem;
          padding: 0 1rem;
          transition:.3s all ease;
          cursor: pointer;
          -webkit-box-shadow: inset 16px 17px 14px -10px rgba(0,0,0,.4);
          -moz-box-shadow: inset 16px 17px 14px -10px rgba(0,0,0,.4);
          box-shadow: inset 16px 17px 14px -10px rgba(0,0,0,.4);
     }
     .copy-saved:hover{
          background: #fff4;
          -webkit-box-shadow: inset 12px 12px 14px -10px rgba(0,0,0,.4);
          -moz-box-shadow: inset 12px 12px 14px -10px rgba(0,0,0,.4);
          box-shadow: inset 12px 12px 14px -10px rgba(0,0,0,.4);
     }

     .smallscreen{
          display: none;
     }
     #added-last{
          display: none;
     }
     .modal{
          position: absolute;
          text-align: center;
          background: #0005;
          color: #fff;
          letter-spacing: .2rem;
          line-height: 4rem;
          width: 50vw;
          display: grid;
          place-items:center;
          padding: 4rem 0 ;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: none;
     }
     .modal .close{
          position: absolute;
          color: #000;
          cursor: pointer;
          font-size: 2rem;
          right: 2rem;top: 1rem;
          transition: .3s all ease-out;
     }
     .modal .close:hover{
          transform: rotateZ(360deg);
     }
     .modal h1{
          font-size: 4rem;
          line-height: 8rem;
          text-transform: uppercase;
     }

@media screen and (max-width: 1075px){
     .smallscreen{
          display: block;
          position: fixed;
          width: 100vw;
          height: 100vh;
          background: #333;
          color: var(--accent-color);
          z-index: 999999;
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          -ms-align-items: center;
          align-items: center;
          justify-content: center;
          -webkit-flex-direction: column;
          -ms-flex-direction: column;
          flex-direction: column;
          gap: 3rem;
     }
}