Team:Calgary/layout css

/* General */ html body {

   background-color: white;
   color: rgba(0, 0, 0, 0.5);
   font-family: 'Josefin Sans', sans-serif;

}

.navbar {

   background: none;
   padding: 40px;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1;

}

.navbar-nav {

   margin-inline-start: 0px !important;
   margin-top: 0px !important;
   padding-top: 30px !important;
   position: absolute;

}

.navbar-nav > li {

   white-space: nowrap;

}

.navbar-logo {

   height: 90px;

}

.underline-animation::after {

   content: ;
   display: block;
   width: 0;
   height: 2px;
   background: #7CCFB8;
   transition: width .3s;

}

.underline-animation:hover::after {

   width: 100%;

}

.dropdown-toggle::after {

   display: none;

}

.dropdown-item {

   color: #212529 !important;

}

.dropdown-menu > a:active {

   background-color: #7CCFB8;
   color: white !important;

}

.dropdown-menu > a:focus {

   background-color: #7CCFB8;
   color: white !important;

}

.collapse.show .navbar-nav > li {

   background-color: white !important;

}

.bottom-left {

   bottom: 20px;
   left: 20px;
   line-height: 3 !important;
   position: fixed;
   text-align: center;
   z-index: 2;

}

.top-right {

   top: 30px;
   right: 70px;
   line-height: 3 !important;
   position: fixed;
   text-align: center;
   z-index: 2;

}

1. social-media-icons {

   line-height: 3;
   list-style: none;
   margin-bottom: 1rem;
   margin-inline-start: 0px;
   margin-top: 0px;
   padding-inline-start: 40px;

}

.social-media-link {

   padding: 0px !important;

}

.social-media-icon {

   color: rgba(0, 0, 0, 0.5);
   font-size: 24px;

}

.social-media-icon:hover {

   color: rgba(0, 0, 0, 0.9);

}

.apa-reference p {

   margin-left: 6em;
   text-indent: -4em;

}

@media only screen and (min-width: 1000px) {

   .navbar {
       background: linear-gradient(to bottom, white, white, white, white, rgba(255, 255, 255, 0));
   }

   .navbar-nav {
       left: 50%;
       transform: translatex(-50%);
   }
   
   .navbar-nav > li {
       margin-left: 40px;
       margin-right: 40px;
   }

   .dropdown-menu-center {
       left: 50%;
       text-align: center;
       transform: translate(-50%);
   }

}

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

   .bottom-left {
       display: none;
   }

}

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

   .navbar {
       background: white;
       padding: 30px;
   }

   .navbar-nav {
       height: 100vh;
       padding-top: 30px;
   }

   .navbar-logo {
       height: 60px;
   }

   .navbar-collapse {
       height: 100vh;
   }

   .underline-animation::after {
       display: none;
   }

}