html, body {
  height: 100%;
}

body {
  margin: 0;
  background: black;
  font-family: VT323;
  color:white;
}

p, li {
  font-size: large;
}

@font-face {
  font-family: VT323;
  src: url(VT323-Regular.ttf);
}

.box {
  border: solid 2px #3f3f3f;
  border-radius: 2px;
  padding: 10px;
  margin: 10px;
  display: block;
  box-sizing: border-box;
  background: black;
}

#page {
  display: flex;
  height: calc(100vh - 30px);
  gap: 10px;
}

#content {
  flex: 1 1 auto;
  min-width: 0;
}

#sideBar {
  width: 200px;
  flex-shrink: 0;
}

#cool-stuff {
  width: 100%;
  box-sizing: border-box;
}

#cool-stuff a {
  font-size:larger;
  color:#df2929;
}

#cool-stuff a:hover {
  color:#ff5e5e;
}

#cool-stuff li {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: larger;
}

#sideBar a {
  color:grey;
}

#sideBar a:hover {
  color:#b4b4b4;
}

#all {
  padding:2% 20%;
}

@media screen and (max-width:800px) {
  #all {
    padding:0%;
  }
  img {
    display:none;
  }

  #cool-stuff .box {
    max-width: 100%;
  }
}

#header {
  height: 50px;
  display: flex;
  align-items: center;
  color: #bbbbbb;
}

#headerContent {
  width:100%;
  text-align: center;
}

/* background animation */

.grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: -1; /* behind everything */
    background-image: 
      linear-gradient(90deg, rgba(255, 0, 0, 0.3) 10%, transparent 10%),
      linear-gradient(rgba(255, 0, 0, 0.3) 10%, transparent 10%);
    background-size: 50px 50px;
    animation: moveGrid 10s linear infinite;
  }

  @keyframes moveGrid {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-300px, -300px);
    }
  }

  .content {
    position: relative;
    padding: 50px;
    text-align: center;
  }

/* Align header and icon */
.header-with-icon {
  display: flex;
  align-items: center;   
  justify-content: space-between; 
  background: linear-gradient(90deg, #df2929, rgba(0,0,0,0));
}

.header-with-icon h2 {
  margin: 0; 
}

.header-with-icon .icon {
  cursor: pointer;
  font-size: 1.2em;
}

.profile {
  display: flex;
  align-items: flex-start;
  gap: 12px;              
  margin-top: 10px;
}

.profile p {
  margin: 0;
  line-height: 1.4;
}