html, body {
    height: 100%;
    scroll-behavior: smooth;
}

body{
    background-color:#dfe1e6;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #222831;
    letter-spacing: .05em;
}

button{
    border-style: none;
    background-color: unset;
}


a{
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    color: #222831; 
    text-decoration: none;
    outline: 0;
   
}

a:visited {
     text-decoration: none;
     outline: none;
     border: none;
     decoration: none; 
}

img{
    width: 100%;
    display: block;
}

.imgicon{
    width: 10%;
}

b {
    font-weight: 700; 
  }

* {
    margin: 0;
    padding: 0;
}
  
  section {
      position: relative;
      width: 100%;
      height: 100%;
}

h1{
    font-size: 1em;
    letter-spacing: .15em;
    font-weight: 600;
    margin: 0px;
}

#portfoliopage{
    background-color: #f4f4f4;
}

.logocontainer{
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
    position: fixed;
    left: 3.5rem;
    top: 2rem;
    z-index: 1;
}

.eyelogo{
    width: 70px;
    height: 70px;
    background: #ececec;
    border-radius: 500px;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.eyelidlogo{
    width: 80px;
    height: 84px;
    position: absolute;
    top: -85%;
    pointer-events: none;
    -webkit-animation-name: blink;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 1.5s;
    -webkit-transition: all .5s ease-in-out;
    rotate: 4deg;
    z-index: 2;
}

#eyelidcolorhp{
    background-color: #c1a57b;
}

.pupillogo{
    position: relative;
    width: 30px;
    height: 30px;
    background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
    border-radius: 100px;
    -webkit-transition: all .5s ease;
    z-index: 1;
}

.aboutbutton{
    height: 18px;
    cursor: pointer;
    position: fixed;
    width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    right: 3rem;
    top: 2rem;
    z-index: 3;
    font-size: 18px;
    font-weight: 300;
}

.aboutbutton:hover .abouthover{
    letter-spacing: .3em;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.abouthover{
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.aboutbutton span:nth-child(1){
    position: relative;
    width: 30px;
    margin: 0;
    border: 0px solid #fff;
    transition: transform .5s ease-in-out 0ms,bottom 300ms ease-in-out 300ms,opacity 0ms ease-in-out 300ms;
    border-radius: 1px;
    z-index: 6;
}

.aboutbutton span:nth-child(3){
    position: relative;
    width: 30px;
    border: 0px solid #fff;
    transition: transform .5s ease-in-out 0ms,top 300ms ease-in-out 300ms,opacity 0ms ease-in-out 300ms;
    border-radius: 1px;
    z-index: 6;
}

.mobilmenu{
    opacity: 1;
    color:#ececec;
}

.abouticoncontainer{
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    opacity: 0;
    position: fixed;
    transform: translate(200px, 0);
    background: #ececec;;
    transition: transform .5s ease-in-out 0ms,opacity 300ms ease-in-out 0ms;
    flex-direction: column;
    pointer-events: none;
    justify-content: center;
    color: #222831;
    cursor: default;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}

.about{
    position: relative;
    line-height: 2rem;
    font-size: 16px;
    padding: 20%;
    margin-top: 20px;
}

.aboutme h1{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 30px;
    margin-bottom: 10px;
    line-height: 2.5rem;
}

.abouticoncontainer :hover{
    cursor: default;
}

.abouticoncontainer :active{
    cursor: default;
}

.mobilmenu .abouticoncontainer{
    opacity: 1;
    transform: translate(0, 0);   
}

.mobilmenu span:first-child{
    bottom: -15px;
    transform: rotate(45deg);
    transition: bottom 300ms ease-in-out 0ms,transform 300ms ease-in-out 300ms;
    border: 1px solid #111;
}

.mobilmenu span:nth-child(3){
    top: -8px;
    transform: rotate(-45deg);
    transition: top 300ms ease-in-out 0ms,transform 300ms ease-in-out 300ms;
    border: 1px solid #111;
}

#hitarea{
  position:fixed; 
  width:100vw;
  height:800px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hitbox{
    width: 10vw;
    height:700px;
    float:left;    
}

#introduction{
    position: absolute;
    z-index: 4;
    margin-right: -42rem;
    font-size: 2.5rem;
    top: 30rem;
    font-family: 'Roboto', sans-serif;
    -webkit-margin-start: 18rem;
}

#introduction p{
    margin: 0;
    line-height: 3.5rem;
}

.introductioncontent{
    width: 350px;
}

.position{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    margin-top: -19px;
    margin-left: 17px;
    z-index: 2;
    position: relative;
    color: #737271;
}

/* eye */
#eyecontainer{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eye{
    position:fixed;
    width:500px;
    height:500px;
    background: #ececec;
    border-radius:500px; 
    pointer-events: none;    
    display: flex;
    justify-content: center;
    align-items: center;
}

.pupil{
    position:relative;
    width:220px;
    height:220px;
    background:linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
    border-radius:220px;
    -webkit-transition: all .5s ease;
    z-index: 1;
}

.eyelid{
    width:670px;
    height: 600px;
    position:absolute;
    top: -85%;  
    pointer-events: none;
    background: #dfe1e6;
    -webkit-animation-name:             blink; 
    -webkit-animation-duration:         4s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
    -webkit-animation-direction:        alternate;
    -webkit-animation-delay: 1.5s; 
    -webkit-transition: all .5s ease-in-out;
    rotate: 4deg;
    z-index: 2;
}

.eyelid+.eyelid{
    left: 50%; 
}

/* Blinking eyes */
@-webkit-keyframes blink{
  0%{
    top:-85%;
  }
 95%{
    top:-85%;
  }
  100%{ 
    top:-1%;
  }
}

/* eye lids */
.hitbox:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(-10deg);
}
#a-1:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(10deg);
}
#a-2:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(9deg);
}
#b-1:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(5deg);
}
#b-2:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(4deg);
}
#c-1:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(0deg);
}
#c-2:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(0deg);
}
#d-1:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(-8deg);
}
#d-2:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(-9deg);
}
#e-1:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(-10deg);
}
#e-2:hover ~ .eye > .eyelid{
    -webkit-transform: rotate(-11deg);
}

/* pupils */
#a-1:hover ~ .eye > .pupil{
    -webkit-transform: rotate(10deg) translate(-70px);
}
#a-2:hover ~ .eye > .pupil{
    -webkit-transform: rotate(10deg) translate(-60px);
}
#b-1:hover ~ .eye > .pupil{
    -webkit-transform: rotate(10deg) translate(-60px);
}
#b-2:hover ~ .eye > .pupil{
    -webkit-transform: rotate(10deg) translate(-60px);
}
#c-1:hover ~ .eye > .pupil{
    background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
    -webkit-transform: rotate(180deg) translate(0px);
    width:250px;
    height:250px;
    border-radius:250px;
}
#c-2:hover ~ .eye > .pupil{
    background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
    -webkit-transform: rotate(180deg) translate(0px);
    width:250px;
    height:250px;
    border-radius:250px;
}
#d-1:hover ~ .eye > .pupil{
    -webkit-transform: rotate(-10deg) translate(50px);
}
#d-2:hover ~ .eye > .pupil{
    -webkit-transform: rotate(-10deg) translate(50px);
}
#e-1:hover ~ .eye > .pupil{
    -webkit-transform: rotate(-10deg) translate(50px);
}
#e-2:hover ~ .eye > .pupil{
    -webkit-transform: rotate(-10deg) translate(60px);
}

header{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin: auto;
    width: 100%;
    background-color: #30475e;
    padding-top: 100px;
    color: #f4f4f4;
}

.p2header{
    background-color:#3b5957;
}
.p3header{
    background-color: #244651;
}
.p4header{
    background-color: #caa35e;
}
.p5header{
    background-color: #d69a5d;
}
.p6header{
    background-color: #1d4385;
}
.p7header{
    background-color: #019d99;
}
.p8header{
    background-color: #211bb0;
}
.p9header{
    background-color: #3a3a3c;
}
.p10header{
    background-color: #08884e;
}
.p11header{
    background-color: #50b748;
}
.p12header{
    background-color: #5c381d;
}
.p13header{
    background-color: #127262;
}
.p14header{
    background-color: #2d307a;
}
.p15header{
    background-color: #c06e2c;
}
.p19header{
    background-color: #665a95;
}
.p20header{
    background-color: #c8102e;
}
.p18header{
    background-color: #002f87;
}
.p02header{
    background-color: #ec111a;
}
.p06header{
    background-color: #0072bc;
}



.headerinside{
    position: relative;
    display: flex;
    padding: 0 5rem;
    top: 50px;
    max-width: 1400px;
    margin: auto;
    top: 0;
    bottom: 0;
}

.headercontent{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.headersummary{
    width: 65%;
}

.headersummary h1{
    font-size: .8em;
    letter-spacing: .4em;
    padding-bottom: 1rem;
}

.headersummary p{
    line-height: 1.5rem;
}

.headertitle{
    position: relative;
    width: 35%;
    margin-right: 2rem;
}

.projecttitle{
    margin-bottom: 2rem;
}

.projecttitle h1{
    font-size: .8em;
    letter-spacing: .4em;
    padding-bottom: 1rem;
}

.projecttitle p{
    line-height: 1.5rem;
}

.role h1{
    font-size: .8em;
    letter-spacing: .4em;
    padding-bottom: 1rem;
}

.role p{
    line-height: 1.5rem;
}

.wrapper{
    padding-left: 5rem;
    padding-right: 5rem;
    margin: auto;
    width: 100%;
    max-width: 1400px;
}

.projectheading{
    padding-bottom: 20px;
}

.oaklink{
    color: #f4f4f4;
    text-decoration: underline;
}

.content{
    display: flex;
    width: 100%;
    margin-bottom: 5rem;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.content2{
    display: flex;
    width: 100%;
    margin-bottom: 5rem;
    justify-content: center;
}

.p02c1{
    height: 600px;
    align-items: center;
}

.p02c1logo{
    z-index: 2;
    margin-left: 4rem;
    margin-right: 4rem;
    max-width: 350px;
    position: absolute;
}

.rotating{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    display: flex;
    width: 350px;
    max-width: 600px;
    min-width: 200px;
}

#rotating {
    -webkit-animation: rotation 50s infinite linear;
}

@-webkit-keyframes rotation {
    from {
            -webkit-transform: rotate(0deg);
    }
    to {
            -webkit-transform: rotate(359deg);
    }
}

.videowidth{
    width: 100%;
}

.videoborder{
    width: 80%;
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.videopadding{
    width: 80%;
}

.video02{
    width: 50%;
}

.img01{
    width: 20%;
}
.video03{
    width: 30%;
}

.width50{
    width: 80%;
    display: flex;
    max-width: 500px;
}


.footer{
     padding: 0rem 5rem;
     display: flex;
     color: #222831; 
     flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nextcontainer{
    max-width: 1400px;
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.nextbutton{
    position: relative;
    display: inline-grid;
    flex-direction: column;
    transition: all .5s (0.785, 0.135, 0.15, 0.86);
    justify-items: center;
    margin: auto;
}

.nexttitle{
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.nextproject{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    text-align: center;
}

.nextprojectrole{
    text-transform: uppercase;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    text-align: center;
    font-size: 15px;
}

.homebutton{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 47px;
}

svg{
    fill: #222831; 
}

.arrow{
    margin-top: 2rem;
  transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  display: table
}

#nextprojectarrow{
    display: inline-block;
    width: 80px;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.nextbutton:hover > #nextprojectarrow {
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transform: translateX(10px);
}

.nextbutton:hover {
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.nextbutton:hover > .nextproject {
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    letter-spacing: .20em;
}

.nextbutton:hover > .arrow {
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transform: translateX(10px);
}

.nextbutton:hover > svg {
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transform: translateX(10px);
}

#myBtn {
    z-index: 1;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 30px;
}

.footerhomebtn, .footerupbtn{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 8rem;
    padding: 15;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 30px;
}

.footerupbtn{
    align-items: end;
}

.footerhomebtn span{
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.footerupbtn button{
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.footerhomebtn :hover{
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    letter-spacing: .10em;
}

.footerupbtn :hover{
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    letter-spacing: .10em;
}

.nextbtnarrow{
    width: 2px;
    height: 55px;
    background:  #222831;;
    position: relative;
    display: flex;
    position: relative;
    margin: auto;
}

#portfoliocontainer{
    display: flex;
    margin-left: 20%;
    margin-right: 20%;
    position: relative;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    font-size: 45px;
    font-weight: 500;
    transition: all .8s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    color: #222831;
}

.work{
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 5.5rem;
}

.portfolio{
    
    position: relative;
    display: block;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 2;
    color: #222831;
    height: 75px;
}

.portfoliotitle ::before{
    position: absolute;
    content: "";
    display: flex;
    height: 105%;
    width: 100%;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    background-color:#c1a57b;
    top: 0;
    left: -10px;
    transition: -webkit-transform all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86),-webkit-transform all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    cursor: pointer;
    z-index: -1;
}

.portfoliotitle ::after{
    position: absolute;
    display: flex;
    height: 105%;
    width: 100%;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    background-color:#c1a57b;
    top: 0;
    left: -10px;
    transition: -webkit-transform all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86),-webkit-transform all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    cursor: pointer;
    z-index: -1;
}

.portfoliotitle :hover::before{
    transform: scalex(1);
    width: 100%;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.portfoliotitle1 :hover::after{
    transform: scale(1);
    width: 100%;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.portfoliotitle :hover{
    letter-spacing: .15em;
    color: #222831;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.portfoliotitle{
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 2;
    position: relative;
}

.portfoliotitle span{
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 2;
    position: relative;
}

#svgscrolldownicon{
    display: inline-block;
    width: 50px;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

#section04{
    display: flex;
    justify-content: center;
    opacity: 100;
}
    
.arrowscroll{
    position: relative;
}

.demo a {
  position: absolute;
  bottom: 9px;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  transition: opacity .3s;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.demo a:hover {
  opacity: .5;
}

#eyecontainer a .arrowscroll {
  -webkit-animation: sdb04 2s infinite;
  animation: sdb04 2s infinite;

}

@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: translate(0, 0);
  }
  20% {
    -webkit-transform: translate(10px, 0px);
  }
  40% {
    -webkit-transform: translate(0, 0);
  }
}

.portfoliowork{
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
}

.imgportfolio{
    margin-right: 20px;
    width: 50%;
}
.imgportfolio2{
    width: 50%;
}

.projectdescription {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 2rem;
    justify-content:space-between;
}

.projectsummary{
    width: 48%;
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

.projectsummary h1 {
    font-size: .8em;
    letter-spacing: .4em;
    padding-bottom: 1rem;
}

.container{
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.projectdescription2{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

.contact{
    position: absolute;
    height: 200px;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    align-content: center;
    align-items: center;
    background-color: #222831;
    width: 100%;
    padding: 0 20%;
    color: #ececec;
}

.copyright{
    font-size: 14px;
}
.email{
    width: 40%;
}

.email h1{
    margin-bottom: 1rem;
    font-weight: 100;
}

.email a{
    color: #ececec;
    font-size: 18px;
}

.email1 :hover{
    letter-spacing: .1em;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media only screen and (max-width: 1150px){
    #portfoliocontainer{
        margin-left: 15%;
        margin-right: 0;
        font-size: 40px;
    }
    #introduction{
        margin-right: -30rem;
    }
    .introductioncontent {
        width: 300px;
    }
    .logocontainer{
        left: 2rem;
    }
    .aboutbutton {
        right: 2rem;
        }
    p{
        font-size: 14px;
    }  
    .contact{
        padding: 15%;
    }  
    .mobilmenu span:first-child {
        bottom: -10px;
        }
    .projectdescription {
        flex-direction: column;
    }
    .projectsummary {
        width: 100%;
        }
}

@media only screen and (max-width: 950px){
    .contact{
        padding-top: 5%;
        padding-bottom: 5%;
        flex-direction: column;
        align-items: start;
    }
    .email{
        width: 100%;
    }
}

@media only screen and (max-width: 850px){
    #introduction {
    display: none;
    }
    .eyelogo{
    width: 60px;
    height: 60px;
    }
    .eyelidlogo {
    width: 68px;
    height: 73px;
    }
    .pupillogo {
    width: 27px;
    height: 27px;
    }
    .logocontainer{
        left: 1.5rem;
        top: 1.5rem;
    }
    #portfoliocontainer {
        font-size: 35px;
    }
    .portfolio{
        height: 70px;
    }
    .portfoliotitle :hover {
        letter-spacing: 0.1em;
    }
    .aboutbutton {
        right: 1.5rem;
        top: 1.5rem;
    }
    .work {
        font-size: 25px;
        }
    .headersummary {
        width: 100%;
        }
    .headertitle {
        width: 100%;
        padding-bottom: 2rem;
        }
    .headercontent {
        flex-direction: column;
        margin-top: 1rem;
        }
    .footerhomebtn, .footerupbtn {
        display: none;
        }
    .nextbutton:hover > .nextproject {
        letter-spacing: inherit;
        }
    .rotating {
        width: 300px;
        }
    .p02c1logo {
        max-width: 300px;
        }
    .p02c1 {
        overflow: hidden;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
        display: flex;
        margin: auto;
        height: 400px;
        }
    .copyright p{
        font-size: 12px;
    }   
    .about {
        padding: 15%;
        font-size: 14px;
        } 


}
@media only screen and (max-width: 600px){
.portfoliotitle :hover {
    letter-spacing: .05em;
    }
    .portfolio{
        height: 65px;
    }
    .logocontainer {
        left: 1rem;
        top: 1rem;
    }
    #portfoliocontainer {
        font-size: 30px;
    }
    .portfolio {
        height: 60px;
    }
    .headerinside {
        padding: 0 4rem;
        }
    .nextcontainer {
        padding: 0rem 1rem;
        }
    .wrapper {
        padding: 0 4rem;
        
        }
    .content {
        margin-bottom: 4rem;
        }
    .rotating {
        width: 250px;
        }
    .p02c1logo {
        max-width: 250px;
        }
    .copyright p{
        font-size: 11px;
    } 
    .about {
        padding: 15%;
        line-height: 1.7rem;
        } 
    .aboutme h1{
        font-size: 14px;
    }
}
@media only screen and (max-width: 550px){
    .pupil {
        width: 180px;
        height: 180px;
    }
    #b-2:hover ~ .eye > .pupil{
        background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
        -webkit-transform: rotate(10deg) translate(-60px);
        width:200px;
        height:200px;
        border-radius:250px;
    }
    #c-1:hover ~ .eye > .pupil{
        background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
        -webkit-transform: rotate(180deg) translate(0px);
        width:200px;
        height:200px;
        border-radius:250px;
    }
    #c-2:hover ~ .eye > .pupil{
        background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
        -webkit-transform: rotate(180deg) translate(0px);
        width:200px;
        height:200px;
        border-radius:250px;
    }
    #d-1:hover ~ .eye > .pupil{
        background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
        -webkit-transform: rotate(-10deg) translate(50px);
        width:200px;
        height:200px;
        border-radius:250px;
    }
    .logocontainer {
        left: .5rem;
        top: .5rem;
    }
    .eye {
        width: 400px;
        height: 400px;
    }
    .eyelid {
        width: 626px;
        height: 476px;
    }
    .portfoliotitle :hover::before {
        width: 105%;
    }
    .wrapper {
        padding: 0 3rem;
        }
    .headercontent {
        margin-top: 0;
        }
    .headerinside {
        padding: 0 3rem;
    }
    .about {
        font-size: 13px;
        line-height: 1.5rem;
        } 
}

@media only screen and (max-width: 450px){
    #portfoliocontainer {
        font-size: 25px;
        margin-left: 12%;
        }
    .portfolio {
        height: 50px;
        } 
    .pupil {
        width: 150px;
        height: 150px;
        }
    #b-2:hover ~ .eye > .pupil{
        background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
        -webkit-transform: rotate(10deg) translate(-60px);
        width:180px;
        height:180px;
        border-radius:250px;
    }
    #c-1:hover ~ .eye > .pupil{
        background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
        -webkit-transform: rotate(180deg) translate(0px);
        width:180px;
        height:180px;
        border-radius:250px;
    }
    #c-2:hover ~ .eye > .pupil{
        background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
        -webkit-transform: rotate(180deg) translate(0px);
        width:180px;
        height:180px;
        border-radius:250px;
    }
    #d-1:hover ~ .eye > .pupil{
        background: linear-gradient(90deg, rgb(1, 0, 17) 0%, rgb(27, 27, 27) 35%, rgb(57, 58, 58) 100%);
        -webkit-transform: rotate(-10deg) translate(50px);
        width:180px;
        height:180px;
        border-radius:250px;
    }
    .logocontainer {
        z-index: 3;
        left: .5rem;
        top: .5rem;
        }
    .eye {
        width: 350px;
        height: 350px;
        }
        .eyelid {
        width: 626px;
        height: 430px;
        }
        .portfoliotitle :hover::before {
        width: 105%;
        }  
}
@media only screen and (max-width: 400px){
    #portfoliocontainer {
        font-size: 22px;
    }
    .work {
        font-size: 20px;
        line-height: 4rem;
        }
    .portfolio {
        height: 40px;
    }
    .wrapper {
        padding: 0 2rem;
        }
    .headerinside {
        padding: 0 2rem;
    }
}