@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* { box-sizing: border-box; }
html { line-height: 1.15; margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  height: 100%;
  font-size: calc(12px + 0.4vw);
  font-family: Montserrat, sans-serif;
  overflow-x: hidden;
  color: var(--font-color);
  background-color: var(--color-background);
  background: var(--backgroud);
  margin: 0;
}

.theme-light {
  --color-background: #f8f8f8;
  --backgroud: var(--color-background);
  --color-primary: #5A7CE6;
  --color-secondary: var(--color-primary);
  --font-color: #383838;
  --nav-shadow-color: rgba(0, 0, 0, 0.05);
  --nav: var(--color-background);
  --self-card-background: rgb(248, 248, 248);
  --color-self-card: var(--color-primary);
  --color-a: var(--color-primary);
  --color-a-hover: rgb(66, 74, 116);
  --item-color: rgb(255, 255, 255, 0);
}

.theme-dark {
  --color-background: #191919;
  --backgroud: linear-gradient(20deg, #232323 5%, #191919 30%, #191919 80%, #232323 97%);
  --color-primary: #5A7CE6;
  --color-secondary: var(--color-primary);
  --font-color: #f1e8e8;
  --nav-shadow-color: #33333333;
  --nav: #232323;
  --self-card-background: #232323;
  --color-self-card: var(--font-color);
  --color-a: #6C82F2;
  --color-a-hover: #F8F8F8;
  --item-color: var(--color-primary);
}

.bg { z-index: -2; }
#bg-item-1 {
  color: var(--color-primary);
  width: 40%;
  position: absolute;
  top: 50px;
  right: 0px;
}
#bg-item-2 {
  color: var(--item-color);
  width: 40%;
  position: absolute;
  left: -5%;
}
#bg-item-3 {
  color: var(--self-card-background);
  width: 100vw;
  position: absolute;
  filter: drop-shadow( var(--nav-shadow-color) 0px 5px 17px );
  left: 0;
  margin-top: -80px;
  z-index: -1;
}
#switch {
  color: var(--color-background);
  background-color: var(--color-primary);
  padding: 10px 20px;
  border: 0;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
}
#switch:hover {
  background-image: linear-gradient(65deg, hsl(225deg 74% 63%) 0%, hsl(224deg 75% 63%) 18%,
    hsl(223deg 76% 64%) 38%, hsl(222deg 78% 65%) 57%, hsl(221deg 79% 66%) 75%,
    hsl(220deg 80% 67%) 91%,hsl(219deg 81% 68%) 100%);
}
.block { padding-top: 40px; padding-bottom: 25px; }
.btn:link, .btn:visited {
  background-color: var(--color-primary); color: #f8f8f8;
  padding: 10px 20px; border-radius: 5px;
}
.btn:hover, .btn:active {
  background-image: linear-gradient(65deg, hsl(225deg 74% 63%) 0%, hsl(224deg 75% 63%) 18%,
  hsl(223deg 76% 64%) 38%, hsl(222deg 78% 65%) 57%, hsl(221deg 79% 66%) 75%,
  hsl(220deg 80% 67%) 91%,hsl(219deg 81% 68%) 100%);
}
#final-btn:hover, #final-btn:active {
  margin-left: 300px;
}
nav {
  position: fixed;
  top: 0px;
  display: flex;
  align-items: center;
  height: 60px;
  width: 100vw;
  background-color: var(--nav);
  box-shadow: var(--nav-shadow-color) 0px 5px 17px;
  z-index: 1000;
}
.theme-dark #logo { filter: invert(); }
#nav-content {
  margin: auto;
  width: 80%;
  display: flex;
  justify-content: space-between;
}
.navbar {
  margin: 0px;
  list-style: none;
  display: flex;
  align-items: center;
  transition: all 0.2s ease 0s;
  font-family: 'Montserrat', sans-serif;
}
.navbar a:link, .navbar a:visited { color: var(--color-a-hover); }
.navbar a:hover, .navbar a:active { color: var(--color-a); }
.navbar > li {
  margin-left: 30px; display: inline-block;
  text-align: center;
}
h1, h2, h3 { font-size: 250%; font-family: Montserrat, sans-serif; }
a:link, a:visited {
  background-color: transparent;
  color: var(--color-a);
  text-decoration: none;
}
a:hover, a:active {
  background-color: transparent;
  color: var(--color-a-hover);
  text-decoration: none;
}
ul {
  list-style: none;
  padding: 0px;
  font-size: 14px;
  line-height: 150%;
}
main {
  margin-top: 40px;
  margin-bottom: 50px;
}
main > section {
  padding-top: 70px;
  margin-top: 1px;
  min-height: 400px;
}
.container {
  margin: auto;
  width:  80%;
}
.main-socials {
  color: rgb(109, 131, 242);
  display: flex;
  max-width: 120px;
  justify-content: space-between;
  font-size: 24px;
}
.svg-inline {
  overflow: visible;
  width: 8px;
  height: 8px;
  display: inline-block;
  font-size: inherit;
  vertical-align: -.125em;
  margin-right: 50px;
}
.self-card > pre {
  font-size: 0.8em;
  max-width: 70%;
  color: var(--color-self-card);
  font-family: Montserrat, sans-serif;
}
.self-card b:hover { color: var(--color-a); }
.self-card {
  padding: 30px 35px;
  position: relative;
  max-width: 53%;
  border-radius: 10px;
  background-color: var(--self-card-background);
  box-shadow: var(--nav-shadow-color) 0px 5px 10px;
}
#about-text > h2 { margin: 0; }
#about-text > p { margin: 0;}
#about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* height: calc(80vh - 100px); */
  min-height: 80vh;
  margin-top: 70px;
}

.tablet-only, .none { display: none; }
@media only screen {
  .tablet-only { display: none; }
  .mobile-only { display: none; }
  .fullscreen-only { display: block; }

  #about-text { max-width: 45%; }
}
@media only screen and (max-width: 970px){
  .fullscreen-only { display: none; }
  .mobile-only { display: none; }
  .tablet-only { display: block; }

  #about-text { max-width: 45%; }
}
@media only screen and (max-width: 768px){
  .fullscreen-only { display: none; }
  .tablet-only { display: none; }
  .mobile-only { display: block; }
  #about-text { max-width: 100%; width: 100%; }
  #about { display: block; }
  .self-card { max-width: 100%; width: 100%; }
}
@media only screen and (max-width: 486px){
  .fullscreen-only { display: none; }
  .tablet-only { display: none; }
  .mobile-only { display: none; }
  .phone-only { display: block; }

  .self-card { margin-top: 40px !important; }
}