/* 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." */

html {
  scroll-behavior: smooth;
}

body {
  overflow: hidden;
  
  
  margin: 0;
  min-height: 100vh;
  color: white;
  font-family: Verdana, sans-serif;

  background-color: #02030a;

  background-image:
    linear-gradient(rgba(0, 200, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 255, 0.35) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(0, 80, 160, 0.4), transparent 70%);

  background-size:
    40px 40px,
    40px 40px,
    cover;

  background-attachment: fixed;
}

.page {
  height: 100vh; 
  
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.scroll-box {
  width: 80%;
  max-width: 800px;
  height: 70vh;
  
  overflow-y: auto;
  
  background-color: rgba(0, 0, 0, o.75);
  border: 2px solid cyan;
  border-radius: 12px;
  padding: 30px;
}

.scroll-box::-webkit::-webkit-scrollbar {
  width: 12px;
}

.scroll-box::-webkit-scrollbar-track {
  background: black;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: green;
  border-radius: 10px;
}





.social-box {
  border: 1px solid #666;
  background-color: #111;
  color: #cfcfcf;

  width: 90%;
  max-width: 700px;

  padding: 20px;
  margin: 30px auto;

  font-family: "Courier New", monospace;
}

.social-box legend {
  padding: 0 10px;
  color: #cfcfcf;
  font-size: 20px;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 22px 30px;
}

.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  color: #cfcfcf;
  text-decoration: none;
  text-align: center;
}

.social-link img {
  width: 42px;
  height: 42px;
  object-fit: contain;

  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.social-link:hover {
  color: white;
  text-shadow: 0 0 6px cyan;
}

.social-link:hover img {
  transform: scale(1.08);
}







.blue-text {
  color: dodgerBlue;
}