/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.fonts.com
*/

body {
    margin: 0;
    padding: 0;
    font-family: 'Frutiger Neue W01 Md', sans-serif;
}

#main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  flex-direction: column;
  padding: 10vh 0 10vh 0;
}

.box {
    height: 16vh;
    width: 50%;
}

.first {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: white;
    filter: saturate(200%);
}

.first h1 {
    margin: -20px 0 0 0;
    font-size: 6em;
}

.first h2 {
    margin: 0;
}

.other {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    transition: all 0.4s;
    cursor: pointer;
}

.other:hover {
    margin-left: 100px;
    filter: saturate(200%);
}

.other p {
    margin: 20px 20px 0 0;
    font-size: 4em;
    font-weight: bold;
}

#title {
    background: #FFB3BA;
}

#portfolio {
    background: #FFDFBA;
}

#dribbble {
    background: #FFFFBA;
}

#twitter {
    background: #BAFFC9;
}

#github {
    background: #BAE1FF;
}

@media only screen and (max-width: 600px) {
    #main {
        padding: 0 0 10vh 0;
    }
    .box {
        width: 100%;
    }
    .other:hover {
        margin-left: 20px;
        filter: saturate(200%);
    }

    .first h1 {
        font-size: 4em;
    }
}