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

:root {
  font-family: var(--font-primary), var(--font-fallback);
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  --font-size-h1 : 40px;
  --font-size-h2 : 30px;
  --font-size-h3 : 25px;
  --font-size-h4 : 22px;
  --font-size-h5 : 20px;
  --font-size-h6 : 18px;
  --normal-size : 18px;
  --font-primary : Inter, Segoe UI, Roboto, Oxygen, Ubuntu, "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-fallback : system-ui, Avenir, Helvetica, Arial, sans-serif;

  --color-brown-primary : #8d493a;
  --color-brown-secondary : #D0B8A8;
  --color-brown-shading :#DFD3C3;
  --color-brown-background : #F5F5F5;

  --color-blue-primary : #112D4E;
  --color-blue-secondary : #3F72AF;
  --color-blue-shading :#BDBDBD;
  --color-blue-background : #F9F7F7;

  --color-gray-primary : #393E46;
  --color-gray-secondary : #222831;
  --color-gray-shading :#00ADB5;
  --color-gray-background : #FEFEFE;

  --color-text: #1e1e1e;
  --color-background: #fff;
  --color-primary: #2d3e50;
  --color-secondary: #a1887f;
  --color-highlight: #e9b4b4;
  --color-shadow: #888;

}

h1,h2,h3,h4,h5,h6 { color:var(--color-text);}

h1 {font-size: var(--font-size-h1);}
h2 {font-size: var(--font-size-h2);}
h3 {font-size: var(--font-size-h3);}
h4 {font-size: var(--font-size-h4);}
h5 {font-size: var(--font-size-h5);}
h6 {font-size: var(--font-size-h6);}

p {
  font-size: var(--normal-size);
  color : var(--color-text)
}

a, a:visited {
  font-weight: 500;
  color: var(--color-blue-primary);
  text-decoration: inherit;
}
a:hover {
  color: var(--color-blue-secondary);
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  min-height: 100vh;
  overflow-x : hidden; 
  color: var(--color-gray-primary);
  background-color: var(--color-background);  
}

body::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}

#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

main {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.page-wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

section {
  display : inline-block;
  min-width : 100%;
  min-height : 90vh;
  margin : 0 auto;
  padding: 2rem;

}

section.center {
  display : inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

section.right-bottom {
  display : inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding : 200px;
}

.columngroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.column {
  flex: 1 1 30%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.column > h3 {
  color : var(--color-blue-shading);
}

button {
  background-color: var(--color-blue-primary);
  color: var(--color-blue-shading);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 30px;
  display : inline-block;
  min-width: 50px;
  width : fit-content;
  font-size: var(--font-size-h6);
}

button:hover {
  background-color: var(--color-blue-secondary);
  color: var(--color-blue-primary);
}

.career-list {
  display: flex;
  width : calc(1200px - 10rem);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.tech-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.tech-stack .slash {
  display: inline-flex; 
  width: 50px; 
  justify-content: center;
  color : var(--color-blue-shading);
}


section .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

#contact-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

@media (max-width :991px) {
  :root {
    --font-size-h1 : 30px;
    --font-size-h2 : 25px;
    --font-size-h3 : 22px;
    --font-size-h4 : 20px;
    --font-size-h5 : 18px;
    --font-size-h6 : 16px;
    --normal-size : 16px;
  }
  p, summary {
    font-size: 1rem;
    line-height: 1.5;
  }
}

@media (max-width: 768px) {

  :root {
    --font-size-h1 : 25px;
    --font-size-h2 : 22px;
    --font-size-h3 : 20px;
    --font-size-h4 : 18px;
    --font-size-h5 : 14px;
    --font-size-h6 : 14px;
    --normal-size : 14px;
  }

  .columngroup {
    flex-direction: column;
    align-items: center;
  }

  .column {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .columngroup {
    flex-direction: column;
    align-items: center;
  }

  .column {
    width: 100%;
  }

  section.right-bottom {
    padding: 2rem;
    align-items: center;
    text-align: center;
  }

  .career-list {
    width: 100%;
    padding: 1rem;
  }

  button {
    width: 100%;
    font-size: var(--font-size-h6);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #eee;
    --color-background: #1e1e1e;
    --color-primary: #f0eada;
    --color-secondary: #bfae9f;
    --color-highlight: #ffb3b3;
  }

  #writing-medium h3 {
    color : var(--color-background);
  }
}