1@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;700;900&display=swap');
  2
  3::-webkit-scrollbar {
  4    width: 10px;
  5}
  6
  7::-webkit-scrollbar-track-piece {
  8    background-color: #393939;
  9}
 10
 11::-webkit-scrollbar-thumb {
 12    background-color: #FFFFFF;
 13}
 14
 15html {
 16    scrollbar-color: #ffffff #393939;
 17    scrollbar-width: thin;
 18}
 19
 20body {
 21    position: relative;
 22    margin: 0;
 23    font-family: "Source Sans Pro";
 24    color: white;
 25    background: #000000;
 26    font-weight: 200;
 27    text-shadow: 0px 0px 5px black;
 28    width: 100vw;
 29    height: 100vh;
 30}
 31
 32.card {
 33    position: relative;
 34        padding: 32px;
 35        background: #080808;
 36        margin: 64px;
 37        height: 480px;
 38        width: 360px;
 39        border: white 1px solid;
 40        border-radius: 32px;
 41        transition: width 0.5s ease, height 0.5s ease;
 42}
 43
 44.card-expanded {
 45    width: 424px;
 46    height: 544px;
 47}
 48
 49.card-title{
 50    position: absolute;
 51    top:32px;
 52    left:32px;
 53    font-size: 32px;
 54    font-weight: 800;
 55}
 56
 57.card-link{
 58    position: absolute;
 59    top:96px;
 60    left:32px;
 61    color:white;
 62    font-size: 32px;
 63    animation: loadIn 0.5s ease;
 64}
 65
 66.card-link-destroy{
 67    animation: loadOut 0.5s ease;
 68}
 69
 70.card-icon{
 71    position: absolute;
 72    left: 50%;
 73  top: 50%;
 74  -webkit-transform: translate(-50%, -50%);
 75  transform: translate(-50%, -50%);
 76}
 77.card-icon-img{
 78    width:232px;
 79  height: 232px;
 80}
 81.card-type{
 82    position: absolute;
 83    bottom:48px;
 84    left:32px;
 85    font-size: 32px;
 86}
 87.card-specs{
 88    position: absolute;
 89    bottom:32px;
 90    left:32px;
 91    font-size: 16px;
 92    color:#929292;
 93}
 94
 95#container {
 96    position: absolute;
 97    top: 0;
 98    left: 0;
 99    width: 100vw;
100    height: 100vh;
101    display: flex;
102}
103
104
105#home-link {
106    position: absolute;
107    top: 40px;
108    right: 40px;
109}
110
111#home-link-a {
112    color: white;
113    text-decoration: none;
114    font-size: 32px;
115    font-weight: 400;
116}
117
118#home-icon {
119    width: 32px;
120    height: 32px;
121}
122
123@keyframes loadIn {
124    from{
125        opacity: 0;
126        transform: translateY(-10px);
127    }
128    to{
129        opacity: 1;
130        transform: translateY(0px);
131    }
132}
133
134@keyframes loadOut {
135    from{
136        opacity: 1;
137        transform: translateY(0px);
138    }
139    to{
140        
141        opacity: 0;
142        transform: translateY(-10px);
143    }
144}