@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&family=Atkinson+Hyperlegible&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,300&display=swap');

/*general*/
html {
    overflow: -moz-scrollbars-none;
    scrollbar-width:none;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
        display: none;
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

body,
p,
div {
    font-family: "arimo";
    font-weight: 400;
    font-size: 13px;
    z-index: 0;
}

body {
    padding: 1rem;
}

img {
    width:760px;
}

/*container*/
.page-container {
    width:760px;
    margin:auto;
}

.column-left {
    width:80px;
    float: left;
    position: fixed;
}

.column-right {
    width:600px;
    float:right;
    padding:0.5rem;
    padding-top:0rem;
}

.column_index {
    padding-top:0.1rem;
}

/*text*/
h2 {
    font-size: 16px;
    font-weight: 400;
    margin-top: 0;
    
}
.titel:hover {
    font-weight:500;
    transform:scale(1.05)
}

p {
    text-align: justify;
    padding-top:0.25rem;
    padding-bottom: 0.5rem;
    font-size: 12px;
}

/*nav*/
nav ul {
    margin-top: 4rem;
}

nav li {
    margin-bottom: 0.5rem;
    list-style: none;
}

nav li:hover {
    transform: scale(1.01);
    font-weight: 500;
}

.subnav {
    margin:0;
    padding-bottom:0.5rem;
    padding-left:0.5rem;
    font-size:13px;
    display:none;
}

/*main*/
main {
    margin-bottom:1rem;
}

main div {
    margin-bottom:1rem;
}

main .div_projects:hover  {
    transform: scale(1.01);
}

main h2 {
    text-decoration: none;
    font-size:18px;
    margin-top:0.25rem;
    font-weight: 500;
}

/*img*/
.img-project {
    width:100%;
    object-fit:cover;
    padding-top: 1rem;
}
.img_index {
    width:100%;
    height:350px;
    object-fit:none;
    object-position: 28% 56%;
 }

/*project_page*/
.project {
    padding-top:4.8rem;
}

.h2_project {
    font-size:px;
    margin-bottom: 0.5rem;
    margin-top: 0rem;
    font-weight: 500;    
}

.p_project {
    font-size: 13px;
}

.ul_project {
    padding-bottom: 1rem;
}

.l_project {
    float:left;
    margin-bottom:1rem;   
}

.r_project {
    float:right;
    margin-bottom:1rem;
}

.l_project:hover, .r_project:hover {
    transform: scale(1.01);
    font-weight: 500;
}

/*about_page*/
.p_about {
    font-size: 13px;
    padding-top: 0;
    text-align: start;
    margin-bottom: 2rem;
}

.h2_about {
    font-weight: 500;
    font-size: 14px;
}

.col1 {
    float:left;
    width:47%;
}

.col2 {
    float:right;
    width:47%
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.ul_about {
    margin-bottom:2rem;
    margin-top:1rem;
}

.il_about {
margin-bottom:1rem;
}

.a_about:hover {
    transform: scale(1.02);
    font-weight: 500;
}


/*mediascreen*/
@media screen and (max-width:800px) {
    .page-container {
        width:100%;
        margin:auto;
    }

    .column-left {
        width:93%;
        padding: 0.5rem;
        background-color: white;
        top:0;
        z-index:1;
    }

    .column-right {
        width:100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    nav h2 {
        display:inline; 
        float:left;
    }

    nav ul{
        float:right;
        margin:0;
    }

    nav li {
        display:inline;
        float:left;
        padding-left:2rem;
    }
    
    .img-project {
        width: 100%;
        object-fit:cover;
    }

    main div {
        margin-top:2rem;
    }

    .subnav {
    display:none;
    }
}