@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* { margin: 0; padding: 0;}
body { font-family: 'Fira Sans', sans-serif;}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@-webkit-keyframes zoom {
  from {
      transform: scale(1);
  }
  to {
      transform: scale(1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

#bg { height: 100vh; width: 100%; position: fixed; top: 0; background: linear-gradient(-45deg, #1a0c33, #2b144a, #3e205c, #552c6c, #74398a); background-size: 400% 400%; animation: gradient 15s ease infinite;}

#facebody { height: auto; position: relative;}
#home { height: 100vh; width: 100%; position: absolute; top: 0;}

#nav-icon { height: 32px; width: 35.76px; position: absolute; margin: 35px 0 0 calc(100% - 70px);}
#nav-icon div:first-child { margin: 0;}
#nav-icon div { height: 5px; width: 100%; position: relative; display: block; border-radius: 10px; margin-top: 7px; background: #fff;}

#nav { height: 200vh; width: 250px; position: absolute; margin-left: -100%; background: rgba(0, 0, 0, .35); border-right: 1px solid rgba(255, 255, 255, .2); transition: all 1s ease-in-out; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 10;}
#values-box { padding: 50px 0 0 0;}
#values-box a { padding: 15px 0 15px 35px; font-size: 24px; font-weight: 500; color: #fff; text-decoration: none; position: relative; display: block; background: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); transition: border ease-in-out;}
#values-box a:hover {border: 1px solid rgba(255, 255, 255, .2); transition: border ease-in-out; background: rgba(0, 0, 0, .25);}

header { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff;}
header h1 { font-size: 78px; font-weight: 900;}
header p { font-size: 26px; font-weight: 400; text-align: center; padding-top: 10px;}

#news { height: 100vh; width: 100%; position: absolute; margin-top: 100vh;}
.center-box { height: 500px; width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; justify-content: space-around;}
.glass-box { height: 500px; width: 300px; position: relative; background: rgba(255, 255, 255, 0.05); border-radius: 30px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3);}
.glass-box h1 { font-size: 32px; font-weight: 700; color: #fff; padding-top: 50px;}
p { font-size: 12px; font-weight: 400; color: #fff; padding: 20px 25px 0 25px;}

footer { height: 10vh; width: 100%; position: absolute; margin-top: 200vh; text-align: center;}
footer p { font-size: 24px; font-weight: 400; color: #fff;}
.socials { height: 10vh; width: 25%; position: absolute; width: 25%; padding-top: 115px; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: right; display: flex; justify-content: space-around;}
.socials a { height: 45px; width: 45px; position: relative;}
.ig { background: url(../media/ig-logo.png) center no-repeat; background-size: contain;}
.fb { background: url(../media/fb-logo.png) center no-repeat; background-size: contain;}
.lin { background: url(../media/linkedin-logo.png) center no-repeat; background-size: contain;}
.tw { background: url(../media/twitter-logo.png) center no-repeat; background-size: contain;}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .center-box { height: 600px; width: 300px; display: block;}
  .glass-box { height: 150px; display: block; margin-top: 35px;}
  .glass-box h1 { padding-top: 10px;}
  footer { height: 15vh; text-align: center;}
  footer p { padding: 0;}
  .socials { padding-top: 35px; width: 55%;}
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
  .center-box { height: 300px;}
  .glass-box { height: 300px; width: 180px;}
  .glass-box h1 { padding-top: 10px;}
  footer { height: 30vh; text-align: center;}
  footer p { padding: 0;}
  .socials { padding-top: 20px;}
}

@media only screen and (min-width: 768px) and (max-width: 1370px) and (orientation: portrait) {
  .glass-box { width: 200px;}
  footer { height: 10vh; text-align: center;}
  footer p { padding: 0;}
  .socials { padding-top: 55px; width: 35%;}
}

@media only screen and (min-width: 768px) and (max-width: 1270px) and (orientation: landscape) {
  .glass-box { width: 250px;}
  footer { height: 10vh; text-align: center;}
  footer p { padding: 0;}
  .socials { padding-top: 55px; width: 25%;}
}