/* --------- HTML, BODY, P, TEXT --------- */
/* look at main.css */

@media all and (max-width: 800px) {
    html {font-size: 45%;}
}

h1 {font-size: 3.2rem; line-height: 2.2rem; margin: 0;}
h2 {font-size: 2.4rem;}
p {letter-spacing: 0.02rem; font-size: 2.0rem;}
emphasis {font-weight: bold;}
b {font-weight: bold;}
s {text-decoration: line-through; color: #9B9B9B;}
.special-characters {font-family: Helvetica, Arial, sans-serif;}

/* --------- HEADER --------- */
.header {width: 100%; margin: 0;}
    #logo {padding: 3.2rem;}
        #logo img {width: 12.0rem;}
        #logo img:hover {cursor: pointer; opacity: 0.5;}

/* --------- INTRODUCTION --------- */
#introduction {margin: 2.4rem 18% 10%;}
    #introduction h1 {font-size: 3.6rem; text-align: center; font-weight: bold;}
    #introduction p {text-align: center; font-size: 3.6rem; margin: 1.6rem 0 0 0;}
    .introduction__description {margin: 2.4rem 0;}
        .smallcontent {font-size: 2.4rem;}

@media all and (max-width: 800px) and (min-width: 501px;) {
    #introduction {margin: 1.6rem 14% 10%;}
        #introduction h1 {font-size: 3.2rem;}
        #introduction p {font-size: 3.0rem;}
}

@media all and (max-width: 500px) {
    #introduction {margin: 1.6rem 14% 10%;}
    #introduction h1 {font-size: 3.2rem;}
    #introduction p {font-size: 2.6rem;}
}

/* --------- WORK --------- */
.work-contact-container {background: #000000 url("../img/images/bg-moon.jpg") no-repeat center bottom; color: #FFFFFF; background-size: contain;}

#work {display: flex; flex-direction: row; padding: 0 1.6rem; margin: 0 12% 0;}
    .work__grid {flex: 1; margin: 5.6rem 3.2rem;}
        .work__snippet {padding: 0 0 10.0rem 0; display: flex; flex-direction: column; text-decoration: none; color: #FFF;}
            .work__snippet:hover {opacity: 0.7; padding: -0.2rem 0; transition: all 0.1s linear; cursor: pointer;}
            .work__snippet__img {text-align: center;}
            .work__snippet__img img {/*max-height: 100%; max-width: 100%;*/ width: 100%; border-radius: 0.4rem;}
            .work__snippet__tag {margin: 2.2rem 0 0.8rem 0; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.5rem;}
            .work__snippet h3 {font-weight: 100; letter-spacing: 0.1rem; font-size: 3.6rem; margin: 1.6rem 0;}
            .work__snippet p {font-size: 2.0rem; margin: 0; line-height: 3.2rem;}

@media all and (max-width: 1000px) and (min-width: 801px) {
    #work {margin: 0 5% 0; padding: 5.6rem;}
}

@media all and (max-width: 800px) {
    #work {margin: 0 5% 0; padding: 5.6rem 0 0;}
        .work__grid {margin: 2.4rem;}
    .work__snippet p {font-size: 2.6rem;}
}

@media all and (max-width: 550px) {
    #work {flex-direction: column; margin: 0 5% 0; padding: 5.6rem 0 0;}
}

/* --------- BUTTONS, LINKS --------- */
#contact {display: flex; flex-direction: row; margin: 0 12% 0; padding: 0 0 10.0rem;}
    #form-messages {font-size: 2.4rem;}
    #contact p {font-size: 2.0rem;}
    .contact__description {flex: 1; background-color: rgba(255,255,255,0.15); padding: 1.6rem 2.4rem; margin: 0 2.4rem;}
    .contact__form {flex: 1; margin: 0 0 0 2.4rem;}

@media all and (max-width: 800px) {
   #contact {flex-direction: column;}
        .contact__description {margin: 0;}
        .contact__form {margin: 1.6rem 0 0 0; padding: 0;}
}

/* --------- MODAL --------- */
#modal__container {width: 100%; height: 100%; position: fixed; top: 0; margin: auto; text-align: left; display: none; justify-content: center; background-color: rgba(1,9,79,0.7); overflow: auto;}
    .modal {background-color: #FFFFFF; width: 90.0rem; margin: 4.8rem auto; display: flex; flex-direction: row;}
        .modal__content {flex: 1;}
            .modal__content:first-child {margin-right: 1.6rem; background: url("../img/images/profile.jpg") no-repeat; background-size: cover;}
            .modal__content:nth-child(2) {margin: 0 3.2rem 0 1.6rem; padding: 1.2rem;}
        .modal p {font-size: 2.0rem;}
        .modal img {width: 10.0rem;}
    #modal__exit {text-align: right; font-size: 2.0rem;}
        #modal__exit:hover {cursor: pointer; opacity: 0.5;}
        #modal__exit img {width: 1.6rem;}

@media all and (max-width: 900px) {
    .modal {flex-direction: column; width: 80%;}
        .modal__content:first-child: {display: none;}
}

/* --------- BUTTONS, LINKS, INPUTS --------- */
a.vocab {letter-spacing: 0.1rem; border-bottom: 0.1rem solid #333333;}
    a.vocab:hover {color: #BE00E3; cursor: pointer;}
a.linkout {text-decoration: none; color: #BE00E3;}
    a.linkout:hover {color: #7D0096;}

input[type="text"], textarea {font-family: Avenir, "Helvetica Neue", sans-serif; font-size: 2.0rem; color: #000000; border: none; padding: 1.6rem; margin: 1.6rem 0; width: 100%;}
    textarea {height: 9.6rem;}

input[type="submit"] {border: none; line-height: 0; font-family: Avenir, "Helvetica Neue", sans-serif; font-size: 2.0rem; padding: 2.4rem; color: #FFF; background: #BD10E0; border-radius: 0.4rem; width: 100%;}