1  * {
   2    user-select: none;
   3  }
   4  
   5  html, body {
   6    margin: 0;
   7    background-color: #000;
   8  }
   9  
  10  html {
  11    font-size: 62.5%;
  12  }
  13  
  14  
  15  body {
  16    font-size: 1.4rem;
  17    font-family: 'VCR OSD Mono';
  18  }
  19  
  20  @font-face {
  21    font-family: 'VCR OSD Mono';
  22    src: url('fonts/VCROSDMono.woff2') format('woff2'),
  23        url('fonts/VCROSDMono.woff') format('woff');
  24    font-weight: normal;
  25    font-style: normal;
  26    font-display: swap;
  27  }
  28  
  29  
  30  @font-face {
  31    font-family: 'Aqala Display FREE';
  32    src: url('fonts/AqalaDisplayFREE-Regular.woff2') format('woff2'),
  33        url('fonts/AqalaDisplayFREE-Regular.woff') format('woff');
  34    font-weight: normal;
  35    font-style: normal;
  36    font-display: swap;
  37  }
  38  
  39  a {
  40    color: #a820d900;
  41    text-decoration: none;
  42    -webkit-text-stroke-width: 1px;
  43    -webkit-text-stroke-color: #FA35C3;
  44  }
  45  
  46  a:hover {
  47    color: white;
  48    border-color: #ffffff;
  49    text-decoration: none; /* Optional: add underline on hover */
  50  }
  51  
  52  
  53  
  54  .a1 {
  55    /* position: relative; */
  56    color: #FA35C3;
  57    text-decoration: underline;
  58      
  59  }
  60  
  61  .a1:hover {
  62    color: white;
  63    border-color: #ffffff;
  64    text-decoration: underline; /* Optional: add underline on hover */
  65    -webkit-text-stroke-width: 0px;
  66  }
  67  
  68  
  69  
  70  
  71  h1 {
  72    -webkit-text-stroke-width: 1px;
  73    -webkit-text-stroke-color: white;
  74    color: #00000000;
  75    font-size: 6vw;
  76    margin-bottom: 0.5vw;
  77    
  78  }
  79  
  80  h2 {
  81    -webkit-text-stroke-width: 1px;
  82    -webkit-text-stroke-color: white;
  83    color: #00000000;
  84    font-size: 5vw;
  85    margin-bottom: 0.5vw;
  86  }
  87  
  88  
  89  h3 {
  90    color: #ffffff;
  91    font-size: 4vw;
  92    font-weight: 200;
  93    margin-bottom: 1.5vw;
  94    text-align: center;
  95  }
  96  
  97  
  98  h4 {
  99    color: #ffffff;
 100    font-size: 2vw;
 101    font-weight: 200;
 102    margin-bottom: 1.5vw;
 103    text-align: center;
 104  }
 105  
 106  h5 {
 107    color: #ffffff;
 108    font-size: 1vw;
 109    font-weight: 200;
 110    margin-bottom: 1.5vw;
 111    text-align: center;
 112  }
 113  
 114  
 115  ::-webkit-scrollbar {
 116    width: 4px;
 117  }
 118  
 119  /* Фон скроллбара */
 120  ::-webkit-scrollbar-track {
 121    background: #a820d95f;
 122  }
 123  
 124  /* Бегунок скроллбара */
 125  ::-webkit-scrollbar-thumb {
 126    background: #FA35C3;
 127    border-radius: 2px; /* Опционально: сделать углы бегунка скругленными */
 128  }
 129  
 130  .canvas-wrapper {
 131    position: absolute;
 132    z-index: -10;
 133    width: 100%;
 134    height: 100vh; /* Установите значение, которое вам подходит */
 135    background-color: #000;
 136  }
 137  
 138  .canvas-wrapper #fluid {
 139    width: 100%;
 140    height: 100%;
 141    position: fixed;
 142  }
 143  
 144  main {
 145    height: 100%;
 146  }
 147  
 148  /* .text-container {
 149    position: absolute;
 150    top: 0;
 151    left: 0;
 152    width: 100%;
 153    height: 100%;
 154    display: flex;
 155    align-items: center;
 156    justify-content: center;
 157    color: #ffffff;
 158    padding: 20px;
 159    box-sizing: border-box;
 160  } */
 161  
 162  
 163  
 164  /*menu                */
 165  
 166  
 167  .my-menu {
 168    width: 100%;
 169    max-width: 1200px;
 170    margin: 0 auto;
 171    justify-content: center;
 172  }
 173  
 174  
 175  .my-menu-list {
 176    list-style-type: none;
 177    /* margin-top: 3rem; */
 178    padding: 0.7em;
 179    overflow: hidden;
 180    background-color: #000000;
 181    text-align: center;
 182    justify-content: center;
 183    border-radius: 2px;
 184    margin: 1rem auto;
 185    position: fixed;
 186    z-index: 99;
 187    box-shadow: rgb(0, 0, 0) 0px 20px 30px -10px;
 188    transition: all 0.3s ease-in-out;
 189    border-color: #000000;
 190    border-width: 1px;
 191    border-style: solid;
 192    width: 100%;
 193    max-width: 1200px;
 194   
 195  }
 196  
 197  
 198  .my-menu-list:hover {
 199    box-shadow: #FA35C3 0px 20px 30px -10px;
 200    border-color: #FA35C3;
 201    border-width: 1px;
 202    border-style: solid;
 203    transition: all 0.3s ease-in-out;
 204  }
 205  
 206  
 207  .my-menu-item {
 208    display: inline-block;
 209    float: center;
 210    max-width: 1200px;
 211  }
 212  
 213  
 214  .my-menu-item a {
 215    color: #c22dcf00;
 216    padding: 1em;
 217    text-decoration: none;
 218    font-size: 32px;
 219    text-shadow: 2px 2px 5px rgb(0, 0, 0);
 220    -webkit-text-stroke-width: 1px;
 221    -webkit-text-stroke-color: #FA35C3;
 222    
 223  }
 224  
 225  
 226  .my-menu-item a:hover {
 227    border-bottom: 3px solid rgb(255, 255, 255);
 228    color: #ffffff00;
 229    -webkit-text-stroke-color: #ffffff;
 230    -webkit-text-stroke-width: 1px;
 231  }
 232  
 233  
 234  .menu-toggle {
 235    display: none;
 236    /* flex-direction: column;
 237    cursor: pointer;
 238    padding: 14px 20px; */
 239  }
 240  
 241  .bar {
 242    /* height: fit-content;
 243    width: fit-content; */
 244    /* background-color: rgb(255, 0, 0); */
 245    margin: 4px 0;
 246  }
 247  
 248  
 249  /*/////////////END OF MENU////////////////////*/
 250  
 251  
 252  
 253  .landing-page-container {
 254    width: 100%;
 255    min-height: 100vh;
 256    max-width: 1200px;
 257    background-repeat: no-repeat;
 258    background-size: cover;
 259    background-position: bottom;
 260    color: #ffffff;
 261    margin: 0 auto;
 262  }
 263  
 264  .content__wrapper {
 265    max-width: 1200px;
 266    width: 100%;
 267    height: 100%;
 268    margin: 0 auto;
 269    position: relative;
 270    
 271  }
 272  
 273  .content-container {
 274    margin-top: 60px; 
 275    padding: 10px;
 276    border: 1px solid #ccc;
 277    font-size: 32px;
 278    position: relative;
 279  }
 280    
 281  .header {
 282    width: 100%;
 283    height: 12rem;
 284    padding: 0.5rem 0;
 285    display: block;
 286    position: relative;
 287    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.716);
 288  }
 289  
 290  
 291  .image-container {
 292    position: relative;
 293    max-width: 250px;
 294    max-height: 250px;
 295    border: 2px solid #fff;
 296    border-radius: 100%;
 297    overflow: hidden;
 298    margin-right: 1px; /* Optional: Add some margin between the image and text */
 299    margin-bottom: -4rem;
 300    margin-top: 15rem;
 301    transition: all 0.3s ease-in-out; /* Transition for transform, opacity, and margin-top */
 302  }
 303  
 304  .image-container img {
 305    /* width: 50%;
 306    height: 50%; */
 307    /* position: absolute; */
 308    top: 10%;
 309    left: 10%;
 310    transform: translate(-20%, -20%); /* Center the image inside the container */
 311  }
 312  
 313  .image-container:hover {
 314    transform: scale(1.2); /* Increase the size by 20% (adjust as needed) */
 315    /* opacity: 0.5; Make the object 50% transparent */
 316    margin-top: 100px; /* Move the object down by 100 pixels (adjust as needed) */
 317    box-shadow: #FA35C3 0px 60px 30px -10px;
 318    border-color: #FA35C3;
 319    border-width: 1px;
 320    border-style: solid;
 321    transition: all 0.3s ease-in-out;
 322    
 323  }
 324  
 325  
 326  .heading-container {
 327    font-family: 'Aqala Display FREE';
 328    font-size: 14vw; /* Use viewport width as a unit for responsive font size */
 329    line-height: 85%;
 330    position: absolute;
 331    z-index: -1;
 332    top: 65%;
 333    left: 45%;
 334    transform: translate(-50%, -50%);
 335    padding: 2vw; /* Adjust padding using vw unit */
 336    margin-top: 30vh; /* Use viewport height as a unit for margin */
 337    -webkit-text-stroke-width: 1px;
 338    -webkit-text-stroke-color: white;
 339    color: #0000009b;
 340    
 341  }
 342  
 343  
 344  .content {
 345    display: flex;
 346    flex-direction: column;
 347    align-items: center; 
 348    height: 100%;
 349    /* z-index: 99; */
 350    margin: 0 auto;
 351    width: 100%;
 352  }
 353  
 354  /*
 355  .content-container1,
 356  .content-container2 {
 357    margin-top: 20px; 
 358    padding: 10px;
 359    border: 1px solid #ccc;
 360    font-size: 32px;
 361    width: 90%;
 362    position: absolute;
 363    background-color: rgba(0, 0, 0, 0.39);
 364  } 
 365  */
 366  
 367  
 368  
 369  .content-container1 {
 370    margin-top: 50%;
 371    padding: 30px;
 372    padding-top: 10px;
 373    /* border: 1px solid #ccc; */
 374    font-size: 32px;
 375    position: absolute;
 376    line-height: 135%;
 377    border-top: 1px solid rgb(255, 255, 255);
 378    border-bottom: 1px solid rgb(255, 255, 255);
 379    border-radius: 11px;
 380    width: 100%;
 381    max-width: 1200px;
 382     margin-left: 2rem; 
 383  }
 384  
 385  .content-container1_bottom {
 386    padding: 30px;
 387    padding-top: 2rem;
 388    padding-bottom: -2rem;
 389    margin-bottom: 4rem;
 390    /* border: 1px solid #ccc; */
 391    font-size: 24px;
 392    text-align: center;
 393    position: relative;
 394    line-height: 32px;
 395    border-top: 1px solid rgb(255, 255, 255);
 396    border-bottom: 1px solid rgb(255, 255, 255);
 397    border-radius: 11px;
 398    
 399  }
 400  
 401  
 402  .tooltip {
 403    position: relative;
 404    display: inline-block;
 405    cursor: pointer;
 406    text-decoration: underline;
 407  }
 408  
 409  .tooltip .tooltiptext {
 410    visibility: hidden;
 411    width: 400px;
 412    line-height: 3rem;
 413    background-color: black;
 414    color: #fff;
 415    text-align: left;
 416    border-radius: 6px;
 417    padding: 1rem;
 418    position: absolute;
 419    z-index: 1;
 420    opacity: 0;
 421    transition: opacity 0.7s;
 422    font-size: 2rem;
 423    box-shadow: 0px 0px 20px 7px #FA35C3;
 424  }
 425  
 426  .tooltip .tooltiptext::after {
 427    content: "";
 428    position: absolute;
 429    top: 100%; /* At the bottom of the tooltip */
 430    left: 50%;
 431    margin-left: -5px;
 432    border-width: 5px;
 433    border-style: solid;
 434    border-color: #555 transparent transparent transparent;
 435  }
 436  
 437  .tooltip:hover .tooltiptext {
 438    visibility: visible;
 439    opacity: 1;
 440  }
 441  
 442  
 443  /* .tooltip {
 444    position: relative;
 445    display: inline-block;
 446    text-decoration: underline;
 447  }
 448  
 449  .tooltip .tooltiptext {
 450    visibility: hidden;
 451    width: 400px;
 452    line-height: 3rem;
 453    background-color: black;
 454    color: #fff;
 455    text-align: left;
 456    border-radius: 6px;
 457    padding: 1rem;
 458    position: absolute;
 459    z-index: 1;
 460    opacity: 0;
 461    transition: opacity 0.7s;
 462    font-size: 2rem;
 463    box-shadow: 0px 0px 20px 7px #a720d9;
 464  }
 465  
 466  .tooltip:hover .tooltiptext {
 467    visibility: visible;
 468    opacity: 1;
 469  } */
 470  
 471  
 472  
 473    .content-container2 {
 474      margin-top: 100%;
 475      padding: 30px;
 476      /* border: 1px solid #ccc; */
 477      font-size: 32px;
 478      position: absolute;
 479      width: 100%;
 480      max-width: 1200px;
 481    } 
 482  
 483  
 484    .sixTenets {
 485      font-size: 2rem;
 486      text-align: left;
 487      max-width: 70%;
 488      margin: 0 auto;
 489    }
 490   
 491      .menu-icon {
 492      width: 2.5rem;
 493      height: 1.5rem;
 494      display: inline-block;
 495      cursor: pointer;
 496    }
 497    
 498    .header__item {
 499      display: inline-block;
 500      float: left;
 501      font-size: large;
 502      
 503    }
 504    
 505   
 506    
 507    .copyHeader {
 508      width: max-content;
 509      /* background-color: #a720d9; */
 510    }
 511  
 512    .infoHeader {
 513      color: #ffffff;
 514      font-size: 2vw;
 515      margin-top: -4.8vw;
 516      margin-right: -15rem;
 517      position: relative;
 518      text-align: right;
 519      
 520    }
 521   
 522    .internalLink {
 523      font-size: 6rem;
 524      text-align: left;
 525      margin-top: 2rem;
 526      box-shadow: #FA35C3 0px 20px 30px -10px;
 527      border-color: #FA35C3;
 528      border-width: 1px;
 529      border-style: solid;
 530      border-radius: 2px;
 531      transition: all 0.3s ease-in-out;
 532      width: max-content;
 533      color: #c22dcf00;
 534      -webkit-text-stroke-width: 1px;
 535      -webkit-text-stroke-color: #FA35C3;
 536      padding-left: 3rem;
 537      padding-right: 3rem;
 538      background-color: #000000;
 539    }
 540  
 541   .internalLink:hover {
 542    -webkit-text-stroke-width: 1px;
 543    -webkit-text-stroke-color: #ffffff;
 544     color: #ffffff00;
 545     cursor: pointer;
 546     transition: all 0.3s ease-in-out;
 547   }
 548  
 549   
 550    .menu-icon__line {
 551      width: 1.5rem;
 552      height: 0.2rem;
 553      background-color: #ffffff;
 554      display: block;
 555    }
 556    
 557    .menu-icon__line:before, .menu-icon__line:after {
 558      content: "";
 559      width: 1.5rem;
 560      height: 0.2rem;
 561      background-color: #ffffff;
 562      display: inline-block;
 563      position: relative;
 564    }
 565  
 566    .menu-icon__line:before {
 567      left: 0.5rem;
 568      top: -0.6rem;
 569    }
 570  
 571    .menu-icon__line:after {
 572      top: -1.8rem;
 573    }
 574    
 575    
 576    /* .heading {
 577      width: 90%;
 578      font-size: 2rem;
 579      font-weight: bold;
 580      margin: 0;
 581      line-height: 1.7rem;
 582      margin: 0 auto;
 583      text-align: center;
 584    } */
 585    
 586    .social-container {
 587      width: 7.7rem;
 588      list-style: none;
 589      padding: 0;
 590      margin: 0rem;
 591      float: right;
 592      z-index: 999;
 593    }
 594    .social-container .social__icon {
 595      float: left;
 596      cursor: pointer;
 597    }
 598    .social-container .social__icon.social__icon {
 599      margin-left: 1.5rem;
 600      padding: 7.5px;
 601    }
 602    .social-container .social__icon.social__icon img {
 603      height: 3rem;
 604    }
 605   
 606  
 607    script {
 608      position: relative; 
 609      z-index: -111; 
 610  }
 611  
 612    
 613    .coords {
 614      font-size: 1rem;
 615      display: inline-block;
 616      transform: rotate(-90deg) translateY(50%);
 617      float: left;
 618      position: relative;
 619      top: 23rem;
 620      letter-spacing: 0.2rem;
 621      left: -11.5rem;
 622      margin-top: 10%;
 623      font-size: 1.5rem;
 624    }
 625    
 626    .ellipses-container {
 627      width: 50rem;
 628      height: 50rem;
 629      border-radius: 50%;
 630      margin: 0 auto;
 631      position: relative;
 632      top: 10.5rem;
 633      text-align: center; 
 634      margin-left: 60rem;
 635  }
 636  
 637  .ellipses-container .sigil {
 638      position: relative;
 639      width: 50rem;
 640      height: 50rem;
 641      max-width: 640px;
 642      max-height: 640px;
 643      margin-top: 1rem;
 644      /* top: 8.5rem; */
 645      z-index: -2;
 646  }
 647  
 648    
 649    .ellipses {
 650      border-radius: 50%;
 651      position: absolute;
 652      top: 0;
 653      border-style: solid;
 654      
 655    }
 656    
 657    .ellipses__outer--thin {
 658      width: 100%;
 659      height: 100%;
 660      border-width: 1px;
 661      border-color: rgba(255, 255, 255, 0.1);
 662      -webkit-animation: ellipsesOrbit 15s ease-in-out infinite;
 663              animation: ellipsesOrbit 15s ease-in-out infinite;
 664    }
 665    .ellipses__outer--thin:after {
 666      content: "";
 667      background-image: url("https://s29.postimg.org/5h0r4ftkn/ellipses_dial.png");
 668      background-repeat: no-repeat;
 669      background-position: center;
 670      top: 0;
 671      left: 0;
 672      bottom: 0;
 673      right: 0;
 674      position: absolute;
 675      opacity: 0.15;
 676    }
 677    
 678    .ellipses__outer--thick {
 679      width: 99.5%;
 680      height: 99.5%;
 681      border-color: #ffffff transparent;
 682      border-width: 2px;
 683      transform: rotate(-45deg);
 684      -webkit-animation: ellipsesRotate 15s ease-in-out infinite;
 685              animation: ellipsesRotate 15s ease-in-out infinite;
 686    }
 687    
 688    .ellipses__orbit {
 689      width: 2.5rem;
 690      height: 2.5rem;
 691      border-width: 2px;
 692      border-color: #ffffff;
 693      top: 5rem;
 694      right: 6.75rem;
 695    }
 696    .ellipses__orbit:before {
 697      content: "";
 698      width: 0.7rem;
 699      height: 0.7rem;
 700      border-radius: 50%;
 701      display: inline-block;
 702      background-color: #ffffff;
 703      margin: 0 auto;
 704      left: 0;
 705      right: 0;
 706      position: absolute;
 707      top: 50%;
 708      transform: translateY(-50%);
 709    }
 710    
 711  
 712    
 713    @-webkit-keyframes ellipsesRotate {
 714      0% {
 715        transform: rotate(-45deg);
 716      }
 717      100% {
 718        transform: rotate(-405deg);
 719      }
 720    }
 721    
 722    @keyframes ellipsesRotate {
 723      0% {
 724        transform: rotate(-45deg);
 725      }
 726      100% {
 727        transform: rotate(-405deg);
 728      }
 729    }
 730    @-webkit-keyframes ellipsesOrbit {
 731      0% {
 732        transform: rotate(0);
 733      }
 734      100% {
 735        transform: rotate(360deg);
 736      }
 737    }
 738    @keyframes ellipsesOrbit {
 739      0% {
 740        transform: rotate(0);
 741      }
 742      100% {
 743        transform: rotate(360deg);
 744      }
 745    }
 746  
 747  
 748  
 749  
 750  
 751  
 752  
 753  /*//////////////////////mobile styles////////////////////////////////////*/
 754  
 755  
 756  
 757  @media only screen and (max-width: 1250px) {
 758  
 759  
 760    html, body {
 761      margin: 0;
 762      background-color: #000;
 763      overflow-x: hidden;
 764      width: 100%;
 765    }
 766  
 767  
 768    h1 {
 769    font-size: 2rem; 
 770      
 771    }
 772    
 773    h2 {
 774      font-size: 2rem; 
 775    }
 776    
 777    
 778    
 779    h3 {
 780      font-size: 4rem;
 781    }
 782    
 783    
 784    h4 {
 785      font-size: 2rem;
 786     
 787    }
 788    
 789    h5 {
 790      font-size: 2rem;
 791    }
 792  
 793  
 794    .fluid {
 795      width: 100%;
 796    }
 797   
 798    .landing-page-container {
 799      /* min-height: 100vw; */
 800      /* padding: 2rem; */
 801    }
 802  
 803  /*//////////MOB MENU/////////*/
 804  
 805  .bar{
 806    
 807  }
 808  
 809  .menu-toggle {
 810  
 811  }
 812  
 813  .sigilSmallMenu {
 814    width: 48px;
 815    height: 48px;
 816  }
 817  
 818  .menuButton {
 819    padding: 0.5rem;
 820    padding-right: 1.5rem;
 821    width: max-content;
 822    flex-direction: row;
 823    font-size: 32px;
 824    /* background-color: #42956a; */
 825    display: flex;
 826    align-items: center;
 827    justify-content: left;
 828    text-decoration: none;
 829    -webkit-text-stroke-width: .5px;
 830    -webkit-text-stroke-color: #ffffff;
 831    color: #00000000;
 832    gap: 1rem;
 833    position: fixed;
 834    z-index: 99;
 835    background-color: #000000;
 836    border-radius: 4px;
 837  }
 838  
 839  
 840  .my-menu-list {
 841    flex-direction: column;
 842    width: fit-content;
 843    display: none;
 844    background-color: #000000;
 845    z-index: 1000;
 846    
 847  }
 848  
 849  .my-menu-list.active {
 850    display: flex;
 851  }
 852  
 853  .menu-toggle {
 854    display: flex;
 855  }
 856  
 857  .my-menu-item {
 858    display: block;
 859    text-align: left;
 860    padding: 10px 0;
 861  }
 862  
 863  .my-menu-item a {
 864    font-size: 36px;
 865  }
 866  
 867  /*/////////////*/
 868  
 869    /* .canvas-wrapper {
 870      padding: 0;
 871      background-color: #555;
 872    } */
 873  
 874    .content__wrapper {
 875      width: 100%
 876      padding: 2rem;
 877      justify-content: center;
 878      max-width: 600px;
 879      overflow: hidden;
 880      
 881      /* background-color: #FA35C3; */
 882    }
 883  
 884    .header {
 885      /* height: 9rem; 
 886      margin-top: 9rem; */
 887    }
 888  
 889    .heading-container {
 890      margin-top: .5vh; 
 891      margin-bottom: -.5vh;
 892      position: relative;
 893      margin-left: 4vw;
 894      font-size: 12rem;
 895      width: auto;
 896      height: auto;
 897          
 898    }
 899  
 900    .content-container,
 901    .content-container1,
 902    .content-container2 {
 903      width: 90%;
 904      /* margin-top: -221px;
 905      margin-bottom: 251px; */
 906      padding: 15px; 
 907      font-size: 18px; 
 908      position: relative; 
 909      background-color: rgba(0, 0, 0, 0);
 910      margin: 0 auto;
 911    }
 912  
 913  
 914    .content-container{
 915      /* width: 100%; */
 916    }
 917  
 918    .content-container1 {
 919      margin-top: -34rem;
 920      /* width: 100%; */
 921      
 922    }
 923  
 924  
 925    .copyHeader{
 926      width: 100%;
 927    
 928  
 929    }
 930    
 931    .infoHeader{
 932      position: relative;
 933      /* margin: 0; */
 934      text-align: left;
 935  font-size: 3rem;
 936    }
 937  
 938  
 939  
 940  .image-container {
 941    margin-bottom: 2rem;
 942  }
 943  
 944  .sixTenets {
 945    min-width: 100%;
 946  }
 947  
 948  .internalLink {
 949      font-size: 4rem;
 950  }
 951  
 952    .coords {
 953      font-size: 1.7rem; 
 954      margin-top: 19rem; 
 955      position: absolute;
 956      display: none;
 957    }
 958  
 959    .ellipses-container {
 960      width: 70vw; 
 961      height: 70vw;
 962      margin-left: 18rem; 
 963      margin-top: -10rem; 
 964    }
 965  
 966    .ellipses-container .sigil {
 967      width: 70vw; 
 968      height: 70vw;
 969      /* margin-left: 4rem; */
 970      /* margin-top: -11rem; */
 971    }
 972  
 973  
 974    .social-container {
 975      right: 0;
 976      top: 0;
 977      position: absolute;
 978      width: 7.7rem;
 979      list-style: none;
 980      padding: 0;
 981      margin: 0rem;
 982      float: right;
 983      z-index: 999;
 984      margin-right: 2rem;
 985      margin-top: -10rem;
 986    }
 987  
 988    .social-container .social__icon {
 989      float: right;
 990      cursor: pointer;
 991    }
 992    .social-container .social__icon.social__icon {
 993      margin-left: 1.5rem;
 994      padding: 7.5px;
 995    }
 996    .social-container .social__icon.social__icon img {
 997      height: 3rem;
 998    }
 999  
1000  
1001  
1002  
1003  }
1004  
1005