:root{
    --red:#ff3333;
    --blue:#33adff;
    --yellow:#ffff1a;
    --green:#53c653;
    --purple:#a64dff;

}
/* nav */
nav{display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /* height: 60px; */
    align-items:flex-start;
    width:100%;
    background-color: black;
    position: fixed;
    z-index:9999;
    backdrop-filter: blur(4px);
}
@media(min-width:1200px){

    nav{display: flex;
        flex-wrap:wrap;
        flex-direction: row;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        width:100%;
        background-color: black;
        position: fixed;
        z-index:9999;
        backdrop-filter: blur(4px);
    }
}





nav li{list-style: none;}
nav ul{display: flex;
       flex-direction:column;                 }
@media(min-width:1200px){
    nav ul{display: flex;
        flex-direction:row;                 }
    
}
nav a {
    color: #eee;
    text-decoration: none;
    margin: 0 2px;
    display:block;
    padding: 10px 15px;
    border-radius: 5px;

    transition: .5s;
}

@media(min-width:1200px){
    nav .menu-left {
        margin-right: auto;
    }


}

.menu-left a:hover{
    background-color:var(--yellow);
    color:black;
}
.menu-right a:hover{
    background-color: var(--yellow);
    color:black;
}


header{width: 100%;
       height: calc(100vh + 10vw);
       background-image: url(/10221.jpg);
       background-size:cover;
       background-position: top;
       background-attachment: fixed;
       clip-path: polygon(0 0,100% 0,100% calc(100% - 10vw), 0 100%);
       margin-bottom: -10vw;
    }
    #about {
        width: 100%;
        background-color: var(--yellow);
        /* background-image: url('https://picsum.photos/id/10/1600/1000'); */
    
        padding-top: calc(100px + 10vw);
        padding-bottom: 100px;
    
    
    }
    #about .row {
        align-items: center
    }
    .about-content {
        background-color: rgba(255,255,255,.5);
        padding: 30px;
        width: 60%;
        top:60px;
        position: relative;
        right:-60px;
        z-index: 2;
        border-radius:5px;
        line-height: 1.75rem;
        backdrop-filter: blur(8px);
    
        /* filter: blur(10px); */
    }
    @media(min-width:1200px){
        .about-content {
            background-color: rgba(255,255,255,.5);
            padding: 30px;
            width: 60%;
            position: relative;
            right:-60px;
            z-index: 2;
            border-radius:5px;
            line-height: 1.75rem;
            backdrop-filter: blur(8px);
        
            /* filter: blur(10px); */
        }


    
    }
        

    #about h2 {
        margin-bottom: 25px;
        font-size: 2rem;
    }
    .about-gallery {
        
        
        z-index: 1;
        margin:auto;
        
    }
    @media(min-width:1200px){
        .about-gallery {
        position: relative;
        left:-350px;
        z-index: 1;
        margin:auto;
        }
    }
    
    .about-gallery img {
         clip-path:circle();
          width:100%;
    }
    @media(min-width:1200px){
        .about-gallery img {
        clip-path:circle(); 
         width:150%; 
        }

    }
    
    /* team */
    #team {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .team-avatar {
        width: 50%;
        border: 6px solid var(--light);
        border-radius: 50%;
        overflow: hidden;
        margin: auto;
    }
    .team-avatar img{width:100%;}
    .team-content {
        text-align: center;
    }
    
    /* CONTACT */

    .contact-item{
        width: 80%;
        margin: auto;
    }
    .form-item {
        margin-bottom: 20px;
    }
    .form-label {
        margin-bottom: 10px;
        display: inline-block;
    }
    .form-control {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #3f3f3f;
        outline:0;
        transition: .5s;
    }
    .form-control:focus {
        border: 1px solid rgb(255, 34, 34);
        background-color: rgb(252, 218, 252);
    }
    .btn{
        display:inline-block;
        border: 0;
        padding:10px 20px;
        border-radius: 5px;
        font-size:16px;
        cursor: pointer;
        text-decoration:none;
        font-weight: bold;
        transition: .5s;
    }
    .btn-yellow{
        background-color:var(--yellow);
        color: rgb(15, 4, 56);
    }
    /* 虛擬類別 偽類別 */
    .btn-yellow:hover{
        background-color:rgb(255, 196, 0);
    }
    .contact-title{
       width:100%;
       margin-bottom: 30px;
       text-align: center;
       font-size: 26px;
    }
    footer{background-color: black;
            color: white;
            text-align:end;
            padding:3px;
    }
    footer a{text-decoration: none;
            color: white;
    }