Template:NYMU-Taipei/home css

@font-face {

   font-family: 'poppins';
   src: url("https://static.igem.org/mediawiki/2020/d/d8/T--NYMU-Taipei--Poppins-Regular.ttf");

}

@font-face {

   font-family: 'poppins';
   src: url('https://static.igem.org/mediawiki/2020/d/d7/T--NYMU-Taipei--Poppins-Bold.ttf');
   font-weight: bold;

}

@font-face {

   font-family: 'poppins';
   src: url('https://static.igem.org/mediawiki/2020/a/ae/T--NYMU-Taipei--Poppins-Light.ttf');
   font-weight: lighter;

}

@font-face {

   font-family: 'poppins';
   src: url('https://static.igem.org/mediawiki/2020/6/6a/T--NYMU-Taipei--Poppins-Italic.ttf');
   font-weight: normal;
   font-style: italic;

}

body {

   font-family: poppins;
   color: #363636;

}

/* NAVBAR */

.dropdown:hover>.dropdown-menu {

   display: block;

}

.dropdown>.dropdown-toggle:active {

   /*Without this, clicking will make it sticky*/
   pointer-events: none;

}

/* HOMEPAGE */

bg-covid-world {

   position: relative;
   background-image: url("");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 80vh;

}

.dark-overlay {

   position: absolute;
   height: 100%;
   width: 100%;
   background-color: #030303;
   opacity: 0.5;

}

.main-logo-container {

   height: 100%;

}

.main-logo-container > img {

   position: absolute;
   height: 40%;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   top: 30%;
   text-align: center;

}

.title-container {

   margin-top: -6.75rem;

}

.main-title {

   position: relative;
   z-index: 1;
   font-size: 4rem;
   padding: 1rem;
   margin: 0;

}

/* BRIEFING SECTION */

briefing-section > div > h3 {

   font-size: 1.5rem;

}

.divide-line {

   width: 80px;
   height: 4px;
   background-color: black;

}

/* BOX AREA */

.bg-green {

   background-color: #52b098;
   margin: 0;

}

.home-info-card {

   padding: none;

}

.home-info-card > div:first-child {

   height: 300px;

}

.home-info-card > div:first-child > img {

   max-width: 60%;

}

.box {

   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   padding-left: 0;
   padding-right: 0;
   margin: 1.25rem;
   height: 500px;
   box-shadow: 0 0 11px rgba(33, 33, 33, .2);
   transition: box-shadow .3s;

}

.box:hover {

   box-shadow: 0 0 11px rgba(10, 10, 10, 0.3);

}

.upper-box {

   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #52b098;
   height: 60%;

}

.lower-box {

   display: flex;
   align-items: center;
   justify-content: center;
   height: 40%;
   font-size: 26px;
   background-color: white;

}

.lower-box span{

   font-size: 2rem;

}

/* FOOTER */

.footer-info {

   background-color: #52b098;

}

.footer-sponsors img {

   width: 100%;
   height: auto;

}

/* ICONS */

svg {

   display: inline;

}

/* MOVING ARROW */

.move-object {

   width: 1.5rem;
   animation: MoveUpDown 3s linear infinite;
   margin-bottom: 3rem;

}

@keyframes MoveUpDown {

   0%, 100% {
       transform: translateY(-5px);
   }
   25%, 75% {
       transform: translateY(5px);
   }
   50% {
       transform: translateY(20px);
   }

}

/* MISC */

.text-bold {

   font-weight: bold;

}

@media only screen and (max-width: 768px) {

   /* TITLE AREA */

   .title-container {
       margin-top: -4.5rem;
   }

   .main-title {
       font-size: 2rem;
       padding: 1rem;
       margin: 0;
   }

   /* BRIEFING SECTION */

   #briefing-section > div > h3 {
       font-size: 1rem;
   }

   /* BOX */

   .box {
       height: 400px;

}