/* ____________________________ CSS RESET + BROWSER DEFAULTS ____________________________ */

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;


    font-family: Tahoma;
    font-weight: 900;
    color: white;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    visibility: hidden;
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 25px;
}

body {
    line-height: 1; /* part of css reset */

    background-color: rgb(0, 0, 0);
    background-image: url("../images/bg_cloud_hr.png");

    background-size: 1920px 1px;
    background-repeat: repeat;
}


/* ____________________________ OTHER ____________________________ */

nav {
    display: flex;
    justify-content: space-evenly;
    background-color: rgba(0, 6, 10);
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

footer {
    display: flex;
    justify-content: space-between;

    height: 150px;
    background-color: black;
}

footer p {
    margin: 15px;
    font-weight: 100;
}


/* ____________________________ GENERAL CLASSES ____________________________ */

.button_wrapper {
    background-color: rgb(83, 64, 0);
    text-align: center;
    align-content: center;
    border-radius: 25px;
}

.scroll {
    overflow-x: hidden;
    border-radius: 25px;
}


/* ____________________________ TAGS ____________________________ */

h1 {
    font-size: 75px;
    color: rgb(255, 200, 0);
    margin-bottom: 25px;
}

h2 {
    font-size: 50px;
    color: rgb(255, 200, 0);
}

h3 {
    font-size: 25px;
    color: white;
}

p {
    font-size: 15px;
    color: white;
    align-self: last baseline;
    line-height: 125%;
}

a,
a:visited {
    color: white;
    font-weight: 100;
}

a:hover {
    color: rgb(255, 200, 0);
}

img {
    border-radius: 25px;
    width: 100%;
}

label {
    font-weight: 100;
    padding: 20px;
}

input {
    background-color: rgb(0, 0, 0);
    font-size: 15px;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    margin-bottom: 15px;
    padding-left: 25px;
}

textarea {
    resize: none;
    background-color: rgb(0, 0, 0);
    font-size: 15px;
    width: 100%;
    height: 250px;
    border-radius: 25px;
    margin-bottom: 15px;
    padding-left: 25px;
    padding-top: 25px;
}


/* ____________________________ SECTION 1 - ABOUT ME ____________________________ */

#about_me {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);

    margin-left: 1%;
    margin-right: 1%;
    margin-top: 35px;

    background-image: url("../images/bg_aboutme_hr.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center 10px;

    height: 712px;
}

#page1_title {
    grid-area: 11 / 3 / 12 / 8;
    margin-left: 10%;
}

#title_outline_main {
    color: rgba(0, 0, 0, 0);
    font-size: 125px;
    -webkit-text-stroke: 0.25px;
    -webkit-text-stroke-color: rgba(255, 200, 0, 0.5);
    position: absolute;
    bottom: 165px;
    pointer-events: none;
}

#button_contact {
    grid-area: 12 / 12 / 13 / 13;
    align-self: last baseline;
    width: 125px;
    height: 50px;
}


/* ____________________________ SECTION 2 - MY WORK ____________________________ */

#my_work {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);

    background-image: url("../images/work/work_1_hr.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    margin-right: 10px;
    margin-left: 10px;
    padding-top: 17.5px;
    padding-bottom: 17.5px;

    border-radius: 25px;

    height: 712px;
}

#page2_title {
    grid-area: 2 / 4 / 3 / 9;
}

#personal_scroll {
    grid-area: 1 / 1 / 16 / 2;
    align-self: center;
    height: 650px;
    width: 250px;
    margin-left: 10px;
}

/* waarom werkt de transition niet? */
#personal_scroll img {
    transition: 0.5s;
}

#personal_scroll img:hover {
    filter: brightness(125%);
}

.card_title {
    z-index: 1;
    text-align: center;
    position: relative;
    bottom: 30px;
    height: 0;
}


/* ____________________________ SECTION 3 - QUOTES ____________________________ */

#quotes {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    height: 712px;
    padding-top: 17.5px;
    padding-bottom: 17.5px;
}

#quotes_scroll {
    grid-column: 2 / 3;
    align-self: center;
    height: 650px;
}

.card {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    transition: 0.5s;
}

.card:hover {
    filter: brightness(115%);
}

.card_quote {
    grid-area: 1 / 1 / 11 / 11;
}

.left_side {
    z-index: 1;
    grid-area: 4 / 1 / 7 / 6;
    margin-left: 50px;
    height: 0;

    pointer-events: none;
}

.right_side {
    z-index: 1;
    grid-area: 3 / 8 / 6 / 11;
    margin: 15px;
    height: 0;

    pointer-events: none;
}

.image_select {
    position: relative;
}

.image_select img {
    width: 200px;
    height: 100px;
    position: absolute;
    margin-top: 50px;
    filter: drop-shadow(0 -10px 5px rgba(0, 0, 0, 0.1));
}

.image2 {
    top: 50px;
}

.image3 {
    top: 100px;
}


/* ____________________________ SECTION 4 - CONTACT ____________________________ */

#contact {
    display: grid;
    grid-template-columns: 40% 50% 10%;
    grid-template-rows: repeat(5, 20%);

    height: 712px;
    padding-top: 17.5px;
    padding-bottom: 17.5px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 50px;
}

#contact_image {
    grid-column: 1 / 2;
}

form {
    grid-column: 2 / 3;
    margin: 25px;
}

#button_submit {
    grid-column: 2 / 3;
    grid-row: 6 / 7;
    height: 50px;
    width: 100%;
    font-weight: 100;
    text-align: center;
    justify-self: center;
    margin-left: 12.5px;
}

#button_submit:hover {
    color: rgb(255, 200, 0);
}

#contact_title {
    margin-bottom: 50px;
    margin-top: 15px;
}


/* ____________________________ PROJECT PAGE ____________________________ */

#project_page h1 {
    margin-top: 150px;
    margin-left: 100px;
}

#title_outline_project {
    color: rgba(0, 0, 0, 0);
    font-size: 125px;
    -webkit-text-stroke: 0.25px;
    -webkit-text-stroke-color: rgba(255, 200, 0, 0.5);
    position: absolute;
    top: -45px;
    pointer-events: none;
}

#project_page p {
    margin-left: 100px;
    margin-bottom: 50px;
}

#project_page img {
    display: block;
    margin: auto;
    width: 90%;
    height: auto;
    margin-bottom: 50px;
}