:root {

  --header_height: 9rem;
  --header_height_small: 4.5rem;
  --main_color: rgb(255, 255, 255);
  --second_color: rgb(224, 239, 255);

  --font_main_color: rgb(000, 000, 000);
  --link_second_color: rgb(38, 92, 143);
}

html {

  width: 100%;
  color: var(--font_main_color);
  scroll-behavior: smooth;
}

html,
body {
  margin: 0px;
  padding: 0px;
  min-height: 100vh;
  scroll-behavior: smooth;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  min-height: 100vh;
  background-color: var(--main_color);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

a {
  color: var(--font_main_color);
  transition: 0.2s;
}

a:hover {
  color: var(--link_second_color)
}

#footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 10rem;
  width: 100%;
  background-color: var(--second_color);
  scroll-margin: 6rem;
  margin-top: auto;
  align-self: center;
  justify-self: flex-end;
}


/*responsive_font_size

/*PC*/
html {
  font-size: 20px;
}


/*PC_smaller_screen*/
@media (max-width:2200px) {
  html {
    font-size: 17px;
  }
}

@media (max-width:1400px) {
  html {
    font-size: 12px;
  }
}

/*Handy*/
@media (max-width:500px) {
  html {
    font-size: 10px;
  }
}

/*darkmode*/
@media (prefers-color-scheme: dark) {

  :root {
    --main_color: rgb(30, 30, 30);
    --font_main_color: rgb(255, 255, 255);
    --second_color: rgb(43, 43, 43);
  }
  .navigation_button{
    background-color: var(--font_main_color);
  }
}