*{
    transition: 500ms;
}
    @font-face{
        font-family: CenturyGothic;
        src: url(../fonts/centurygothic.ttf);
    }
    body{
        text-align:center;
        font-family: CenturyGothic;
        padding:0;
        margin:0;
        top: 0;
        position: absolute;
        text-justify: inter-cluster;
        overflow-x: hidden;
    }
    #home{
        background-image:url(../images/background.jpg);
        -webkit-background-size: cover;
        background-size:cover;
        background-repeat:no-repeat;
        color:white;
        background-position:center;
        BACKGROUND-ATTACHMENT: scroll;
        top: 0;
    }
    .homeback{
        background-image:url(../images/background.jpg);
        -webkit-background-size: cover;
        background-size:cover;
        background-repeat:no-repeat;
        color:white;
        background-position:center;
        BACKGROUND-ATTACHMENT: scroll;
    }
    @media (min-aspect-ratio: 1/1) {
        #logo{
            height: 64px;
        }
        h1{font-size: 48px; margin:0 ;}
        h2{font-size: 24px; margin:0; font-weight:normal;}
        h3{font-size: 20px; font-weight:normal;}
        .header{
            display: flex;
            flex-direction: row;
        }
        .menubutton{
            display: none;
        }
        .header{
            top:0;
        }
        .grid{
		grid-template-columns: auto auto;
        }
        .teamholder{
            grid-template-columns: 30% 30% 30%;
        }
        .OrderSelector{
            flex-direction: row;
            font-size: 14px;
        }
    }
   @media (max-aspect-ratio: 1/1) {
       #logo{
           height: 64px;
       }
        h1{font-size: 48px; margin:0 ;}
        h2{font-size: 32px; margin:0; font-weight:normal;}
        h3{font-size: 22px; font-weight:normal;}
        .header{
            flex-direction: column;
            display: none;
        }
        .header h3{
            font-size: 60px;
            margin: 12px;
        }
        .menubutton{
            display: block;
        }
        .header{
            top:100px;
        }
        .grid{
		grid-template-columns: auto auto;
        }
        .teamholder{
            grid-template-columns: 45% 45%;
        }
        .card{
            grid-column: 1 / span 2;
        }
       .OrderSelector{
            flex-direction: column;
            font-size: 32px;
        }
    }
    .OrderSelector{
        padding: 60px 10vw 60px 10vw;
        cursor: pointer;
        border-top: 2px solid black;
        z-index: +5;
    }
    .OrderSelector div{
        padding: 12px;
    }
    .menubutton{
        position: fixed;
        top:0;
        width: 100%;
        background-color: rgba(0,0,0,.5);
        border-bottom: .1vh solid rgba(255,255,255,.5);
        backdrop-filter: blur(.5vh);
        -webkit-backdrop-filter: blur(.5vh);
        z-index: +5;
        }
    .menubutton img{
        width:100px;
        height: 100px;
        z-index: +5;
    }
    .back{
        width: 100%;
        background-color: rgba(0,0,0,.3);
        margin: 40vh 0 40vh 0;
        backdrop-filter: blur(1vh);
        -webkit-backdrop-filter: blur(1vh);
    }
    .header{
        position: fixed;
        left: 0;
        width: 100%;
        align-items: stretch;
        background-color: rgba(255,255,255,.7);
        border-bottom: .1vh solid rgba(0,0,0,.5);
        backdrop-filter: blur(.5vh);
        -webkit-backdrop-filter: blur(.5vh);
        z-index: +1;
    }
    .tab{
        margin: 0 ;
        flex: 1;
        cursor: pointer;
    }
    .tab:hover{
        background-color: rgba(0,0,0,.1);
    }
    .page{
        min-height: 100vh;
    }
	.card{
		margin:0;
		padding:2vh 5vw 2vh 5vw;
		text-justify: inter-cluster;
	}
	.grid{
		display: grid;
		gap: 0;
		perspective: 500vw;
		background-color: rgba(255,255,255,.7);
        backdrop-filter: blur(.5vh);
        -webkit-backdrop-filter: blur(1vh);
	}
	.focus{
		transform: translate(0,0);
		opacity: 1;
	}
	.notfocus{
		transform: translate(0,10%);
		opacity: 0;
	}
	.card{
		transition: 1500ms;
		transform-origin: 50% 50%;
	}
	.icon:hover{
	    transform: scale(1.2,1.2);
	}
	.click{
	    padding: 5px;
	    border: 2px solid black;
	    border-radius: 10px;
	    display: inline-block;
	    color: black;
	}
	.click:hover{
	    background-color: black;
	    color: white;
	}
	#services{
	    color:black;
	}
	#logo{
	    margin: 2vh;
        max-width: 80vw;
	}
    form{
        border: .1vh solid black;
        border-radius: 2vh;
        margin: 0 5vh 5vh 5vh;
    }
    input{
        border: none;
        border-bottom: .1vh solid black;
        text-align: center;
        background-color: transparent;
    }
    input:focus{
        outline: none;
    }
    hr{
		border: 1px solid black;
	}
	link:visited{
	    color: inherit;
	}