@import url('font/stylesheet.css');

/* reset */
html {
  box-sizing: border-box;
  font-size: 16px;
}

.preload * {
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

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






/* colors */
:root {
  /* Dark mode */
  --dark-background: #0a0a0a;
  --dark-text: #fff;
  --dark-grey: #767676;

  /* Light Mode */
  --light-background: #fff;
  --light-text: #000;
  --light-grey: #767676;

  /* Default */
  --background: #fff;
  --text-color: #000;
  --text-grey: #A9A9A9;
  --accent: #999;
}


@media (prefers-color-scheme: dark) {
  :root {
    --text-color: var(--dark-text);
    --background: var(--dark-background);
    --text-grey: var(--dark-grey);
  }
}


.darkMode {
  --text-color: var(--dark-text);
  --background: var(--dark-background);
  --text-grey: var(--dark-grey);
}

.lightMode {
  --text-color: var(--light-text);
  --background: var(--light-background);
  --text-grey: var(--light-grey);
}

::selection {
  color: var(--accent);
}





/* typography */
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: 300;
}

body {
  font-family: 'BR Omega', sans-serif;
  background-color: var(--background);
}




/* links */
.currently-link {
  text-decoration: none;
  background-image: linear-gradient(var(--text-color), var(--text-color));
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 100% 6%;
  transition: background-size 250ms ease-in-out;
  padding-bottom: 0em;
  display: inline;
  cursor: pointer;
}

.currently-link:hover {
  background-size: 100% 100%;
  color: var(--background);
}

.currently-link:after {
  content: "";
  background: white;
}

.currently-link:after:hover {
  color: var(--background);
}


a, .social-link, .email {
  text-decoration: none;
  color: var(--text-color);
}

.social-link:visited, .email:visited {
  text-decoration: none;
  color: var(--text-grey);
  transition: color 0.4s;
}

.social-link:hover, .email:hover {
  color: var(--text-color);
  transition: color 0.4s;
}



/* blocks */
.main-container {
    max-width: 1440px;
    margin: auto;
    padding: 0px 172px;
    min-height: 100vh;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: max-content auto auto;
}





.header {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 64px;
  margin-left: auto;
  grid-column: 1 / 2;
  grid-row: 1 / 1;
}

.logo {
  opacity: 1;
  transition: opacity 0.4s;
  fill: var(--text-color);
}

.logo:hover {
  opacity: 0.5;
  transition: opacity: 0.4s;
}

.toggle {
  font-size: 1.3333em;
  font-weight: bold;
  color: var(--text-color);
  cursor: pointer;
  transition: transform 0.75s;
  transform-style: preserve-3d;
}

.toggle:hover {
  transform: rotateY(180deg);
}





.content {
  margin-top: 96px;
  max-width: 930px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 154px;
  grid-column: 1 / 2;
  grid-row: 2 / 2;
}


.heading {
  grid-column: 1 / 3;
  grid-row: 1 / 1;
  font-size: 48px;
  color: var(--text-color)
}


.currently {
  margin-top: 128px;
  grid-column: 1 / 1;
  grid-row: 2 / 2;
}

.sub-heading {
  color: var(--text-grey);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.copy {
  font-size: 24px;
  color: var(--text-color);
  line-height: 1.5;
}





.typing-animation {
  width: 8.75em;
  animation: typing 2s steps(28), blink .625s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-color: var(--text-color);
  border-right: 3px solid;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}





/* footer
footer {
  margin-bottom: 64px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  grid-column: 1 / 2;
  grid-row: 3 / 3;
  align-self: end;
}

.socials {
  display: flex;
}

.social-link {
  margin-right: 32px;
  font-size: 16px;
  color: var(--text-grey);
}
*/





/* media queries */
@media screen and (max-width: 1048px) {
  .main-container {
    padding: 0 86px;
  }
}


/* mobile */
@media screen and (max-width: 670px) {
  .name:hover {
    opacity: 1;
  }

  .main-container {
    padding: 0px 32px;
  }

  .heading {
    font-size: 36px;
  }

  .content {
    margin: 88px 0;
    grid-template-columns: 1fr;
  }

  .currently {
    margin-top: 48px;
  }


  .email {
    margin-right: 0px;
  }

  .social-link:hover, .email:hover {
    text-decoration: none;
  }
}