/* internal import */
@import './nav.css';
@import './banner.css';
@import './icons.css';
@import './form.css';
@import './projects.css';
@import './about.css';


/* external imports */
@import url('https://fonts.googleapis.com/css2?family=Chango&family=Limelight&family=Londrina+Shadow&family=Marcellus&family=Original+Surfer&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* colors */
  --navlinks: var(--yellow);
  --body-color: var(--yellow);
  --yellow: #F7B538;
  --red: #A52422;
  --blue: #191F4D;
  --blue-opac: rgba(25,
    31,
    77, 0.3);
  --white: #F7FFF7;


  --about-top: var(--blue);
  --about-color: var(--white);

  --about-bottom: var(--about-color);
  --skills-color: var(--about-top);
  /* fonts */
  --content-font: 'Marcellus', serif;
  --content-font-2: 'Original Surfer', serif;
  --banner-font-family: 'Londrina Shadow',
    cursive;
  /* sizing */
  --container-padding: 0% 5%;

  /* font sizes */
  --header1: 100px;
  --header2: 35px;
}

body {
  background-color: var(--white);
  color: var(--blue);
  font-family: var(--content-font);
  width: 100vw;
  height: 100vh;
}

body,
#content {
  padding: 0;
  margin: 0;
}

#content {
  color: var(--body-color);
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

#display-content {
  width: 100%;
  height: 100%;
}

.container {
  height: 100%;
  width: 100%;
  padding: var(--container-padding);
}

.display-none {
  display: none;
}

#about,
#projects {
  height: 100%;
  width: 100%;
  padding: 10px;
}

@media screen and (width < 425px) {
  #content {
    flex-direction: column;
    position:unset;
  }
}