@charset "utf-8";

@font-face {
    font-family: trajet;
    src:url("Fonts/TrajanPro-Regular.woff");
    font-weight:bold;
}
.container {
    width:100%;
    border:0;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap:1vw+1vh;
}

.button {
    --sz:calc(4vw + 4vh);
    background-image:url("images/008AsianGod.jpg");
    background-size:cover;
    border-radius:0 5vw 0 5vw;
    font-size:calc(0.5 * var(--sz));
    height:calc(1.5 * var(--sz));
    padding:calc(.2 * var(--sz));
    line-height: calc(2 * var(--sz));
    max-height:16vh;
}
.one {
    grid-column: 1 / 2;
    grid-row: 2;
}
.two {
    grid-column: 1 / 2;
    grid-row: 3;
}
.three {
    grid-column: 1 / 2;
    grid-row: 4;
}
.four {
    grid-column: 1/2;
    grid-row: 5;}
.header {
    font-family:trajet;
    font-size: calc(4vw + 4vh);
    grid-column: 1 / 5;
    grid-row: 1 ;
    color: goldenrod;

    text-align: center;
}
.logo {
    grid-column: 2 /5 ;
    grid-row: 2 / 6;
    background-image: url("images/logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    overflow-x: hidden;
    overflow-y: scroll;
    max-height:100%;
    
}
section ul {
    display:inline;
    text-decoration:none;
	padding: 0px;
	overflow:hidden;
}
section ul li {
    color:darkgoldenrod;
    display:inline;
}
section ul li > span {
    display:none;
    z-index:0;
    border:thin black solid;
    text-align: center;
    text-size:larger;
    font-weight: bold;
}
section ul li > span > img {
    width:90%;
    padding:5%;
    text-align: center;
}
section ul li:hover > span {
    position:absolute;
    display:inline-block;
    background-color: rgba(64,64,64,1);
    color:white;
    z-index:1;
    width:30%;
    transform: translateX(-90%);
}

.foot {
    grid-column:1/5;
    grid-row:6;
    text-align: right;
    
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
    border-radius:50%;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.link {
    text-decoration: none;
    color:black;
}
.link:hover {
  opacity: 0.7;
}
section {
    font-size: calc(1vh + 1vw);
    width:90%;
    height:100%;
    margin:auto;
    background-color:white;
	
	 
}

#contactMe {
    grid-column: 1 / 3 ;
    grid-row: 1;
    background-color:lightgray;
}

#fbook {
    grid-column: 1;
    grid-row:2;
    background-color: blue;
}

#insta {
    grid-column:2;
    grid-row:2;
    background-color: red;
}

.contact {
    display:grid;
    grid-template-columns: auto auto; 
    grid-gap:10px;
}