/* FONT FAMILIES */
@font-face {
  font-family: 'DS';
  src: url(fonts/Nintendo-DS-BIOS.ttf);
}
@font-face {
  font-family: 'PS';
  src: url(fonts/TheRaveIsInYourPants-YxxO.ttf);
}

html {
  /* font stuff */
  color: white;
  font-size: 62.5%;
  font-smooth: never;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  /* background */
  background: #000000;
  /* size */
  height: 100vh;
}

a {
  color: white;
  text-decoration: none;
}

a:hover .projects__name{
  text-decoration: underline;
}

.links__list a:hover {
  text-decoration: underline;
}

.gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1000;
  overflow: hidden;
}
.gradient * {
  user-select: none;
  width: 100%;
  height: 100%;
  display: none;
}
@keyframes longSlide {
  0% {background-position-x: -24rem;}
  100% {background-position-x: 26000rem;}
}
.gradient__cloud {
  display: block;
  position: absolute;
  top: 36.57%;
  background-image: url(images/cloudDay.png);
  background-repeat: repeat-x;
  background-position-y: 23%;
  animation: longSlide 4000s;
}
.gradient__day {
  background: #007ECA;
  background: linear-gradient(180deg, rgba(0, 126, 202, 1) 0%, rgba(0, 142, 216, 1) 21%, rgba(0, 178, 236, 1) 49%, rgba(104, 203, 244, 1) 80%, rgba(206, 230, 238, 1) 100%);
}
.gradient__sunset {
  background: #7786D0;
  background: linear-gradient(180deg, rgba(119, 134, 208, 1) 0%, rgba(206, 154, 192, 1) 49%, rgba(242, 160, 139, 1) 100%);
}
.gradient__night {
  background: #051144;
  background: linear-gradient(180deg, rgba(5, 17, 68, 1) 0%, rgba(28, 48, 107, 1) 21%, rgb(40, 50, 98) 49%, rgba(31, 39, 78, 1) 100%);
}
.gradient__sunrise {
  background: #0F6E9C;
  background: linear-gradient(180deg, rgba(15, 110, 156, 1) 0%, rgba(162, 191, 187, 1) 54%, rgba(245, 239, 203, 1) 75%, rgba(242, 218, 152, 1) 88%, rgba(255, 177, 129, 1) 100%);
}

/* FONTS */
.PS {
  font-family: PS;
}
.DS {
  font-family: DS;
}

body {
  margin-top: 7vh;
}

/*** HEADER ***/
header * {
  display: block;
  text-align: center;
  transition: letter-spacing .44s ease-in-out;
  user-select: none;
}

header *:hover{
  cursor: pointer;
}

.header__date {
  font-size: 1.6rem;
  letter-spacing: 0.12em;
}
.header__hour {
  font-size: 2.4rem;
  letter-spacing: 0.12em;
  margin-top: .4rem;
}
.header__message {
  font-size: 1.8rem;
  margin-top: 2.4rem;
}
.header__name {
  font-size: 12rem;
  line-height: .85;
  margin-top: 1rem;
}  

.header__date:hover {
  letter-spacing: 0.24em;
}
.header__hour:hover {
  letter-spacing: 0.24em;
}
.header__message:hover {
  letter-spacing: 0.05em;
}
.header__name:hover {
  letter-spacing: 0.05em;
}

.header__date:active {
  letter-spacing: 1.24em;
}
.header__hour:active {
  letter-spacing: 1.67em;
}
.header__message:active {
  letter-spacing: 0.42em;
}
.header__name:active {
  letter-spacing: 0.24em;
}

/*** MAIN ***/
main {
  display: flex;
  justify-content: center;
  margin-top: 6rem;
}
.main__title {
  font-size: 1.4rem;
  letter-spacing: .09em;
  margin-bottom: 1rem;
  margin-left: .6rem;
  user-select: none;
  transition: letter-spacing .44s ease-in-out;
}

.main__title:hover {
  cursor: pointer;
  letter-spacing: .18em;
}
.main__title:active {
  letter-spacing: .4em;
}

/* LINKS */
.links {
  display: block;
  min-width: 16.4rem;
  width: 8.5%;
  padding: 1em;
}
.links__list {
  display: flex;
  flex-direction: column;
}
.links__list * {
  margin-bottom: .4rem;
}

/* CORE */
.core {
  display: block;
  min-width: 35rem;
  width: 29%;
  padding: 1em;
}
.core div{
  margin-bottom: 2rem;
}

.projects__list {
  display: flex;
  flex-direction: column;
}
.projects__list__element {
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
}

.friends__list {
  display: flex;
  flex-wrap: wrap;
}

.projects__date {
  font-size: .6em;
  margin-right: .4rem;
  text-decoration: none;
  width: 10rem;
  text-align: left;
}
.projects__list img {
  margin-left: auto;
}

.friends__list__element {
  margin-bottom: .8rem;
  margin-right: .8rem;
  
  display: flex;
  align-items: center;
  width: fit-content;
}
.friends__list img {
  margin-left: .6em;
}

.aero_button {
  user-select: none;
  font-size: 2.4rem;
  font-family: DS;
  border-radius: .3em;
  padding: .6rem .8em;
  background: rgba(255, 255, 255, 0.028);
  box-shadow: 0 2px 2px rgba(14, 14, 16, 0.109), inset .1em .1em rgba(255, 255, 255, 0.471), inset 0 .1em rgba(204, 245, 255, 0.802), inset -.1em -.1em rgba(41, 49, 51, 0.071), inset 0 10px 20px rgba(207, 241, 255, 0.048), inset 0 -15px 30px rgba(38, 72, 94, 0.042);
  /* -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 .1em rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); */
  /* -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 .1em rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); */
  /* -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 .1em rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); */
  transition: all .2s ease-in-out;
}

.aero_button:hover {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.152);
  scale: 1.01 1.03;
}

.aero_button:active {
  background: rgba(255, 255, 255, 0.257);
  scale: .99 .98;
}


@media (max-aspect-ratio: 3/4) {
  .header__name {
    font-size: 8rem;
  }
}


@media (max-aspect-ratio: 11/16) {
  main {
    flex-direction: column;
    align-items: center;
  }
  .links {
    min-width: 35rem;
  }
  .links__list {
    max-width: 50%;
  }
}


.console {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 80%;
  width: 100%;
  font-size: 1.6rem;
  font-family: 'Courier New', Courier, monospace;
  color: #ffffff;
  background-color: rgba(157, 157, 157, 0.598);
}

.console__history {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.console__form {
  width: 90vw;
  font-size: 1.6rem;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 0;
}

.console__form * {
  width: 100%;
}