@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap');

body {
  background-color: black;
  /* background-image: url("/assets/darkbg.jpg");
  background-repeat: repeat-xy; */
  color: white;
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  
}
a:link {
color: lightblue;
text-decoration: none;
}
a:visited {
color: lightblue;
text-decoration: none;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
  

  /* DIV containing the vertically aligned big text (like on index.html) */

  html, body, #val-focused-a {
    margin: 0;
    padding: 0, 0, 0, 0;
    height: 98%;
    width: 100%;
    text-align: center;
  }

  #val-focused-a {
    display: table;
  }

  #val-focused-b {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: middle;
  }
  
  #val-focused-c {
    
    margin: auto;
    font-size: 350%;
    font-weight: 600;
  }

  #val-focused-d {
    margin: auto;
    font-size: 200%;
    font-weight: 400;
  }
  /* Smooth scrolling */

  html {
    scroll-behavior: smooth;
  }

  /* DIV containting everything but top bar, bottom text and val-focused text */

  #main {
    padding:20px;
    margin-top:30px;
    font-weight: 400;
  }
  

  /* For details and summary tags */

  details {
    
    margin: 0 auto ;
    background: #282828;
    margin-bottom: .5rem;

    box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
    border-radius: 5px;
    overflow: hidden;

    margin-left: 15%;
    margin-right: 15%;
  }
  
  summary {
    padding: 0.5rem;
    display: block;
    background: #333;
    padding-left: 2.2rem;
    
    position: relative;
    cursor: pointer;
  }
  
  summary:before {
    content: '';
    border-width: .4rem;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: .7rem;
    left: 1rem;
    transform: rotate(0);
    transform-origin: .2rem 50%;
    transition: .25s transform ease;
  }
  
  details[open] > summary:before {
    transform: rotate(90deg);
  }
  
  
  details summary::-webkit-details-marker {
    display:none;
  }

  h1 {
    font-weight: 400;
  }

  h2 {
    font-weight: 400;
  }

  h3 {
    font-weight: 400;
  }

  hr {
    border-top: 8px solid #fff;
    border-radius: 5px;
    margin-right: 15%;
    margin-left: 15%;
  }

  #main button {background-color: #4a58b5; border: none; color:white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font: inherit; cursor: pointer;}
  #main button:active {background-color: #2a3266;}
  #main input {background-color: darkblue; color: white; padding: 10px 16px; box-sizing: border-box; border: 0px; border-radius: 4px; font: inherit;}

  /* Small text */
  .smalltext {color: lightgray; font-size: 60%;}