:root {
    --light-body: #fef5db;
    --dark-body: black;
    --light-text: #004d60;
  }
.side{
    width: 25px;
    background-color: rgb(55, 55, 55);
    height: 100vh;
    float: left;
    margin: 0;
    position: fixed; top: 0; left: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: black;
    overflow: visible;
    z-index: 1;
    transition: width 0.25s;
    font-family: SourceCodePro;
}
body{
    background-color:rgb(41, 41, 41);
    color: white;
    transition: all 0.25s;
    overflow: auto;
}
.side:hover{
    width:100px;
    border-radius: 0;
    transition-duration: 0.35s;
}
@font-face{
    font-family: SourceCodePro;
    src: url(../fonts/SourceCodePro-VariableFont_wght.ttf);
}
@font-face{
    font-family: Cantarell;
    src: url(../fonts/Cantarell-Regular.ttf);
}
.side h4{
    padding-left: 0;
    color:rgb(55, 55, 55);
    transition: color 0.35s, opacity 0.1s, padding-left 0.5s ;
    opacity: 0;
    font-size: 16px;
    padding-top: 5px;
    user-select: none;
    padding-bottom: 5px;
}
.side:hover h4{
    color: white;   
    opacity: 100;
    transition-duration: 0.25s;
    padding-left: 10px;
    padding-bottom: 5px;
}
.title{
    font-family: Cantarell;
}
.title h1{
    text-align: center;
    font-weight: bold;
}
hr{
    background-color: white;
    height: 2px;
    border: none;
    transition: color 0.35s, opacity 0.1s ;
    opacity: 0;
    /* width: 100%; */
}
.side:hover hr{
    background-color: white;   
    opacity: 100;
    transition-duration: 0.25s;
    transition-delay: 0.15s;
    
}
.side:hover .rule{
    width:100%;
}
.side:hover .rule2{
    width: 100%;
}
.side:hover .rule3{
    width: 100%;
}
.rule{
    width: 25%;
    transition: width 0.75s;
}
.rule2{
    width: 25%;
    transition: width 0.65s;
    transition-delay: 0.1s;
}
.rule3{
    width: 25%;
    transition: width 0.55s;
    transition-delay: 0.2s;
}
.t1{
    padding-left:0;
    color:rgb(55, 55, 55);
    transition: color 0.35s, opacity 0.1s, padding-left 0.5s ;
    opacity: 0;
    font-size: 16px;
    /* padding-top: 5px; */
    user-select: none;
    margin: 0;
    padding: 0;
    margin-left: 0;
    padding: 0;
    /* margin-left: 5px !important; */
}
.t13{
    padding-left:0;
    color:rgb(55, 55, 55);
    transition: color 0.35s, opacity 0.1s, margin-left 0.5s ;
    opacity: 0;
    font-size: 16px;
    /* padding-top: 5px; */
    user-select: none;
    margin: 0;
    padding: 0;
    margin-left: 0;
    padding: 0;
    margin-left: 5px !important; /*fix home button on legal*/
}
.t12{
    padding-left:0;
    color:rgb(55, 55, 55);
    transition: color 0.35s, opacity 0.1s, padding-left 0.5s ;
    opacity: 0;
    font-size: 16px;
    /* padding-top: 5px; */
    user-select: none;
    margin: 0;
    padding: 0;
    margin-left: -10px;
}
.side:hover .t1{
    color: white;   
    opacity: 100;
    transition-duration: 0.25s;
    padding-left: 20px;
    transition-delay: 0.1s;
}
.side:hover .t13{
    color: white;   
    opacity: 100;
    transition-duration: 0.25s;
    margin-left: 100px;
    transition-delay: 0.1s;
}
.side:hover .t12 {
    /* color: blue; */
    color: white;   
    opacity: 100;
    transition-duration: 0.15s;
    padding-left: 20px;
    transition-delay: 0.1s;
}

.switch{
    cursor: pointer;
    position: absolute;
    bottom: 0%;
    opacity: 0%;
    background-color:rgb(55, 55, 55);
    height: 30px;
    width: 0px;
    margin-bottom: -20px;
    margin-left: 0px;
    border: 2px rgb(55, 55, 55) solid;
    border-radius: 100px;
    

    transition-duration: 0.1s;

    
    
}
.circle{
    margin-left: 5px;
    margin-top: 5px;
    background-color: white;
    width: 0px;
    height: 0px;
    border-radius: 100px;
    transition: all 0.25s;
}
.side:hover .switch{
    position: absolute;
    bottom: 0%;
    background-color:rgb(101, 99, 128);
    height: 30px;
    opacity: 100%;

    margin-bottom: 12.5px;
    margin-left: 13px;
    border: 2px white solid;
    border-radius: 100px;
    transition-duration: 0.25s;
    width: 70px;    
    transition: background-color 0.35s, opacity 0.5s, border-color 0.35, width 0.5s ;
}
.side:hover .circle{
    width: 20px;
    height: 20px;
}



.dark{
    position:fixed;
    top: 0;
    right: 0;
    padding: 8px;
    font-size: 30px !important;
    cursor: pointer;
    user-select: none;
    transition: top 0.35s, right 0.35s;
}
.light-mode{
    background-color: rgb(246, 245, 244);
    color: black;
    
}



.arrow{
    position: absolute;
    top: 47%;
    transition-duration: 0.25s;

}
.side:hover .arrow{
    padding-left: 70px;
    transition: padding-left 0.5s;
}
.light{
    position:fixed;
    top: 0;
    right: 0;
    padding: 8px;
    font-size: 30px !important;
    cursor: pointer;
    user-select: none;
    transition: top 0.35s, right 0.35s;
}

.ip{
    /* font-weight: 10000; */
    color: white;
    /* filter: invert(1); */
    /* mix-blend-mode: difference; */
    margin: 0;
    transition: all 0.3s;
    margin-bottom: -30px;
    /* position: fixed; */
}
.light-mode .ip{
    font-weight: bold;
    color: black;
    
}
.ipshow{
    margin-bottom: 8px;
}

.searchform{
    display: flex;
    justify-content: center;
    text-align: center;

}
.searchinput{
    background-color: rgb(255, 255, 255);
    border-radius: 7.5px;
    height: 25px;
    outline: none;
    margin-top: 20vh;
    margin-left: 0px;
    width: 100px;
    transition: all 0.15s, height 0.15s ease-in-out, width 0.25s 0.1s ease-in-out, font-size 0.5s;
    padding-left: 10px;

}
.searchinput:focus{
    font-size: 25px;
    margin-left: 2px;
    width: 500px;
    height: 50px;
    border-color: lightblue;
    transition: all 0.15s, height 0.15s ease-in-out, width 0.25s 0.1s ease-in-out, font-size 0.5s;
}
.searchinputbig{
    font-size: 25px;
    margin-left: 2px;
    width: 500px;
    height: 50px;
    border-color: lightblue;
    transition: all 0.15s, height 0.15s ease-in-out, width 0.25s 0.1s ease-in-out, font-size 0.5s;
}
/* background-color: rgb(95, 99, 104); */
/* color: white; */
.magnify{
    color: black;
    font-size: 25px;
    font-family: Cantarell;
    position:absolute;
    margin-top: calc(20vh - 1px);
    pointer-events: none;
    /* right: 77.5px; */
    right: calc(10px);
    transition: all 0.15s, margin-right 0.25s 0.1s ease-in-out;
}
.searchinput:focus + .magnify{
    font-size: 40px;
    margin-right: 450px;

}


 ::-moz-selection { /* Code for Firefox */
    color: rgb(41, 41, 41);
    background:white;
    transition: all 0.35s;
  }
  
  ::selection {
    color: rgb(41, 41, 41);
    background:white;
    transition: all 0.35s;

  }
  .light-mode ::selection{
    color: white;
    background-color:rgb(41, 41, 41);
  }
  .light-mode ::-moz-selection{
    color: white;
    background-color:rgb(41, 41, 41);
  }
  .light-mode .b1 ::selection{
    background-color: var(--light-text);
    color: var(--light-body);
  }
  .light-mode .b1 ::-moz-selection {
    background-color: var(--light-text);
    color: var(--light-body);
  }
  .b1 ::selection{
    color: black;
    background: rgb(0, 255, 0);
    transition: all 0.35s;
  }
  .b1 ::-moz-selection{
    color: black;
    background: rgb(0, 255, 0);
    transition: all 0.35s;
  }

  .b1{
    /* background-color: #E0E4CC; */
    margin: 50px;
    margin-left: 75px;
    
    padding: 20px;
    border: 2px solid white;
    border-radius: 7.5px;
    /* color: black; */
    font-family: monospace;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
    
    background-color: black;
    color: rgb(0, 255, 0);
    transition: background-color 0.4s, border-color 0.25s, color 0.6s;
    margin-bottom: 0;
    
  }
  .light-mode .b1{
    background-color: var(--light-body);
    border-color: black;
    border-width: 2px;
    color:  var(--light-text);
    /* transition: background-color 0.35s, border-color 0.25s, color 0s; */
}
  .bart{
    margin: 0px;
    padding: 0;
    margin-left: 0px;
    transition: color 0.35s, opacity 0.1s, padding-left 0.5s, margin-left 0.5s ;


  }
  .side:hover .bart{
    margin-left: 10px;
    transition-duration: 0.25s;
  }
  .b1 p{
    margin: 0;
    padding: 0;
  }
  .b1 h3{
    margin: 0;
  }
  .firsth3{
    padding-bottom: 2px;
  }
  .b2{
    margin-top: 100px;
  }