::selection {
    background: forestgreen; /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: forestgreen; /* Gecko Browsers */
}

body {
    margin: 0;
    line-height: 1.3em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
        'Lucida Sans', Arial, sans-serif;
}
h1,
h2 {
    margin-top: 0;
    line-height: normal;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 5px;
}

a {
    color: lightskyblue;
    text-decoration: underline;
    text-underline-offset: 1px;
    text-decoration-thickness: 2px;
    cursor: pointer;
}

main {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
}

#intro {
    background-color: snow;
    color: #202020;
    flex-direction: column;
}

#contact {
    display: flex;
}

#contact p {
    padding: 0px 10px;
    margin-top: 0;
}

.portfolio {
    background-color: #202020;
    color: snow;
}

.portfolio > div {
    height: 100vh;
    width: 100%;
}

.image {
    display: flex;
    align-items: center;
}

img {
    width: 100%;
    border-width: 4px 5px 4px 6px;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

.text {
    display: flex;
    align-items: center;
}

.wrapper-left {
    padding: 100px 50px 100px 100px;
}

.wrapper-right {
    padding: 100px 100px 100px 50px;
}

.scroll-down{
    position: relative;
    top: 35%;
    color: forestgreen;
    cursor: pointer;
}

.view-portfolio{
    -webkit-animation: fade_move_down 4s ease-in-out infinite;
    -moz-animation: fade_move_down 4s ease-in-out infinite;
    animation: fade_move_down 4s ease-in-out infinite;
}

.arrow {
    margin: 0 auto;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid forestgreen;
    border-right: 2px solid forestgreen;
    -webkit-transform: translate(-50%, 0%) rotate(
45deg
);
    -moz-transform: translate(-50%, 0%) rotate(45deg);
    transform: translate(-50%, 0%) rotate(
45deg
);
    -webkit-animation: fade_move_down_rotate 4s ease-in-out infinite;
    -moz-animation: fade_move_down_rotate 4s ease-in-out infinite;
    animation: fade_move_down_rotate 4s ease-in-out infinite;
}

/* animated scroll arrow animation */
@-webkit-keyframes fade_move_down_rotate {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down_rotate  {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down_rotate  {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}

/* animated view portfolio text */
@-webkit-keyframes fade_move_down {
    0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -webkit-transform:translate(0,10px); opacity: 0; }
  }
  @-moz-keyframes fade_move_down {
    0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -moz-transform:translate(0,10px); opacity: 0; }
  }
  @keyframes fade_move_down {
    0%   { transform:translate(0,-10px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { transform:translate(0,10px); opacity: 0; }
  }

/***************************************************************/
@media only screen and (max-width: 999px) {
    section.portfolio {
        flex-direction: column;
    }

    .portfolio > div {
        height: initial;
    }

    .wrapper-left {
        padding: 25px 50px 25px 50px;
    }

    .wrapper-right {
        padding: 25px 50px 25px 50px;
    }
}

/***************************************************************/
@media only screen and (max-width: 699px) {
    .wrapper-left {
        padding: 12.5px 25px 12.5px 25px;
    }

    .wrapper-right {
        padding: 12.5px 25px 12.5px 25px;
    }

    h1 {
        font-size: 2.3em;
    }

    h2 {
        font-size: 1.2em;
    }

    p {
        font-size: 0.9em;
    }

    .hide {
        display: none;
    }
}