* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
/*makes sure there is no default padding*/
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 5em;
    overflow: hidden;
}

nav img{
    height: 4em;
}

@media (max-width: 600px) {
    nav img {
      height: 3em;
    }

}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1{
    font-size: 2em;
    font-family: 'Bungee', cursive;
}

h2{
    font-size: 1.5em;
    font-family: 'Bungee', cursive;
}

h3{
    font-size: 1.5em;
    font-family: 'Bungee', cursive;
}

h4{
    font-size: 1.3em;
    font-family: 'Bungee', cursive;
}

p{
    font-family: 'Space Mono', monospace;
}

a{
    font-family: 'Space Mono', monospace;
    color: black;
}

a:link{
    color:black;
}

a:visited{
    color:black;
}

a:hover{
    color:#a3595e;
    text-decoration: underline #ff7bac;

}

ul{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

/* everything for nav*/
nav a{
    font-size: 2em;
    padding: 0.5em;
    font-family: 'Bungee', cursive;
    text-decoration: none;
    color:black;
}

nav ul{
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    width:70%;
    max-width: 1050px;
}


/*/////////////////////////////////// HOMEEEEEEEE //////*/

/* everything for header*/


header img{
    width: 100%;
    height: 33em;
    object-fit: cover;
    object-position: center;
}


header p{
    position:absolute;
    background-color:rgba(255, 255, 255, .8);
    font-size: 1.2em;
    font-weight: 700;
    padding: 1em;
    width: 100%;
    max-width: 1033px;
    text-align: center;
}

header a:hover{
    color:black;
    text-decoration: underline black;
}

header a{
    color:black;
}

header {
    display: flex;
    justify-content: flex-start;
    flex-flow: column wrap;
    align-items: center;
    width: 100%;
    height: 40em;
}

@media (min-width: 300px) {
    header {
      overflow: hidden;
    }

}

.containerhead{
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    align-items: center;
    transform-style: preserve-3d;
    width: 100%;
    max-width: 1033px;
    height: 35em;
}

.projects{
    position: relative;
    width: 100%;
    height: 30em;
    margin-bottom: 20px;
}

.project {
    position: absolute;
    width: 100%;
    height: 30em;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
}


#header1:checked ~ .projects #project8, #header2:checked ~ .projects #project1, #header3:checked ~ .projects #project2, #header4:checked ~ .projects #project3, #header5:checked ~ .projects #project4, #header8:checked ~ .projects #project5 {
    transform: translatex(-40%) scale(.8);
    opacity: .4;
    z-index: 0;
}
  
#header1:checked ~ .projects #project2, #header2:checked ~ .projects #project3, #header3:checked ~ .projects #project4, #header4:checked ~ .projects #project5, #header5:checked ~ .projects #project8, #header8:checked ~ .projects #project1 {
    transform: translatex(40%) scale(.8);
    opacity: .4;
    z-index: 0;
}
  
#header1:checked ~ .projects #project1, #header2:checked ~ .projects #project2, #header3:checked ~ .projects #project3, #header4:checked ~ .projects #project4, #header5:checked ~ .projects #project5, #header8:checked ~ .projects #project8 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
}


input[type=radio] {
    position: relative;
    top: 103%;
    left: 5.8em;
    width: 1.5em;
    height: 1.5em;
    margin:0.8em;
    opacity: 0.4;
    transform: translateX(-83px);
    cursor: pointer;
}
  
  
input[type=radio]:nth-child(8) {
    margin-right: 0;
}
  
input[type=radio]:checked {
    opacity: 1;
}
  



/* everything for main home*/

h3:nth-of-type(1){
    align-self: left;
}

main section {
    display: flex;
    padding: 1em;
    flex-flow: row wrap;
    max-width: 1200px;
    width: 100%;
    justify-content: space-evenly;
    align-items: flex-start;
    align-self: center;
}

main .aboutme article:nth-of-type(1){ /*h3*/
    width: 64em;
    order:1;
    height: auto;
    align-self: center;
    margin: 1em 0 0.5em 0em;
    /*background-color: white;*/
}

main .aboutme article:nth-of-type(2){
    order:2;
    width:30em;
    height: 27.9em;
    border:1px black solid;
    background-color: white;
    margin: 1em 0 0.5em 0;
}

main .aboutme article:nth-of-type(2) img{
    width: 100%;
    height: 27.77em;
    object-fit: cover;
    object-position: center;
}

main .aboutme article:nth-of-type(3){
    order:3;
    width:30em;
    min-height: 25em;
    height: fit-content;
    border:1px black solid;
    background-color: white;
    padding: 1.5em;
    margin: 1em 0 0.5em 0;
}

main .aboutme article:nth-of-type(3) p{
    margin: 0.6em 0 0.6em 0;
}

article:nth-of-type(2) p{
    font-size: 1em;
}

main section:nth-of-type(2){
    margin: 3em 0 0 0;
}

main .contact article:nth-of-type(1){ /*h3*/
    display: inline;
    width: 64em;
    height: auto;
    margin: 1em 0 0.5em 0em;
    /*background-color: white;*/
}

main .contact article:nth-of-type(2){
    order:2;
    width:30em;
    min-height: 17em;
    border:1px black solid;
    background-color: white;
    padding: 1.5em 1.5em 2em 1.5em;
    margin: 1em 0 1em 0;
}

main .contact article:nth-of-type(2) p{
    margin: 0em 0 1.5em 0;
}

main .contact article:nth-of-type(2) p:nth-of-type(3){
    margin: 0em 0 2.5em 0;
}

main .contact article:nth-of-type(2) a{
    color:black;
}

main .contact article:nth-of-type(2) a:hover{
    color:#ff7bac;
}

main .contact article:nth-of-type(2) #cv{
    background-color:#f58963;
    color:white;
    border-radius: 4px;
    padding: 1em;
    margin: 1em 0 0 0;
    font-family: 'Space Mono', monospace;
}

main .contact article:nth-of-type(3){
    order:2;
    width:30em;
    height: 2em;
    align-items: center;
    border:1px black solid;
    background-color: white;
    padding: 1em 0 0 1em;
    margin: 1em 0 0.5em 0;
    visibility: hidden;
}

main .contact article:nth-of-type(3) p{
    margin:0 0 2em 0;
}


/*/////////////////////////////////// work //////*/
.titelwork{
    display: flex;
    justify-content: center;
    align-self: center;
    width: 100%;
    margin: 1em 0 0 0;
}

.work{
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-flow: row wrap;
    max-width: 1000px;
    min-height: 35em;
    height: fit-content;
    padding: 0;
    margin: 3em 0 0 0;
    align-self: center;
    border:1px black solid;
    flex-shrink: 1;
}


@media (min-width: 500px) {
    .work {
      flex-wrap: nowrap;
    }

}

.img{
    order:1;
    width: 100%;
    max-width: 38.3em;
    height: 35em;
}

.text{
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content:  baseline;
    order:2;
    width: 24em;
    min-height: 35em;
    padding: 2em;
}

.text h4{
    margin: 0 0 1.5em 0;
}

.work img{
    width: 100%;
    height: 35em;
    object-fit: cover;
    object-position: bottom;
}

.buttonwrap{
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 9.5em 0 0 0;
    width: 22em;
    height: 6em;
}

.buttonwrap2{
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 6.45em 0 0 0;
    width: 22em;
    height: 6em;
}

.buttonwrap3{
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 6.4em 0 0 0;
    width: 22em;
    height: 6em;
}

.buttonwrap4{
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 1em 0 0 0;
    width: 22em;
    height: 6em;
}

.buttonwrap5{
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 2em 0 0 0;
    width: 22em;
    height: 6em;
}

.buttonwrap6{
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 9.4em 0 0 0;
    width: 22em;
    height: 6em;
}

.button{
    font-family: 'Bungee', cursive;
    color:white;
    text-decoration: none;
    padding: 2em;
    width: 12em;
    height: 5em;
    background-color: #f58963;
    border: black 1px solid;
}




/*/////////////////////////////////// work pages //////*/


#previous, #next{
    position: absolute;
    top: 7em;
    width: 1.5em;
    height: 1.5em;
    background-color: rgba(255, 255, 255, .4);
    color:black;
    text-align: center;
    font-size: 2em;
    border: none;
}

#previous:hover, #next:hover{
   background-color: rgba(255, 123, 172, 0.2);
}

#previous{
    left: 0em;
}

#next{
    right: 0em;
}

#previoustwo, #nexttwo{
    position: absolute;
    top: 7em;
    width: 1.5em;
    height: 1.5em;
    background-color: rgba(255, 255, 255, .4);
    color:black;
    text-align: center;
    font-size: 2em;
    border: none;
}

#previoustwo:hover, #nexttwo:hover{
   background-color: rgba(255, 123, 172, 0.2);
}

#previoustwo{
    left: 0em;
}

#nexttwo{
    right: 0em;
}

#previousthree, #nextthree{
    position: absolute;
    top: 7em;
    width: 1.5em;
    height: 1.5em;
    background-color: rgba(255, 255, 255, .4);
    color:black;
    text-align: center;
    font-size: 2em;
    border: none;
}

#previousthree:hover, #nextthree:hover{
   background-color: rgba(255, 123, 172, 0.2);
}

#previousthree{
    left: 0em;
}

#nextthree{
    right: 0em;
}

/*/////////////////////////////////// project for fairphone //////*/
.mainpicpff{
    display: flex;
    justify-content: center;
}

.mainpicpff img{
    width: 100%;
    height: 33em;
    object-fit: cover;
    object-position: center;
}

.pff{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.pffsone{
    display: flex;
    order:1;
    padding: 1em;
    margin: 2em 0 0 0;
    flex-flow: row wrap;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
}

.pffsone article:nth-of-type(1){ /*h4*/
    display: inline;
    width: 64em;
    height: auto;
    margin: 1em 0 1em 0;
    /*background-color: white;*/
}

.pffsone article:nth-of-type(2){
    position: relative;
    order:2;
    width:32em;
    height: 32em;
    margin: 0 0 0 0;
}

.picture-portfolio {
    width: 100%;
    height: 32em;
    object-fit: cover;
    object-position: bottom;
    position: relative;
    display: none;
}

.picture-hidden{
    display: none;
}

.picture-visible{
    display: block;
    animation: fadeVisibility 0.5s;
}


.pffsone article:nth-of-type(3){
    order:3;
    width:32em;
    min-height: 32em;
    border:1px black solid;
    background-color: white;
    padding: 1.5em;
    margin: 0 0 0 0;
}

.pffstwo{
    display: flex;
    order:2;
    padding: 1em;
    flex-flow: row wrap;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
}

.pffstwo article:nth-of-type(1){ /*h4*/
    display: inline;
    width: 64em;
    height: auto;
    margin: 1em 0 1em 0;
    /*background-color: white;*/
}

.pffstwo article:nth-of-type(3){
    position: relative;
    order:3;
    width:32em;
    height: 32em;
    margin: 0 0 0 0;
}



@media (max-width: 500px) {
    .pffstwo article:nth-of-type(3) {
      order:2;
    }

}

.picture-portfoliotwo {
    width: 100%;
    height: 32em;
    object-fit: cover;
    object-position: bottom;
    position: relative;
    display: none;
}

.picture-hiddentwo {
    display: none;
}

.picture-visibletwo {
    display: block;
    animation: fadeVisibility 0.5s;
}


.pffstwo article:nth-of-type(2){
    order:2;
    width:32em;
    min-height: 32em;
    border:1px black solid;
    background-color: white;
    padding: 1.5em;
    margin: 0 0 0 0;
}

@media (max-width: 500px) {
    .pffstwo article:nth-of-type(2) {
      order:3;
    }

}





.pffsthree{
    display: flex;
    order:3;
    padding: 1em;
    flex-flow: row wrap;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
}

.pffsthree article:nth-of-type(1){ /*h4*/
    display: inline;
    width: 64em;
    height: auto;
    margin: 1em 0 1em 0;
    /*background-color: white;*/
}

.pffsthree article:nth-of-type(2){
    position: relative;
    order:2;
    width:32em;
    height: 32em;
    margin: 0 0 0 0;
}



@media (max-width: 500px) {
    .pffsthree article:nth-of-type(2) {
      order:2;
    }

}

.picture-portfoliothree {
    width: 100%;
    height: 32em;
    object-fit: cover;
    object-position: bottom;
    position: relative;
    display: none;
}

.picture-hiddenthree {
    display: none;
}

.picture-visiblethree {
    display: block;
    animation: fadeVisibility 0.5s;
}


.pffsthree article:nth-of-type(3){
    order:2;
    width:32em;
    min-height: 32em;
    border:1px black solid;
    background-color: white;
    padding: 1.5em;
    margin: 0 0 0 0;
}

@media (max-width: 500px) {
    .pffsthree article:nth-of-type(3) {
      order:2;
    }

}

/*/////////////////////////////////// footers //////*/
footer{
    display: flex;
    justify-content: flex-start;
    align-items:left;
    background:linear-gradient(70deg, #ebdb16  30%, rgba(0,0,0,0) 30%), linear-gradient(10deg, #fd54d3 60%, #f58963 60%);
    width: 100%;
    height: 6em;
    margin: 5em 0 0 0;
    padding: 1.5em;
}

footer ul{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-flow: column wrap;
}

footer ul:nth-of-type(1){
    margin: 0 0 0 3em;
}

footer ul:nth-of-type(2){
    margin: 0 0 0 5em;
}

footer li{
    color:white;
}