@charset "utf-8";
/* CSS Document */
body, html {height: 100%;margin: 0;background-color: #f2f2f2;}
html{scroll-behavior: smooth;}

/* ----------- NAVIGATION ----------- */

@keyframes keyframename {
  from {top:-50%;left:0;}
  to {top:0;left:0;}
}
@keyframes bounce {
  from {top:-50%;left:5%;}
  to {top:2%;left:5%;}
}
@keyframes x {
  from {top:-50%;right:5%;}
  to {top:3%;right:5%;}
}
@keyframes left {
  from {top:25%;right:-50%;}
  to {top:30%;right:8%;}
}
@keyframes slide {
  from {bottom:-20%;left:5%;}
  to {bottom:5%;left:5%;}
}
@keyframes up {
  from {top:108%;left:30%;}
  to {top:25%;left:30%;}
}
@keyframes y {
  from {bottom:-50%;right:2%;}
  to {bottom:5%;right:2%;}
}
@keyframes down {
  from {top:-100%;left:33%;}
  to {top:15%;left:33%;}
}
@keyframes right {
  from {top:25%;left:-20%;}
  to {top:25%;left:10%;}
}

.home{width:100%;height:100%;}

nav{width:100%;position: fixed;animation-name: keyframename;animation-duration: 2s;}
ul {display: flex;width:40%;margin:auto;padding:2% 0;}
ul li{width:33.33%;list-style: none;text-align: center;font-weight: 700;margin:auto;display: block;font-size: 1.8em; font-family: "Zain", sans-serif;}
ul li a{text-decoration: none;text-transform: uppercase;color:#1a1a1a;}
ul li a img{width:50%;}
.logo{width:20%;position: fixed;top:2%;left:5%;animation-name: bounce;animation-duration: 2s;}
.logo img{width:50%;}

.home-left{width:20%;position: fixed;top:25%;left:10%;animation-name: right;animation-duration: 2s;}
.home-left p{font-size:2em;font-weight: 300;line-height: 1.2em;font-family: "Zain", sans-serif;}
.home-left a{text-decoration: none;font-weight: 700;font-size: 2em;color:#1a1a1a;font-family: "Zain", sans-serif;line-height: 0;}

.home-middle-1{width:30%;position: fixed;top:25%;left:30%;animation-name: up;animation-duration: 2s;}
.home-middle-1 img{width:100%;}

.home-middle-2{width:35%;position: fixed;top:15%;left:33%;animation-name: down;animation-duration: 2s;}
.home-middle-2 img{width:100%;}

.home-right{width:30%;position: fixed;top:30%;right:8%;animation-name: left;animation-duration: 2s;}
.home-right p{font-size:8em;font-weight: 700;line-height: 0.8em;font-family: "Noto Sans JP", sans-serif;}

.social{position: fixed;bottom:5%;left:5%;height:10%;width:50%;animation-name: slide;animation-duration: 2s;}
.social ion-icon{font-size: 3em;padding-right:2%;}

.burger{position: fixed;top:3%;right:5%;animation-name: x;animation-duration: 2s;}
.burger ion-icon{font-size: 3em;}

.arlington{width:20%;position: fixed;bottom:5%;right:2%;animation-name: y;animation-duration: 2s;}
.arlington p{font-size:2em;font-weight: 500;line-height: 1.2em;font-family: "Zain", sans-serif;}

/* ----------- HEADER ----------- */