hyprland-website/public/backups/home.old.css

@font-face {
    font-family: "LondonBetween";
    src: url("../fonts/LondonBetween.woff") format("woff");
  }
  
  @font-face {
    font-family: "JosefinSans-Regular";
    src: url("../fonts/JosefinSans-Regular.woff") format("woff");
  }
  @font-face {
    font-family: "Sofia-Pro-Light";
    src: url("../fonts/SofiaProLight.woff") format("woff");
  }
  
  @font-face {
    font-family: "Sofia-Pro-Medium";
    src: url("../fonts/SofiaProMedium.woff") format("woff");
  }
  
  @font-face {
    font-family: "SourceCodePro-Semibold";
    src: url("../fonts/SourceCodePro-Semibold.woff") format("woff");
  }
  
  * {
    padding: 0px;
    margin: 0px;
    background-color: #1a1a2e;
  }
  
  body {
    overflow-x: hidden;
  }
  
  #content-center {
    margin-left: 10%;
    margin-right: 10%;
  }
  
  #header {
    display: flex;
    background-color: #1a1a2e;
    width: auto;
    height: 6rem;
  
  }
  
  .header {
    background-color: #1a1a2e;
  }
  
  #header-logo-div {
    width: 240px;
  }
  
  
  
  #header-logo {
    width: auto;
    height: 100%;
  }
  
  #header-links {
    display: flex;
    padding-top: 15%;
    width: 260px;
  }
  
  #header-links-div {
    margin-left: auto;
    padding-right: 10rem;
  }
  
  .header-link {
    color: #cfe8f6;
    font-family: "LondonBetween";
    font-size: 20px;
    text-decoration: none;
    transition: transform 0.2s;
  }
  
  
  
  .text-para-link:hover {
    color: aquamarine;
    font-size: 28px;
  }
  
  .text-para-link {
    color: #cfe8f6;
    font-size: 22px;
    transition: font-size 0.2s;
  }
  #header-link-install {
    margin-left: 10%;
  }
  #header-link-configure {
    margin-left: 10%;
  }
  
  #header-link-home {
    border-bottom: 2px solid #cfe8f6;
  }
  
  .header-link:hover {
    transform: scale(1.3);
    border-bottom: 2px solid aquamarine !important;
    color: aquamarine;
  }
  
  #links-out {
    margin-left: auto;
  }
  
  #github {
    margin-top: 50%;
  }
  
  #link-github {
    padding: 15px;
    background-color: aquamarine;
    font-family: "LondonBetween";
    color: #1a1a2e;
    text-decoration: none;
  }
  
  #github {
    transition: transform 0.2s;
  }
  
  #github:hover {
    transform: scale(1.2);
  }
  #top {
    width: 100%;
    height: 40rem;
    /* background-color: #1a1a2e; */
    display: flex;
  }
  
  #text {
    width: 50%;
    height: 100%;
    margin-top: 8rem;
    margin-right: 2%;
    padding-right: 20px;
  }
  
  #text-h1 {
    color: #cfe8f6;
    font-family: "JosefinSans-Regular";
    font-size: 65px;
    line-height: 1;
  }
  
  .text-para {
    padding-top: 20px;
    color: #cfe8f6;
    font-family: "Sofia-Pro-Medium";
    font-size: 22px;
    line-height: 1.3;
  }
  
  #slide {
    width: 640px;
    height: auto;
    margin-top: 6%;
  }
   
  #slide-content {
    
    border: 5px solid #cfe8f6;
    
  }
  
  #slide-img {
    width: auto;
    max-width: 40rem;
    height: auto;
    max-height: 23rem;
  } 
  
  .swiper {
    width: auto;
  }
  
  .swiper-slide {
    width: auto;
  }
  
  .swiper-wrapper {
    width: auto;
    height: auto;
  }
  
  .swiper .swiper-button-prev,
  .swiper .swiper-button-next {
    color: #cfe8f6;
    background-color: transparent;
  }
  
  .swiper .swiper-pagination-bullet-active {
    background-color: #cfe8f6;
  }
  
  .swiper .swiper-pagination {
    background-color: transparent;
  }
  
  #install-link {
    margin-top: 2rem;
    padding: 15px;
    background-color: aquamarine;
    border: 5px solid #1a1a2e;
    /* border-radius: 15px; */
    font-family: "Sofia-Pro-Medium";
    transition: transform 0.2s;
    font-size: 16px;
    cursor: pointer;
  }
  
  #install-link:hover {
    transform: scale(1.2);
  }
  
  #title-features {
    font-family: "JosefinSans-Regular";
    color: #cfe8f6;
    font-size: 102px;
  }
  
  #features {
    width: 100%;
    height: 130rem;
  }
  
  #animation {
    margin-top: 10rem;
  
    display: flex;
  }
  
  #animation-left {
    width: 50%;
    height: 100%;
  }
  
  video {
    width: 100%;
    height: 10%;
  }
  
  #animation-right {
    width: 50%;
    height: 100%;
  }
  
  #animation-h1 {
    color: #cfe8f6;
    font-family: "JosefinSans-Regular";
    margin-left: 25%;
    margin-top: 15%;
    font-size: 46px;
    line-height: 1;
    width: 100%;
  }
  
  #animation-p {
    color: #cfe8f6;
    font-family: "Sofia-Pro-Light";
    margin-left: 20%;
    margin-top: 2%;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }
  
  #tiling {
    margin-top: 20rem;
    display: flex;
  }
  
  #tiling-left {
    width: 50%;
    height: 100%;
  }
  
  #tiling-right {
    width: 50%;
    height: 100%;
  }
  
  #tiling-h1 {
    color: #cfe8f6;
    font-family: "JosefinSans-Regular";
    margin-left: 13%;
    margin-top: 15%;
    font-size: 46px;
    line-height: 1;
    width: 100%;
  }
  
  #tiling-p {
    color: #cfe8f6;
    font-family: "Sofia-Pro-Light";
    margin-right: 20%;
    margin-top: 2%;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }
  
  #configure {
    margin-top: 20rem;
  
    display: flex;
  }
  
  #configure-left {
    width: 50%;
    height: 100%;
  }
  
  #configure-right {
    width: 50%;
    height: 100%;
  }
  
  #configure-h1 {
    color: #cfe8f6;
    font-family: "JosefinSans-Regular";
    margin-left: 26%;
    margin-top: 15%;
    font-size: 46px;
    line-height: 1;
    width: 100%;
  }
  
  #configure-p {
    color: #cfe8f6;
    font-family: "Sofia-Pro-Light";
    margin-left: 20%;
    margin-top: 2%;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }
  
  #link-config {
    color: #cfe8f6;
    transition: font-size 0.2s;
  }
  
  #link-config-discord {
    color: #cfe8f6;
    transition: font-size 0.2s;
  }
  
  #link-config:hover {
    color: aquamarine;
    font-size: 20px;
  }
  
  #link-config-discord:hover {
    color: #5865f2;
    font-size: 20px;
  }
  
  #and-many-more {
    width: auto;
    margin-top: 15rem;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 6rem;
    height: 30rem;
    background-color: #2d2d47;
    border-radius: 15px;
  }
  
  .amm {
    background-color: #2d2d47;
    border-radius: 15px;
  }
  
  #h1-amm {
    color: #cfe8f6;
    font-family: "JosefinSans-Regular";
    margin-left: 28%;
    padding-top: 4%;
    font-size: 52px;
    line-height: 1;
  }
  
  #ul-amm-div {
    display: flex;
    margin-top: 5%;
    padding-left: 50px;
  }
  
  #ul-amm {
    margin-left: 10%;
  }
  #li-amm {
    color: #cfe8f6;
    font-family: "Sofia-Pro-Medium";
    padding-bottom: 3rem;
  }
  
  #quickinstall {
    width: 100%;
    height: 20rem;
    
  }
  
  #quickinstall h1 {
    color: #cfe8f6;
    font-family: "JosefinSans-Regular";
    font-size: 48px;
  }
  
  #qi-content {
    width: auto;
    height: 6rem;
    margin-top: 20px;
    border-radius: 15px;
    background-color: #2d2d47;
  }
  
  #qi-content p span {
    
    font-family: "SourceCodePro-Semibold";
    font-size: 22px;
    background-color: #2d2d47;
  }
  
  #qi-content p {
    padding-top: 32px;
    padding-left: 30px;
    background-color: #2d2d47;
     border-radius: 15px;
  }
  
  #yay {
    color: #f9e2af
  }
  
  #syyu {
    color: #94e2d5;
  }
  
  #h-git {
    color:#cfe8f6;
  }
  
  #warning {
    width: auto;
    margin-top: 4rem;
    margin-bottom: 10rem;
    height: 6rem;
    background-color: rgba(243, 139, 168,1);
    display: flex;
    border-radius: 15px;
  }
  
  #warning img {
    width: auto;
    height: 60%;
    background-color: rgba(243, 139, 168,1);
    margin-top: 20px;
    margin-left: 30px;
  }
  
  #warning p {
    color: black;
    font-family: "Sofia-Pro-Light";
    margin-left: 30px;
    margin-top: 40px;
    font-size: 20px;
    background-color: rgba(243, 139, 168,1);
  }
  
  #warning i {
    background-color: rgba(243, 139, 168,1);
  }
  
  #info-install {
    color:#cfe8f6;
    font-family: "Sofia-Pro-Medium";
    margin-top: 10px;
    font-size: 14px;
  }
  
  #info-install-link {
    color:#cfe8f6;
    font-family: "Sofia-Pro-Medium";
    font-size: 14px;
    transition: font-size 0.2s;
    
  }
  
  #info-install-link:hover {
    color: aquamarine;
    font-family: "Sofia-Pro-Medium";
    font-size: 18px;
    
  }
  
  hr {
    margin-top: 100px;
    color:#a3a3a3a5;
  }
  
  footer {
    width: 100%;
    height: 130px;
    display: flex;
  }
  
  footer p {
    
    margin-top: 10px;
    color: #a3a3a3a5;
    font-family: "Sofia-Pro-Light";
    font-size: 13px;
  }
  
  footer p a {
    color: #a3a3a3a5;
    text-decoration: none;
  }
  
  footer p a:hover {
    color: #cfe8f6;
    text-decoration: none;
  }
  
  #devs {
    padding-top: 5px;
  }
  
  .p2 {
    margin-top: 9px;
  }
  
  #foot-icons img {
    padding-left: 20px;
    width: 30px;
    height: 30px;
  
  }
  
  #foot-icons {
    margin-left: 35%;
    margin-top: 4%;
    display: flex;
  }
  
  @media (max-width: 1080px){
    #top {
      display: inline;
    }
  }
  
  @media (max-width: 480px){
    #header-logo-div {
      width: 40%;
      height: auto;
    }
  }