:root {
  --shadow-distance: 0.08em;
  --negative-shadow-distance: -0.08em;
}


@font-face {
	font-family: Righteous;
	src: url('Righteous-Regular.ttf');
}
@font-face {
	font-family: SGA;
	src: url('sga_8.ttf');
}
@font-face {
	font-family: Gabarito;
	src: url('Gabarito-VariableFont_wght.ttf');
}

@font-face {
	font-family: BakbakOne;
	src: url('BakbakOne-Regular.ttf');
}

@keyframes keyframes_flash_text {
  0% {
    color:#FFFFFF;
  }
  25% {
    color:#FFFF00;
  }
  50% {
    color:#FFAA00;
  }
  75% {
    color:#FFFF00;
  }
  100% {
    color:#FFFFFF;
  }
}

@keyframes keyframes_moving_shadow {
  0% {
    text-shadow: var(--shadow-distance) var(--shadow-distance) #000000;
  }
  25% {
    text-shadow: var(--shadow-distance) var(--negative-shadow-distance) #000000;
  }
  50% {
    text-shadow: var(--negative-shadow-distance) var(--negative-shadow-distance) #000000;
  }
  75% {
    text-shadow: var(--negative-shadow-distance) var(--shadow-distance) #000000;
  }
  100% {
    text-shadow: var(--shadow-distance) var(--shadow-distance) #000000;
  }
}

@keyframes keyframes_duck_breathe {
  0% {
    width:30vw;
  }
  5% {
    width:30vw;
  }
  100% {
    width:31vw;
  }
}

@keyframes keyframes_appear {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes keyframes_click_wobble {
  0% {
    transform: scale(1);
  }
  1% {
    transform: scale(0.8);
  }
  25% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes keyframes_move_horizontal {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-100vw);
    opacity: 1;
  }

}


@keyframes keyframes_duck_appear {
  0% {
    transform: translateY(100vh);
    opacity: 0;    
  }
  10% {
    opacity: 1;    
  }
  80% {
    transform: translateY(-2vh);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes keyframes_bobby_move {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0vw);
  }
}

@keyframes keyframes_bobby_wave {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(10deg);
  }
  0% {
    transform: rotate(0deg);
  }
}

@keyframes keyframes_change_background {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

page {
  overflow-x: hidden;
}

body {
  font-family: Gabarito, Verdana;
  font-size:1.2vw;
  background-color: rgba(42, 123, 155, 1);
  background: radial-gradient(circle, rgba(180, 200, 80, 1) 0%, rgba(85, 180, 130, 1) 30%, rgba(42, 123, 155, 1) 80%, rgba(140, 90, 255, 1) 100%);
  background-size: 250% 250%;
  color:#FFFFFF;
  text-shadow: 0.1vw 0.1vw rgba(0,0,0,0.5);
  margin:0px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  animation-name: keyframes_change_background;
  animation-duration: 60s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

a:link, a:visited {
  text-decoration: none;
  color:#FFFF66;
}

a:hover {
  color:#FFAA00;
}

h1, h2 {
  font-family: Righteous, Verdana;
  text-transform: uppercase;
  margin: 0px;
}

h1 {
  font-size:6vw;
  line-height:0.9em;
  text-shadow: 0.3vw 0.3vw rgba(0,0,0,0.5);
}

h2 {
  font-size:3.25vw;
  color: #F0F0FF;
  line-height:0.8em;
  text-shadow: 0.2vw 0.2vw rgba(0,0,0,0.5);
}

h3 {
  font-size:2vw;
  line-height:0.6em;
  margin-bottom:1vw;
}

h4 {
  font-size:1.2vw;
  line-height:0.6em;
}

.header_date {
  display: inline;
  font-size: 0.7vw;
  padding:0.1em;
  color: #FFFFAA;
}

.page {
  margin:1em;
  text-align:center;
  height:0px;
}

.sga_text {
	font-family: SGA;
  text-shadow:none;
  color:rgba(0,0,0,0.5);
}

.logo {
  text-align: justify;
  text-align-last: justify;
  width:41vw;
  display:inline-block;
}

.logo_right {
  text-align: justify;
  text-align-last: justify;
  vertical-align: top;
  margin-bottom:-0.5vw;
}

.logo_right_text {
  font-family: Righteous, Verdana;
  text-transform: uppercase;
  margin: 0px;
  font-size:3vw;
  color: #F0F0FF;
  text-shadow: 0.2vw 0.2vw rgba(0,0,0,0.5);
  letter-spacing: 0.09em;
  margin-left:0.5vw;
  margin-right:0.5vw;
}

.logo_left {
  text-align: justify;
  text-align-last: justify;
  vertical-align: top;
  line-height:0px;
  font-size:0.8vw;
  margin-left:1vw;
  margin-right:1vw;
  letter-spacing: 0.05em;
}

.link_section {
  text-align: center;
  height:2vw;
}


.main_link {
  font-family: BakbakOne, Verdana;
  font-size:3.2vw;
  display: inline-block;
  line-height:1em;
  text-shadow: 0.2vw 0.2vw rgba(0,0,0,0.5);
}
.main_link:hover {
  color:#FFFFFF;
}

.flash_text a:hover {
  animation-name: keyframes_flash_text;
  animation-duration: 2.5s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

.moving_shadow:hover {
  animation-name: keyframes_moving_shadow;
  animation-duration: 0.75s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.duck_container_outer {
  display:inline-block;
  position: absolute;
  left:25vw;
  top:30vh;
  z-index: -1;
}

.duck_container_inner {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  width:50vw;
  height:50vw;
}

.duck_appear {
  animation-play-state: running;
  animation-name: keyframes_duck_appear;
  animation-duration: 1s;
  animation-direction: normal;
}

.duck_disappear {
  animation-name: keyframes_duck_appear;
  animation-duration: 1s;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

.duck_breathing {
  animation-name: keyframes_duck_breathe;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.appear {
  animation-name: keyframes_appear;
  animation-duration: 0.5s;
  animation-direction: normal;
}

.disappear {
  animation-name: keyframes_appear;
  animation-duration: 0.5s;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

.click_wobble {
  animation-name: keyframes_click_wobble;
  animation-duration: 1s;
  animation-direction: normal;
}

.move_horizontal {
  animation-name: keyframes_move_horizontal;
  animation-duration: 1s;
  animation-direction: normal;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.textpage {
  position: absolute;
  left: 100vw;
  text-align: left;
  width: 100%;
  padding-left:5vw;
  padding-right:5vw;
  box-sizing: border-box;
  margin-top:1vw;
  padding-bottom:2vw;
}

.change_background {
  animation-name: keyframes_change_background;
  animation-duration: 1.5s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.change_background_reverse {
  animation-name: keyframes_change_background;
  animation-duration: 1.5s;
  animation-direction: reverse;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.bobby {
  position:absolute;
  left: 50vw;
  transform-origin: 60% 100%;
}

.bobby img {
  width: 40vw;
}

.bobby_start {
  animation-name: keyframes_bobby_move;
  animation-duration: 4s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.bobby_leave {
  animation-name: keyframes_bobby_move;
  animation-duration: 0.5s;
  animation-direction: reverse;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.bobby_wave {
  animation-name: keyframes_bobby_wave;
  animation-duration: 1.25s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: 4;
}

.cv_section {
  width:14vw;
  height:17vh;
  background: rgba(0,0,0,0.3);
  position: fixed;
  left: 84vw;
  top: 83vh;
  padding:0px;
  padding-right:2vw;
  text-align:center;
}

.img_doc {
  width:3.5vw;
  transform: rotate(25deg);
  margin:1vw;
  margin:1vw;
  margin-top:0vw;
}

.img_doc:hover {
  border:0.5vw solid #FFFF00;
  margin:0.5vw;
  margin-top:-0.5vw;
}

table {
  display: inline-block;
  vertical-align: top;
  font-size: 1vw;
  border-collapse: collapse;
}

th {
  background: rgba(255,255,255,0.35);
}

tr:nth-child(even) {
	background: rgba(255,255,255,0.1);
}
tr:nth-child(odd) {
	background: rgba(0,0,0,0.1);
}

th, td {
  border: 0.1vw solid #DDDDDD;
  padding: 0.3vw;
}

.project_block {
  display:inline-block;
  vertical-align:top;
  background: rgba(0,0,0,0.1);
  padding:1vw;
  margin:0.5vw;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 1vw;
}

.project_block_big {
  width: 40vw;
}

.project_block_small {
  width: 25vw;
}

.screenshot {
	height: 10vw;
}

.screenshot-smaller {
	height: 5vw;
	float: right;
	margin-left: 2em;
}

.icon {
	color: #FFFFFF;
	font-size: 0.7vw;
	padding: 0.2vw 0.4vw 0.2vw 0.4vw;
  text-shadow: none;
}

.icon.cplusplus { background-color: #00AF11; }
.icon.csharp { background-color: #009F88; }
.icon.java { background-color: #F44223; }
.icon.js { background-color: #FFD800; color: #444444;}
.icon.json { background-color: #ED0043; }
.icon.xml { background-color: #9E9EC9; }
.icon.html5 { background-color: #6971C9; }
.icon.python { background-color: #A35DD8; }
.icon.swift { background-color: #FF712B; }
.icon.objc { background-color: #3797DD; }
.icon.unreal { background-color: #4E49C6; }
.icon.sql { background-color: #516BFF; }
.icon.lisp { background-color: #00A4B3; }

.achievement_record {
  display:inline-block;
  vertical-align:top;
  background: rgba(0,0,0,0.1);
  width: 10vw;
  height:1vw;
  padding:1vw;
  margin:0.5vw;
}

@media screen and (orientation:portrait) {
  /* Portrait mode */
  
  @keyframes keyframes_duck_breathe {
    0% {
      width:60vw;
    }
    5% {
      width:60vw;
    }
    100% {
      width:61vw;
    }
  }
  
  .duck_container_inner {
    width:70vw;
    height:70vw;
  }
  
  .duck_container_outer {
    left:15vw;
    top:50vh;
  }

  
  body {
    font-size:2vw;
    text-shadow: 0.2vw 0.2vw rgba(0,0,0,0.5);
  }
  
  h1 {
    font-size:9.6vw;
    text-shadow: 0.5vw 0.5vw rgba(0,0,0,0.5);
  }
  
  h2 {
    font-size:3.5vw;
  }

  h3 {
    font-size:2.5vw;
  }

  h4 {
    font-size:2vw;
  }
  
  table {
    font-size: 2vw;
  }
  
  .logo {
    width:65vw;
    margin-top:1vh;
    margin-bottom:1vh;
  }

  .logo_right_text {
    font-size:5vw;
    text-shadow: 0.4vw 0.4vw rgba(0,0,0,0.5);
  }

  .logo_left {
    font-size:1.25vw;
  }
  
  .main_link {
    font-size:8vw;
    line-height:1.5em;
    text-shadow: 0.4vw 0.4vw rgba(0,0,0,0.5);
  }
  
  .header_date {
    font-size: 1.2vw;
  }

  .project_block {
    font-size: 2vw;
  }
  
  .icon {
    font-size: 1vw;
  }
  
  .bobby {
    left: 30vw;
    top: 45vh;
  }
  
  .bobby img {
    width: 75vw;
  }
  
  .cv_section {
    height:10vh;
    top: 90vh;
  }

  .screenshot {
    height: 11vw;
  }

  .screenshot-smaller {
    height: 9vw;
  }

    
}