body{
    margin:0;
    background-color:#F5F5F5;
    padding:1rem;
    transition: background-color 1s ease;
}
.say-hi{
    background-color: yellow;
    width:fit-content;
}
.apextide-link:hover{
    background-color: yellow;
}
.header-container .visible{
    align-content:flex-start;
    justify-content: space-between;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    z-index: 2;
}
.hidden {
    transform: translateY(-100px);
  }

.visible {
    transform: translateY(0);
    z-index:100;
}

.ux-decor{
    transition-property: background-color;
    transition-duration: 1s;
}
.ux-decor:hover{
    background-color:yellow;
}
.logo-text{
    position:fixed;
}
.website-detail{
    padding-top:3rem;
    padding-bottom:3rem;
}
.nav{
    float:right;
    position:fixed;
    top:1rem;
    left:85%;
}

ul{
    margin:0;
}
.nav li{
    font-family:futura-bold,sans-serif;
    font-size:1.2rem;
}
a{
    text-decoration: none;
    color:black;
}

.logo-text{
    margin:0rem;
}

.intro{
    padding:15rem 10rem 0 10rem;
    margin:auto;
}
.nav-effect{
    margin:0rem;
    padding-bottom:0.5rem;
}
.text-overlay{
    height:200px;
    opacity:1;
}
.panel{
    min-height: 100vh;
    display:flex;
    float:left;
    justify-content: space-around;
    align-items:center;
}
.panel-header{
    position: absolute;
    text-align: center;
    margin:0;
    z-index:1;
}
.panel-sub{
    margin:0rem;
}
.panel-content{
    margin-top:0.5rem;
}
.obiio-img{
    width:80%;
    z-index:-1;
}
.frogplum-img{
    width:60%;
    z-index: -1;
}
.color-red {
    background-color:#FF4039;
  }
.color-pink {
    background-color: #F57A76;
}
.mipathia-header{
    color:#145DD1;
    z-index:-1;
}
.color-purple {
    background-color: #754FE5;
}
.color-black{
    background-color:black; 
}
.color-babyblue{
    background-color: #5A8DDE;
}
.color-lightblue{
    background-color:#A1C2D5;
}
.color-darkblue{
    background-color: #292E46;
}
.color-lightpurple{
    background-color:#b19af5;
}
.mipathia-img{
    width:60%;
}
.pannel-footer{
    padding:40% 5rem 5rem 5rem;
    max-height:100vh;
}
h1{
    font-family:futura-pt,sans-serif;
    font-size:7.5em;
    margin:0rem;
    word-wrap: break-word;
}
h2{
    font-family:futura,sans-serif;
    font-size:1.2rem;
}
h3{
    font-family:Sacramento,sans-serif;
    font-size:2rem;
    margin:0rem;
}
p{
    font-family:futura-pt,sans-serif;
    font-size:1.2rem;
}
.obiio-background{
    background-color: #F57A76;
    min-height: 120vh;
    display:flex;
    justify-content: space-around;
    align-items:center;
}
.project-panel{
    justify-content: flex-start;
}
.project-header{
    padding-left:10rem;
    padding-top:6.5rem;
}
.project-detail{
    width:100%;
    float:left;
}
.project-item{
    width:40%;
    float:left;
}
.project-item:first-of-type{
    padding:1rem 1.5rem 1rem 0;
}
.project-item:last-of-type{
    padding:1rem 0 1rem 1.5rem;
}
.project-img{
    float:left;
    width:100%;
}
.obiio-banner{
    width:100%;
}
.apex-banner{
    width:60%;
}
.apex-mobile{
    width:100%;
    display:flex;
    float:left;
    margin-top:3rem;
}
.apex-mbanner{
    width:75%;
}
.obiio-preview{
    width:70%;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.apextide-img{
        width:60%;
        z-index: -1;
        margin-top:15rem;
}

/* mobile design */
@media(max-width:767px){
    .intro{
        padding:85% 1rem 1rem 1rem;
    }
    .obiio-img{
        width:120%;
    }
    .mipathia-img{
        width:120%;
    }
    .frogplum-img
    {width:120%;
    }
    .panel-content{
        margin:.5em .5rem;
    }
    .nav{
        left:70%;
    }
    .pannel-footer{
        padding:50% 0rem 0rem 1.2rem;
    }
    .project-header{
        padding:7rem 1.5rem 0rem 1.5rem;
    }
    .project-item{
        width:100%;
    }
    .project-item:first-of-type{
        padding:0rem;
    }
    .project-item:last-child{
        padding:0rem;
    }
    .panel-sub{
        margin:1rem;
    }
    .apextide-img{
        margin-top:1rem;
    }
    ul{
        padding:0rem;
    }
    h1{
        font-size:2.5rem;
    }
    h3{
        font-size:1.2rem;
    }
}