@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gorditas&display=swap');

html,body
{
  box-sizing: border-box;
  transition: background-color 2s ease-in;
  scroll-behavior: smooth;
  align-content: center;
  margin:0;
  background: linear-gradient(
      rgb(253, 253, 253), 
      rgb(44, 43, 44)
    ), url('');
}


#desk{
  position: absolute;
    bottom: 0;
     width: 355px;
      left: 400px;
  -webkit-animation: moveUp 2.0s ease;
     -moz-animation: moveUp 2.0s ease;
      -ms-animation: moveUp 2.0s ease;
       -o-animation: moveUp 2.0s ease;
          animation: moveUp 2.0s ease;
  justify-content: center;
  align-items: center;
  z-index: 18;
}

#onthewall{
  position: absolute;
  left: 270px;
  bottom: 15px;
  width: 450px;
  height: 450px;
}


#chair{
  position: absolute;
    bottom: 0px;
      left: 530px;
    height: 180px;
     width: 135px;
   z-index: 65;     
  -webkit-animation: moveRight 3.6s ease;
     -moz-animation: moveRight 3.6s ease;
      -ms-animation: moveRight 3.6s ease;
       -o-animation: moveRight 3.6s ease;
          animation: moveRight 3.6s ease; 
}

#chair:hover{
  -webkit-animation: flip 1.6s ease alternate-reverse infinite;
     -moz-animation: flip 1.6s ease alternate-reverse infinite;
      -ms-animation: flip 1.6s ease alternate-reverse infinite;
       -o-animation: flip 1.6s ease alternate-reverse infinite;
          animation: flip 1.6s ease alternate-reverse infinite; 
          transition: all 1s ease;
}

#computer{
  position: absolute;
     width: 150px;
    height: 120px;
    bottom: 160px;
      left: 500px;
   z-index: 25;
  -webkit-animation: moveUp 2.0s ease;
     -moz-animation: moveUp 2.0s ease;
      -ms-animation: moveUp 2.0s ease;
       -o-animation: moveUp 2.0s ease;
          animation: moveUp 2.0s ease; 
}

#stickynote{
  position: absolute;
    height: 30px;
     width: 30px;
     right: 14px;
       top: 300px;
  -webkit-animation: moveDown 3s ease-in-out;
     -moz-animation: moveDown 3s ease-in-out;
      -ms-animation: moveDown 3s ease-in-out;
       -o-animation: moveDown 3s ease-in-out;
          animation: moveDown 3s ease-in-out;
}

#stickynote:hover{
  -webkit-animation: noteFall 3s ease;
     -moz-animation: noteFall 3s ease;
      -ms-animation: noteFall 3s ease;
       -o-animation: noteFall 3s ease;
          animation: noteFall 3s ease;
}

#window{
  position: absolute;
      left: 32px;
       top: 118px;
     width: 175px;
  -webkit-animation: moveRight 2s ease;
     -moz-animation: moveRight 2s ease;
      -ms-animation: moveRight 2s ease;
       -o-animation: moveRight 2s ease;
          animation: moveRight 2s ease;
}

#windows{
  position: absolute;
     width: 140px;
       top: 130px;
  overflow: hidden;
    height: 275px;
      left: 50px;

  -webkit-animation: moveRight 2s ease;
     -moz-animation: moveRight 2s ease;
      -ms-animation: moveRight 2s ease;
       -o-animation: moveRight 2s ease;
          animation: moveRight 2s ease;
}

#floor{
   background-image: radial-gradient(#05293a, #010e20);
     width: 100%;
    height: 30px;
    bottom: 0;
  position: absolute;
   z-index: 8;
}



#outside{
  position: absolute;
   z-index: 0;
       top: 0px;
      left: -200px;
    height: 285px;
     width: 600px;
  background-size:contain;
  background-attachment: fixed;
  -webkit-animation: weather 20s linear infinite reverse;
     -moz-animation: weather 20s linear infinite reverse;
      -ms-animation: weather 20s linear infinite reverse;
       -o-animation: weather 20s linear infinite reverse;
          animation: weather 20s linear infinite reverse;
          animation-fill-mode: forwards;
          animation-delay: 2s;
}

#blinds{
  position: absolute;
  z-index: 3;
  top:115px;
  left:30px;
  height:350px;
  width:178px;
  -webkit-animation: moveRight, pullBlinds;
     -moz-animation: moveRight, pullBlinds;
          animation: moveRight, pullBlinds;
  animation-timing-function: ease, ease-in;
  animation-duration: 2s, .5s;
  animation-iteration-count: 1,1;
  animation-fill-mode: forwards;
  animation-delay: 0s,5s;
  -webkit-animation-delay: 0s,6s;
}

#blinds:hover{
  height:356px;
}

#bookshelf{
  position: absolute;
  height:100px;
  width:125px;
  left:26px;
  top:160px;
  -webkit-animation: moveDown 3s ease;
     -moz-animation: moveDown 3s ease;
      -ms-animation: moveDown 3s ease;
       -o-animation: moveDown 3s ease;
          animation: moveDown 3s ease;
}

@keyframes fadetoblack
{
  from {  background-color: rgb(106, 29, 169);}
    to { background-color: rgb(1, 3, 4);}
}
@keyframes skycolor
{
  from { background-color: rgb(151, 210, 214);}
    to { background-color: rgb(7, 103, 193);}
}
@keyframes fly
{ 
  0%, 100% {transform: translateY(0px);}
  50% {transform: translateY(-600px);}
}


@keyframes makevisible
{
  from { height: 0%;}
    to { height: 15%;}
}
@keyframes rotate
{ 
  100%{ transform: rotate(360deg);}
}
@keyframes end
{
  from { visibility: visible;}
    to { visibility: hidden;}
}
@keyframes widen{
  from { width: 35%;}
    to { width: 45%;}
}





#picture{
  position: absolute;
  height:150px;
  width:120px;
  top:10px;
  background-size: 10px;
  left:30px;
  -webkit-animation: moveUp 1.75s ease;
     -moz-animation: moveUp 1.75s ease;
      -ms-animation: moveUp 1.75s ease;
       -o-animation: moveUp 1.75s ease;
          animation: moveUp 1.75s ease;
}

#picture:hover{
  height: 175px;
  width:150px;
 -webkit-transition: all 1s;
    -moz-transition: all 1s;
         transition: all 1s;
}


#trashcan:hover{
  -webkit-animation: spin 1s ease;
     -moz-animation: spin 1s ease;
      -ms-animation: spin 1s ease;
       -o-animation: spin 1s ease;
          animation: spin 1s ease;
          animation-fill-mode: forwards;
          -webkit-animation-fill-mode: forwards;
          -webkit-transition: all 1s;
                  transition: all 1s; 
}

#trashcan{
  height: 70px;
  width: 60px;
  position: absolute;
  bottom: 0px;
  left:315px;
  z-index: 18;
  -webkit-animation: moveRight 3.5s ease;
     -moz-animation: moveRight 3.5s ease;
      -ms-animation: moveRight 3.5s ease;
       -o-animation: moveRight 3.5s ease;
          animation: moveRight 3.5s ease;
          animation-fill-mode: forwards;
          -webkit-animation-fill-mode: forwards;
  
}

#light{
  position: absolute;
  top:-10px;
  left:395px;
  width:200px;
  -webkit-animation: moveDown 2s ease;
     -moz-animation: moveDown 2s ease;
      -ms-animation: moveDown 2s ease;
       -o-animation: moveDown 2s ease;
          animation: moveDown 2s ease;
}

/*computer screen*/
#screen{
  height:53.5px;
  width: 65px;
  position: absolute;
  bottom:200px;
  left:515px;
  background-blend-mode: luminosity;
  border-radius: 2px;
  z-index: 31;
  -webkit-animation: screenOn 2s ease-in;
     -moz-animation: screenOn 2s ease-in;
      -ms-animation: screenOn 2s ease-in;
       -o-animation: screenOn 2s ease-in;
          animation: screenOn 2s ease-in;
          animation-delay: 5.5s;
          animation-fill-mode: forwards;
}

#screenLeft{
  position: absolute;
  height:84px;
  width:145px;
  left:123px;
  top:73px; 
  display: flex;
  z-index: 23;
  justify-content: center;
  align-items: center;
  margin:0;
  -webkit-animation: screenOn 2s ease-in;
     -moz-animation: screenOn 2s ease-in;
      -ms-animation: screenOn 2s ease-in;
       -o-animation: screenOn 2s ease-in;
          animation: screenOn 2s ease-in;
          animation-delay: 7.3s;
          animation-fill-mode: forwards;
}

#screenRight{
  position: absolute;
  height:84px;
  width:145px;
  left:313px;
  top:73px; 
  z-index: 22;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0;
  border-radius: 1px;
  -webkit-animation: screenOn 1.5s ease-in;
     -moz-animation: screenOn 1.5s ease-in;
      -ms-animation: screenOn 1.5s ease-in;
       -o-animation: screenOn 1.5s ease-in;
          animation: screenOn 1.5s ease-in;
          animation-delay: 8.2s;
          animation-fill-mode: forwards;
}

#stairs{
  position: absolute;
  left:30px;
  bottom:12px;
  width:255px;
  z-index:99;
  -webkit-animation: moveRight 1s ease;
     -moz-animation: moveRight 1s ease;
      -ms-animation: moveRight 1s ease;
       -o-animation: moveRight 1s ease;
          animation: moveRight 1s ease;
}
#bulletin{
  position: absolute;
  height:450px;
  width:200px;
  bottom:15px;
  left:751px;
}

#wall{
  position: absolute;
  left:0;
  bottom: 0;
  width:450px;
  height: 450px;
  z-index: 16;
  
  -webkit-animation: moveDown .5s ease;
     -moz-animation: moveDown .5s ease;
      -ms-animation: moveDown .5s ease;
       -o-animation: moveDown .5s ease;
          animation: moveDown .5s ease;
}


#monitorLeft{
  position: absolute;
  height:120px;
  width:170px;
  left:110px;
  top:60px;
  z-index: 19;
  -webkit-animation: moveLeft 3.25s ease;
     -moz-animation: moveLeft 3.25s ease;
      -ms-animation: moveLeft 3.25s ease;
       -o-animation: moveLeft 3.25s ease;
          animation: moveLeft 3.25s ease;
}

#monitorRight{
  position: absolute;
    height: 120px;
     width: 170px;
     right:-20px;
     top:60px;
     z-index: 20;
  -webkit-animation: moveRight 3.25s ease;
     -moz-animation: moveRight 3.25s ease;
      -ms-animation: moveRight 3.25s ease;
       -o-animation: moveRight 3.25s ease;
          animation: moveRight 3.25s ease;

}
/*turns on comupter switch*/
#powerButton{
  position: absolute;
  height: 9px;
  width: 9px;
  left: 615px;
  bottom: 210px;
  border-radius: 5px;
  z-index: 91;
  -webkit-animation: switchButtonOn .7s ease-in-out infinite;
     -moz-animation: switchButtonOn .7s ease-in-out infinite;
       -o-animation: switchButtonOn .7s ease-in-out infinite;
          animation: switchButtonOn .7s ease-in-out infinite;
          animation-fill-mode: forwards;
          animation-delay: 4s;
}

/*appears logo on comupter screen*/
#screenIcon{
  visibility: hidden;
  position: absolute;
  width:42px;
  margin: auto;
  left:13px;
  top:3px;
  z-index: 24;
  -webkit-animation: makevisible,flip;
     -moz-animation: makevisible,flip;
      -ms-animation: makevisible,flip;
       -o-animation: makevisible,spin;
          animation: makevisible,spin;
          animation-duration: 1s,1s;
          animation-timing-function: ease-in-out;
          animation-direction: normal,alternate;
          animation-fill-mode: forwards;
          animation-iteration-count: 1,3;
          animation-delay: 9.5s;
}

#screenIconRight{
  visibility: hidden;
  position: absolute;
  width:70px;
  margin: auto;
  left:40px;
  top:4px;
  -webkit-animation: makevisible,flip;
     -moz-animation: makevisible,flip;
      -ms-animation: makevisible,flip;
       -o-animation: makevisible,flip;
          animation: makevisible,flip;
          animation-duration: 60s,2s;
          animation-timing-function: ease-in,ease-in-out;
          animation-direction: normal,alternate,alternate;
          -webkit-animation-iteration-count: 1,infinite,infinite;
          -webkit-animation-duration: .25s,2s;
          animation-iteration-count: 1,infinite,infinite;
          animation-delay: 9.5s;
          animation-fill-mode: forwards;
}

#screenIconLeft{
  visibility: hidden;
  position: absolute;
  width:70px;
  margin: auto;
  left:40px;
  top:4px;
  z-index: 21;
  -webkit-animation: makevisible,flip;
     -moz-animation: makevisible,flip;
      -ms-animation: makevisible,flip;
       -o-animation: makevisible,flip;
          animation: makevisible,flip;
          animation-duration: .5s,2s;
          animation-timing-function: ease-in-out,ease-in-out;
          animation-direction: normal,alternate,alternate;
          -webkit-animation-iteration-count: 1,infinite,infinite;
          animation-iteration-count: 1,infinite,infinite;
          animation-delay: 9.5s;
          animation-fill-mode: forwards;
}


/*plant*/
#plant{
  position: absolute;
  bottom: 0px;
  left:37px;
  width:100px;
  z-index: 41;
  -webkit-animation: moveLeft 3.25s ease;
     -moz-animation: moveLeft 3.25s ease;
      -ms-animation: moveLeft 3.25s ease;
       -o-animation: moveLeft 3.25s ease;
          animation: moveLeft 3.25s ease;
}

#plant:hover{
 cursor: pointer;
  -webkit-animation: rotate 2.25s ease;
     -moz-animation: rotate 2.25s ease;
      -ms-animation: rotate 2.25s ease;
       -o-animation: rotate 2.25s ease;
          animation: rotate 2.25s ease;
}




/*move right*/
@keyframes moveRight{
    0% { transform: translateX(-200px); }
  100% { transform: translateX(0); }
}
@-moz-keyframes moveRight{
    0% { transform: translateX(-200px); }
  100% { transform: translateX(0); } 
}
@-webkit-keyframes moveRight{
    0% { transform: translateX(-200px); }
  100% { transform: translateX(0); }
}
@-o-keyframes moveRight{
    0% { transform: translateX(-200px); }
  100% { transform: translateX(0); }
}


/*Moves items Left*/
@keyframes moveLeft{
    0% { transform: translateX(200px);}
  100% { -webkit-transform: translateX(0px);}
}
@-webkit-keyframes moveLeft{
    0% { transform: translateX(200px);}
  100% { -webkit-transform: translateX(0px);}
}
@-moz-keyframes moveLeft{
    0% { transform: translateX(200px);}
  100% { -webkit-transform: translateX(0px);}
}
@-o-keyframes moveLeft{
    0% { transform: translateX(200px);}
  100% { -webkit-transform: translateX(0px);}
}

/*diplays Weather outside window*/
@keyframes weather{
    0% { transform: translateX(200px); }
  100% { transform: translateX(-200px); }
}
@-webkit-keyframes weather{
    0% { transform: translateX(200px); }
  100% { transform: translateX(-200px); }
}
@-moz-keyframes weather{
    0% { transform: translateX(200px); }
  100% { transform: translateX(-200px); }
}
@-o-keyframes weather{
    0% { transform: translateX(200px); }
  100% { transform: translateX(-200px); }
}

/*Moves item upward*/
@keyframes moveUp{
    0% { transform: translateY(500px);}   
  100% { transform: translateY(-50x);}
}
@-webkit-keyframes moveUp{
    0% { transform: translateY(500px);}
  100% { transform: translateY(-50x);}
}
@-moz-keyframes moveUp{
    0%{ transform: translateY(500px);}
  100%{ transform: translateY(-50x);}
}
@-o-keyframes moveUp{
    0%{ transform: translateY(500px);}
  100%{ transform: translateY(-50x);}
}

/*move down*/
@keyframes moveDown{
    0%{ transform: translateY(-500px);}
  100%{ transform: translateY(50x);}
}
@-webkit-keyframes moveDown{
    0%{ transform: translateY(-500px);}
  100%{ transform: translateY(50x);}
}
@-moz-keyframes moveDown{
    0%{ transform: translateY(-500px);}
  100%{ transform: translateY(50x);}
}
@-o-keyframes moveDown{
    0%{ transform: translateY(-500px);}
  100%{ transform: translateY(50x);}
}

/*turns comuptuer screen on*/
@keyframes screenOn{
  from { background-color:black;}
    to { background-color: rgba(111, 207, 214, 0.742);
         background-blend-mode: luminosity;
         box-shadow: 1px 1px 2px rgba(162, 147, 250, 0.637), 0 0 25px rgb(192, 192, 245), 0 0 5px white;}
}
@-webkit-keyframes screenOn{
  from { background-color:black;}
    to { background-color: rgba(111, 207, 214, 0.742);
         background-blend-mode: luminosity;
         box-shadow: 1px 1px 2px rgba(162, 147, 250, 0.637), 0 0 25px rgb(192, 192, 245), 0 0 5px white;}
}
@-moz-keyframes screenOn{
  from { background-color:black;}
    to { background-color: rgba(111, 207, 214, 0.742);
         background-blend-mode: luminosity;
         box-shadow: 1px 1px 2px rgba(162, 147, 250, 0.637), 0 0 25px rgb(192, 192, 245), 0 0 5px white;}         
}
@-o-keyframes screenOn{
  from { background-color:black;}
    to { background-color: rgba(111, 207, 214, 0.742);
         box-shadow: 1px 1px 2px rgba(162, 147, 250, 0.637), 0 0 25px rgb(192, 192, 245), 0 0 5px white;
         background-blend-mode: luminosity;}
}

/*turns on computer switchbutton*/
@keyframes switchButtonOn{
 from { background-color:rgba(0, 0, 0, 0);}
   to { background-color:rgb(155, 238, 0);
        box-shadow: 1px 1px 2px rgb(214, 252, 0), 0 0 25px rgb(156, 175, 148), 0 0 5px white;}
}
@-webkit-keyframes switchButtonOn{
 from { background-color:rgba(0, 0, 0, 0);}
   to { background-color:rgb(155, 238, 0);
        box-shadow: 1px 1px 2px rgb(214, 252, 0), 0 0 25px rgb(156, 175, 148), 0 0 5px white;}
}
@-moz-keyframes switchButtonOn{
 from { background-color:rgba(0, 0, 0, 0);}
   to { background-color:rgb(155, 238, 0);
        box-shadow: 1px 1px 2px rgb(214, 252, 0), 0 0 25px rgb(156, 175, 148), 0 0 5px white;}
}
@-o-keyframes switchButtonOn{
 from { background-color:rgba(0, 0, 0, 0);}
   to { background-color:rgb(155, 238, 0);
        box-shadow: 1px 1px 2px rgb(214, 252, 0), 0 0 25px rgb(156, 175, 148), 0 0 5px white;}
}


/*pulls Blinds up*/
@-webkit-keyframes pullBlinds{
  from { height: 400px;}
    to { height: 5px;}
}
@-moz-keyframes pullBlinds{
  from { height: 400px;}
    to { height: 5px;}
}
@-o-keyframes pullBlinds{
  from { height: 400px;}
    to { height: 5px;}
}
@keyframes pullBlinds{
  from { height: 400px;}
    to { height: 5px;}
}


#favicon{
      width: 175px;
     height: 200px;
   position: absolute;
  animation: spin 2s ease alternate-reverse 3;
}

#logo{
  height:200px;
  display: flex;
  animation-name: spin, smallsize;
  animation-duration: 3s, 2s;
  animation-delay: 0s,3s;
  animation-iteration-count: 5,3;
  animation-direction: alternate-reverse,alternate;
  animation-fill-mode: forwards;
}

/*display nothing*/
@keyframes displayNone{
  from { display: flex; }
    to { display: none; }
}
@-webkit-keyframes displayNone{
  from { display: flex; }
    to { display: none; }
}
@-o-keyframes displayNone{
  from { display: flex; }
    to { display: none; }
}

/*make visible*/
@keyframes makevisible {
  from { visibility: hidden; }
    to { visibility: visible;}
}
@-webkit-keyframes makevisible {
  from { visibility: hidden; }
    to { visibility: visible;}
}
@-o-keyframes makevisible {
  from { visibility: hidden; }
    to { visibility: visible;}
}
@keyframes makevisible {
  from { visibility: hidden; }
    to { visibility: visible;}
}

@keyframes flip {
  100% { transform: rotateY(360deg); }
}
@-webkit-keyframes flip {
  100% { transform: rotateY(360deg); }
}
@-moz-keyframes flip{
  100% { transform: rotateY(360deg); }
}

/*spin*/
@keyframes spin {
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  100% { transform: rotate(360deg); }
}
@-moz-keyframes spin{
  100% { transform: rotate(360deg); }
}

/*swing*/
@keyframes swing{
  100% { transform: rotate(40deg); }
}
@-webkit-keyframes swing{
  100%{ transform: rotate(360deg); }
}
@-moz-keyframes swing{
  100%{ transform: rotate(360deg); }
}

/*causes sticky note to fall*/
@keyframes noteFall{
  100%{
    transform: translateY(-200px) rotate(40deg);
  }

  0%{
    transform: translateY(20px) rotate(180deg);
  }
}
@-webkit-keyframes noteFall{
  100%{
    transform: translateY(120px) rotate(40deg);
  }

  10%{
    transform: rotateY(120deg);
  }
  0%{
      
  }
}
@-moz-keyframes noteFall{
  100%{
    transform: translateY(120px) rotate(40deg);
  }

  10%{
    transform: rotateY(120deg);
  }
  0%{
      
  }
}


@keyframes smallsize{
 from { height:200px; } 
   to { height:0px;}
}


/********NAVIGATION BAR*********************/

#nav-bar{
  position: sticky;
  top:0;
}

.navbar{ 
  font-size: 20px;
  background-color: rgb(0, 0, 0);
  top:0;
  padding: 0px;

  /*top: 0;
  position: absolute;
  transition: 1s all ease-in;
  left:630px; */
  -webkit-animation: all 1s ease-in;
     -moz-animation: all 1s ease-in;
      -ms-animation: all 1s ease-in;
       -o-animation: all 1s ease-in;
          animation: all 1s ease-in;
}

/********BANNER SECTION*********************/
#banner
{
  height: 100vh;
    background: 
    linear-gradient(
      rgba(211, 219, 230, 0.74), 
      rgba(0, 66, 66, 0.5)
    ), url('');
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
  width:100%;
  position: relative;
  overflow: hidden;
}



/*On switch*/
#on{
  background-color: rgb(62, 182, 52);
  border-radius: 5px;
  color: white;
  padding: 3px;
  font-weight: 10px;
  font-family: gorditas;
  color: rgb(23, 75, 19);;
}

/*off switch*/
#off{
  background-color: rgb(252, 92, 0);
  border-radius: 5px;
  padding: 3px;
  font-family: Gorditas ;
  color: rgb(94, 42, 12);
}


#switch{
  background-color: rgba(128, 128, 128, 0.74);
  width:90px;
  height:50px;
  margin:auto;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  left:20px;
  top:200px;
  z-index: 66;
  border-radius: 3px;
  box-shadow: 10px black;
}




/*fades background to black*/
@keyframes fadetoblack
{
  from { background-color: rgb(0, 0, 0);}
    to { background-color: rgba(255, 255, 255, 0);}
}
@-webkit-keyframes fadetoblack
{
  from { background-color: rgb(0, 0, 0);}
    to { background-color: rgba(0, 0, 0, 0);}
}


@keyframes fadeInMenuFont
{
  from { color: rgba(0, 0, 0, 0);}
  to { color: rgba(206, 248, 250, 0.733);}
}



/*Moves item upward*/
@keyframes fly{
    0% { transform: translateY(100px);}   
  100% { transform: translateY(-80px);}
}
@-webkit-keyframes fly{
    0% { transform: translateY(100px);}
  100% { transform: translateY(-80px);}
}
@-moz-keyframes fly{
    0%{ transform: translateY(100px);}
  100%{ transform: translateY(-80px);}
}
@-o-keyframes fly{
    0%{ transform: translateY(200px);}
  100%{ transform: translateY(-800px);}
}

#message{
  display: none;
}


@media screen and (max-width: 375px) {

    html,body
  {
    box-sizing: border-box;
    transition: background-color 2s ease-in;
    scroll-behavior: smooth;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(182, 182, 182);
  }

  #banner{
    display: none;
  }

  #message{
    margin-top:50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width:300px;
    height:300px;
    padding: 20px;
    transition: background-color 2s ease-in;
    border-radius: 3px;
    box-shadow: 0px 0px 30px#010e20;
    color:rgb(43, 42, 42);
    background-color: rgb(255, 255, 255);
    font-family: poppins;
    font-size: 20px;
    text-align: center;
  }

  


  
}