@import url("css/menu.css");
@import url("css/header.css");
@import url("css/intro.css");
@import url("css/neuron.css");
@import url("css/subpages.css");

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  min-height: 100vh;
  background: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding-bottom: 80px;
}

/* Media query for small screens (phones, under 600px wide) */
@media (max-width: 768px) {
  html,
  body{
    overflow-x: hidden;
  }
  .intro{
    flex-direction: column;
    gap: 20px;
  }
  .intro-left{
    flex: none;
    width: 100%;
    min-width: 0;
  }
  .intro-name h1{
    white-space: normal; 
  }
  .subpage-photo {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .subpage-photo img {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    object-fit: contain;
  }
  .subpage-right{
    flex-direction: column;
    gap: 20px;
    flex: none;
    width: 100%;
    min-width: 0;
  }
  .subpage-name h1{
    white-space: normal; 
  }
  .paper-box{
    max-width:100%;
    white-space: normal; 
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .subpage-right h2,
  .subpage-right a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}