cheatsheet.css

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

body {
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='1' stroke='%23c2c2c2ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    background-blend-mode: lighten;
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    background-color: #f0f0f0;
    user-select: none;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

#categories {
    scroll-margin-top: 10rem;
}

/* -------------------------------------Home Page Header-------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 5rem;
    margin: 0;
    flex-wrap: wrap;
    background-color: transparent; /* Default background */
    transition: backdrop-filter 0.3s ease; /* Smooth transition for blur effect */
    backdrop-filter: none; /* No blur by default */
}

.header.scrolled {
    backdrop-filter: blur(10px); /* Blur effect after scrolling */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle light grey shadow */
}


.logo {
    margin-right: 1.25rem;
}

.logo a {
    font-size: 1.5rem;
    font-weight: bold;
    display: inline;
    text-decoration: none !important;
    transition: transform 0.3s ease;
    color: #000000;
    flex-shrink: 0;
}

.logo a:hover {
    color: #00bcd4;
    transform: scale(1.0075);
}
.logo img {
    display: none;
    width: 40px;
    height: auto;
}
.search-bar {
    padding: 0.3125rem;
    border-radius: 1.875rem;
    font-size: 1rem;
    text-indent: 0.9375rem;
    width: 100%; 
    max-width: 200px; 
    height: 1.5rem;
    margin-left: 0;
    flex-grow: 1;
}

.search-bar:focus {
    outline: none;
    box-shadow: 0 0 0.3125rem #00bcd4;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-grow: 1;
}

.navbar {
    display: flex;
    gap: 2.5rem;
    flex-grow: 1; 
    justify-content: flex-end;
    box-sizing: border-box; 
    transition: background-color 0.3s ease; 
}

.navbar a {
    color: black;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s;
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem;
    box-sizing: border-box; 
    transition: background-color 0.3s ease; 
}

.navbar i {
    margin-right: 0.5rem;
}

.navbar a:hover {
    background-color: #00bcd4;
    color: white;
}

.navbar a.active {
    background-color: #2C65AE; 
    color: white;
}

.github {
    margin-left: 1.25rem;
    align-items: center;
    flex-shrink: 0; 
}

.github button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 2rem;
}

.github button:hover {
    color: #00bcd4;
}

/* ------------------------------------Overview-----------------------------------------*/
.overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    width: 90%;
    padding: 2rem;
}

.overview img {
    height: 100px;
}

.logo-overview {
    display: flex;
    gap: 2rem;
}

.overview h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.overview p {
    color: rgb(127, 127, 127);
    font-size: 1.5rem;
    padding: 0 2rem;
}



/* -------------------------------------Masonry layout-----------------------------------------*/
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adjusts to fit 4 items per row */
    grid-auto-rows: 10px; /* Dynamic height rows */
    gap: 30px;
    margin-top: 3rem;
    padding: 2rem 15rem;
}

.box {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start; 
    padding: 1rem;
    box-sizing: border-box;
    border: solid 0.125rem black;
    border-radius: 20px;
    box-shadow: 0.125rem 0.625rem 0.625rem rgb(0, 0, 0); 
    background-color: #ffffff; 
    transition: transform 0.3s;
    font-size: 1.2em;
    color: #ffffff;
    grid-row: span 10; 
}

.box:hover {
    transform: translateY(-10px);
}

.box h1 {
    font-size: 1.875rem; 
    margin-bottom: 1rem; 
    color: #2C65AE;
    text-align: left;
    width: 100%;
}

.box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.box ul li {
    margin-bottom: 0.625rem; 
}

.box ul li a {
    padding-left: 1rem;
    text-decoration: none;
    color: #000000;
    font-size: 1rem; 
    font-weight: bold;
    display: block;
}

.box ul li a p {
  color: rgb(127, 127, 127);
  margin: 0 1rem;
  font-style: italic;
  margin-top: 5px;
}

.box ul li a:hover {
    color: #0056b3;
    background-color: #00bcd4;
    border-radius: 5px; 
}

hr {
  flex-grow: 1; 
  height: 2px; 
  background: #333;
  border: none; 
  margin: 0;
  margin-bottom: 10px;
}
 /* ---------------------Specific dimensions and colors for each item ----------------------------*/

 /* -------------Javascript----------------*/
.box1 { grid-row: span 10; background-color: #8174A0; }
.box2 { grid-row: span 11; background-color: #89A8B2; }
.box3 { grid-row: span 9; background-color: #DEAA79; }
.box4 { grid-row: span 7; background-color: #A6AEBF; }
.box5 { grid-row: span 22; background-color: #CB9DF0; }
.box6 { grid-row: span 11; background-color: #C6E7FF; }
.box7 { grid-row: span 13; background-color: #FFB38E; }
.box8 { grid-row: span 12; background-color: #FFF6E3; }
.box9 { grid-row: span 12; background-color: #FFB26F; }
.box10 { grid-row: span 7; background-color: #789DBC; }
.box11 { grid-row: span 23; background-color: #ECDFCC; }
.box12 { grid-row: span 14; background-color: #E5D9F2; }
.box13 { grid-row: span 8; background-color: #FADFA1; }
.box14 { grid-row: span 12; background-color: #FF8A8A; }
 /* -------------Python----------------*/
.box15 { grid-row: span 12; background-color: #C0C78C; }
.box16 { grid-row: span 49; background-color: #F0DBAF; }
.box17 { grid-row: span 13; background-color: #8E7AB5; }
.box18 { grid-row: span 8; background-color: #7EACB5; }
.box19 { grid-row: span 19; background-color: #E6D9A2; }
.box20 { grid-row: span 14; background-color: #A6B37D; }
.box21 { grid-row: span 10; background-color: #86AB89; }
.box22 { grid-row: span 7; background-color: #CBE2B5; }
.box23 { grid-row: span 17; background-color: #F8EDE3; }
.box24 { grid-row: span 8; background-color: #F6EACB; }
.box25 { grid-row: span 21; background-color: #F1D3CE; }
.box26 { grid-row: span 14; background-color: #739072; }
.box27 { grid-row: span 7; background-color: #D0BFFF; }
.box28 { grid-row: span 6; background-color: #A0937D; }
.box29 { grid-row: span 8; background-color: #BB9AB1; }
.box30 { grid-row: span 9; background-color: #91DDCF; }
.box31 { grid-row: span 6; background-color: #ACE1AF; }
.box32 { grid-row: span 8; background-color: #D0E8C5; }
.box33 { grid-row: span 7; background-color: #DBA979; }
.box34 { grid-row: span 6; background-color: #FCFFE0; }
.box35 { grid-row: span 6; background-color: #A79277; }
.box36 { grid-row: span 5; background-color: #BED7DC; }
.box37 { grid-row: span 7; background-color: #F6F193; }
.box38 { grid-row: span 7; background-color: #F2C18D; }
 /* -------------Git------------------*/
 .box39 { grid-row: span 8; background-color: #E0E5B6; }
 .box40 { grid-row: span 14; background-color: #D1BB9E; }
 .box41 { grid-row: span 8; background-color: #F2C18D; }
 .box42 { grid-row: span 6; background-color: #C5EBAA; }
 .box43 { grid-row: span 7; background-color: #EADBC8; }
 .box44 { grid-row: span 6; background-color: #EEC759; }
 /* -------------Java------------------*/
 .box45 { grid-row: span 10; background-color: #EFB6C8; }
 .box46 { grid-row: span 11; background-color: #B3C8CF; }
 .box47 { grid-row: span 23; background-color: #E5E1DA; }
 .box48 { grid-row: span 8; background-color: #B0EBB4; }
 .box49 { grid-row: span 9; background-color: #FFE6A9; }
 .box50 { grid-row: span 11; background-color: #C6E7FF; }
 .box51 { grid-row: span 13; background-color: #FDDBBB; }
 .box52 { grid-row: span 10; background-color: #B5C18E; }
 .box53 { grid-row: span 10; background-color: #E4C087; }
 .box54 { grid-row: span 6; background-color: #FFB26F; }
 .box55 { grid-row: span 9; background-color: #A5B68D; }
 .box56 { grid-row: span 6; background-color: #C96868; }
 .box57 { grid-row: span 7; background-color: #FEF9D9; }
 .box58 { grid-row: span 28; background-color: #A6B37D; }
 .box59 { grid-row: span 8; background-color: #FF8A8A; }
 .box60 { grid-row: span 8; background-color: #DFD3C3; }
 .box61 { grid-row: span 21; background-color: #C9DABF; }
 .box62 { grid-row: span 6; background-color: #B1AFFF; }
 /* ----------------C-----------------*/
 .box63 { grid-row: span 13; background-color: #F1F0E8; }
 .box64 { grid-row: span 8; background-color: #CB9DF0; }
 .box65 { grid-row: span 11; background-color: #F0C1E1; }
 .box66 { grid-row: span 6; background-color: #C5D3E8; }
 .box67 { grid-row: span 6; background-color: #A6B37D; }
 .box68 { grid-row: span 8; background-color: #FFF6E3; }
 .box69 { grid-row: span 6; background-color: #789DBC; }
 .box70 { grid-row: span 5; background-color: #E7CCCC; }
 .box71 { grid-row: span 5; background-color: #D2E0FB; }
 .box72 { grid-row: span 7; background-color: #8967B3; }
 .box73 { grid-row: span 8; background-color: #A1D6B2; }
 .box74 { grid-row: span 5; background-color: #CEDF9F; }
 /* --------------SQL---------------*/
 .box75 { grid-row: span 6; background-color: #E3CAA5; }
 .box76 { grid-row: span 7; background-color: #D18CE0; }
 .box77 { grid-row: span 9; background-color: #F3E9DD; }
 .box78 { grid-row: span 12; background-color: #CEDF9F; }
 .box79 { grid-row: span 8; background-color: #8FBDD3; }
 .box80 { grid-row: span 8; background-color: #F9EBC8; }
 .box81 { grid-row: span 5; background-color: #9A86A4; }
 .box82 { grid-row: span 6; background-color: #C4DFAA; }
 .box83 { grid-row: span 9; background-color: #CDC2AE; }
 .box84 { grid-row: span 8; background-color: #CBA0AE; }
 .box85 { grid-row: span 8; background-color: #554994; }
 .box86 { grid-row: span 7; background-color: #FF9494; }
 .box87 { grid-row: span 4; background-color: #967E76; }
 .box88 { grid-row: span 7; background-color: #FAF4B7; }
 /* --------------HTML---------------*/
 .box89 { grid-row: span 10; background-color: #A59D84; }
 .box90 { grid-row: span 26; background-color: #8174A0; }
 .box91 { grid-row: span 12; background-color: #89A8B2; }
 .box92 { grid-row: span 4; background-color: #DEAA79; }
 .box93 { grid-row: span 9; background-color: #A6AEBF; }
 .box94 { grid-row: span 7; background-color: #CB9DF0; }
 .box95 { grid-row: span 6; background-color: #C6E7FF; }
 .box96 { grid-row: span 9; background-color: #BFECFF; }
 .box97 { grid-row: span 11; background-color: #E4E0E1; }
 .box98 { grid-row: span 14; background-color: #789DBC; }
 .box99 { grid-row: span 6; background-color: #A2D2DF; }
 .box100 { grid-row: span 7; background-color: #FFB38E; }
 .box101 { grid-row: span 7; background-color: #E7CCCC; }
 .box102 { grid-row: span 7; background-color: #EDDFE0; }
 .box103 { grid-row: span 6; background-color: #FFECC8; }
 .box104 { grid-row: span 5; background-color: #A5B68D; }
 /* -------------Markdown---------------*/
 .box105 { grid-row: span 6; background-color: #B9F3FC; }
 .box106 { grid-row: span 5; background-color: #D9ACF5; }
 .box107 { grid-row: span 5; background-color: #FFCEFE; }
 .box108 { grid-row: span 6; background-color: #EDDBC7; }
 .box109 { grid-row: span 8; background-color: #DFFFD8; }
 .box110 { grid-row: span 6; background-color: #C9F4AA; }
 .box111 { grid-row: span 6; background-color: #DFA67B; }
 .box112 { grid-row: span 6; background-color: #94AF9F; }
 .box113 { grid-row: span 8; background-color: #D5B4B4; }
 .box114 { grid-row: span 5; background-color: #FDF7C3; }
 .box115 { grid-row: span 6; background-color: #FFB4B4; }
 .box116 { grid-row: span 5; background-color: #DDFFBB; }
 .box117 { grid-row: span 7; background-color: #B7B7B7; }
 .box118 { grid-row: span 6; background-color: #CBB279; }
 .box119 { grid-row: span 5; background-color: #E1ECC8; }
 .box120 { grid-row: span 6; background-color: #FFD89C; }
 .box121 { grid-row: span 10; background-color: #D0BFFF; }
 .box122 { grid-row: span 5; background-color: #ECEE81; }
 .box123 { grid-row: span 5; background-color: #FF8080; }
 /* ----------------DBMS-------------------------*/
 .box124 { grid-row: span 12; background-color: #C6E7FF }
 .box125 { grid-row: span 11; background-color: #B3C8CF }
 .box126 { grid-row: span 9; background-color: #E5E1DA }
 .box127 { grid-row: span 13; background-color: #FFD2A0}
 .box128 { grid-row: span 13; background-color: #D7D3BF }
 .box129 { grid-row: span 9; background-color: #A6AEBF }
 .box130 { grid-row: span 9; background-color: #FFB38E }
 .box131 { grid-row: span 6; background-color: #AB886D }
 .box132 { grid-row: span 6; background-color: #EDDFE0 }
 .box133 { grid-row: span 5; background-color: #C1CFA1 }
 /* ----------------C++-------------------------*/
 .box134 { grid-row: span 10; background-color: #A5B68D }
 .box135 { grid-row: span 10; background-color: #DE8F5F }
 .box136 { grid-row: span 7; background-color: #E4C087 }
 .box137 { grid-row: span 6; background-color: #BC7C7C }
 .box138 { grid-row: span 11; background-color: #D6C0B3 }
 .box139 { grid-row: span 11; background-color: #D2E0FB }
 .box140 { grid-row: span 5; background-color: #C0C78C }
 .box141 { grid-row: span 7; background-color: #A1D6B2 }
 .box142 { grid-row: span 5; background-color: #CCD5AE }
 .box143 { grid-row: span 6; background-color: #D0B8A8 }
 .box144 { grid-row: span 5; background-color: #9CA986 }
 .box145 { grid-row: span 6; background-color: #FFC6C6 }
 /* -----------------C#-------------------------*/
 .box146 { grid-row: span 7; background-color: #E0E5B6 }
 .box147 { grid-row: span 10; background-color: #B3C8CF }
 .box148 { grid-row: span 7; background-color: #CADABF }
 .box149 { grid-row: span 9; background-color: #ECCA9C }
 .box150 { grid-row: span 10; background-color: #B0EBB4 }
 .box151 { grid-row: span 5; background-color: #CEDF9F }
 .box152 { grid-row: span 7; background-color: #89A8B2 }
 .box153 { grid-row: span 5; background-color: #A888B5 }
 .box154 { grid-row: span 6; background-color: #EFB6C8 }
 .box155 { grid-row: span 8; background-color: #C6E7FF }
 .box156 { grid-row: span 13; background-color: #CDC1FF }
 .box157 { grid-row: span 11; background-color: #E4C087 }
 .box158 { grid-row: span 11; background-color: #AB886D }
 .box159 { grid-row: span 9; background-color: #FFF7D1 }
 /* -----------------React------------------------*/
 .box160 { grid-row: span 8; background-color: #FFD2A0 }
 .box161 { grid-row: span 9; background-color: #FFE6A9 }
 .box162 { grid-row: span 9; background-color: #CB9DF0 }
 .box163 { grid-row: span 6; background-color: #FFE3E3 }
 .box164 { grid-row: span 7; background-color: #8967B3 }
 .box165 { grid-row: span 5; background-color: #C0C78C }
 /* ----------------PHP------------------------*/
 .box166 { grid-row: span 12; background-color: #C1BAA1 }
 .box167 { grid-row: span 10; background-color: #F1F0E8 }
 .box168 { grid-row: span 17; background-color: #FFE6A9 }
 .box169 { grid-row: span 8; background-color: #F0C1E1 }
 .box170 { grid-row: span 64; background-color: #B5CFB7 }
 .box171 { grid-row: span 68; background-color: #E5E1DA }
 .box172 { grid-row: span 6; background-color: #E5E1DA }
 .box173 { grid-row: span 8; background-color: #EFB6C8 }
 .box174 { grid-row: span 6; background-color: #89A8B2}
 .box175 { grid-row: span 6; background-color: #CDC1FF }
 /* ----------------Linux------------------------*/
 .box176 { grid-row: span 26; background-color: #ffffff }
 .box177 { grid-row: span 16; background-color: #ffffff }
 .box178 { grid-row: span 10; background-color: #ffffff }
 .box179 { grid-row: span 10; background-color: #ffffff }
 .box180 { grid-row: span 15; background-color: #ffffff }
 .box181 { grid-row: span 18; background-color: #ffffff }
 .box182 { grid-row: span 17; background-color: #ffffff }
 .box183 { grid-row: span 20; background-color: #ffffff }
 .box184 { grid-row: span 19; background-color: #ffffff }
 .box185 { grid-row: span 32; background-color: #ffffff }
 .box186 { grid-row: span 19; background-color: #ffffff }
 .box187 { grid-row: span 29; background-color: #ffffff }
 .box188 { grid-row: span 30; background-color: #ffffff }
 .box189 { grid-row: span 46; background-color: #ffffff }
 .box190 { grid-row: span 14; background-color: #ffffff }
 /* ----------------Docker------------------------*/
 .box191 { grid-row: span 26; background-color: #ffffff }
 .box192 { grid-row: span 30; background-color: #ffffff }
 .box193 { grid-row: span 26; background-color: #ffffff }
 .box194 { grid-row: span 17; background-color: #ffffff }
 /* ----------------PostgreSQL------------------------*/
 .box195 { grid-row: span 20; background-color: #ffffff }
 .box196 { grid-row: span 14; background-color: #ffffff }
 .box197 { grid-row: span 15; background-color: #ffffff }
 .box198 { grid-row: span 17; background-color: #ffffff }
 .box199 { grid-row: span 12; background-color: #ffffff }
 .box200 { grid-row: span 10; background-color: #ffffff }
 .box201 { grid-row: span 6; background-color: #ffffff }
 .box202 { grid-row: span 8; background-color: #ffffff }
 .box203 { grid-row: span 13; background-color: #ffffff }
 .box204 { grid-row: span 10; background-color: #ffffff }
 .box205 { grid-row: span 10; background-color: #ffffff }
 .box206 { grid-row: span 8; background-color: #ffffff }
 .box207 { grid-row: span 9; background-color: #ffffff }
 .box208 { grid-row: span 7; background-color: #ffffff }
 .box209 { grid-row: span 10; background-color: #ffffff }
 .box210 { grid-row: span 14; background-color: #ffffff }
 .box211 { grid-row: span 22; background-color: #ffffff }
 .box212 { grid-row: span 26; background-color: #ffffff }
 .box213 { grid-row: span 7; background-color: #ffffff }
 .box214 { grid-row: span 7; background-color: #ffffff }
 .box215 { grid-row: span 23; background-color: #ffffff }
 .box216 { grid-row: span 9; background-color: #ffffff }
 .box217 { grid-row: span 13; background-color: #ffffff }
 .box218 { grid-row: span 13; background-color: #ffffff }
 .box219 { grid-row: span 11; background-color: #ffffff }
 .box220 { grid-row: span 24; background-color: #ffffff }




 @media (max-width: 1440px) {
  .container {
    padding: 0 5rem;
  }
}

@media (max-width: 1200px) {
  .header {
    padding: 1.25rem 4rem;
  }

  .container {
    padding: 0 3rem;
  }
}

@media (max-width: 992px) {
  .header {
    padding: 1.25rem 3rem;
  }

  .navbar {
    gap: 2rem;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1.125rem;
  }

  .container {
    padding: 0 2rem;
  }


@media (max-width: 768px) {
  .header {
    padding: 1.25rem 2rem;
  }

  .navbar {
    gap: 1.5rem;
  }

  .hero {
    height: auto;
    padding: 3rem 1.5rem;
  }

  .hero-logo {
    flex-wrap: wrap;
    justify-content: center;
  }

  .features {
    flex-direction: column;
    align-items: center;
  }

  .feature {
    width: 100%;
    max-width: 300px;
  }

  .container {
    padding: 0 1.5rem;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .header {
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .search-container {
    width: 100%;
    margin-bottom: 1rem;
  }

  .search-bar {
    max-width: 100%;
  }

  .navbar {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
  }

  .github {
    margin-left: 0;
    margin-top: 1rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .container {
    padding: 0 1rem;
  }


/* Use relative units for typography */
  html {
    font-size: 16px;
  }

  body {
    font-size: 1rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  /* Use CSS clamp for responsive font sizes */
  .hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .hero p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
  }

  /* Ensure flexbox layout adjusts properly on smaller screens */
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}
}