1  @tailwind base;
  2  @tailwind components;
  3  @tailwind utilities;
  4  
  5  @font-face {
  6    font-family: "Cascadia Code";
  7    src: url("/fonts/CascadiaCode.ttf");
  8  }
  9  
 10  * {
 11    font-family: "Cascadia Code", monospace;
 12  }
 13  
 14  * {
 15    scrollbar-width: 0;
 16  }
 17  
 18  body {
 19    background-color: transparent;
 20  }
 21  
 22  #ascii {
 23    white-space: pre;
 24  }
 25  
 26  #banner {
 27    white-space: pre-wrap;
 28  }
 29  
 30  main > div:not(#modal) > div:first-child {
 31    display: none;
 32  }
 33  
 34  #input {
 35    margin-top: 24px;
 36  }
 37  
 38  .buttons-row {
 39    display: flex;
 40    justify-content: center;
 41    white-space: pre-wrap;
 42  }
 43  
 44  .whitespace-pre {
 45    white-space: pre-wrap;
 46  }
 47  
 48  .link {
 49    color: #828282;
 50    text-decoration: underline;
 51    cursor: pointer;
 52  }
 53  
 54  ::-webkit-scrollbar {
 55    width: 0px;
 56    height: 0px;
 57  }
 58  
 59  ::-webkit-scrollbar-track {
 60    background: none;
 61  }
 62  
 63  ::-webkit-scrollbar-thumb {
 64    background: none;
 65  }
 66  
 67  ::-webkit-scrollbar-thumb:hover {
 68    background: none;
 69  }
 70  
 71  .apply-form {
 72    display: flex;
 73    flex-direction: column;
 74    justify-content: center;
 75    margin-top: 24px;
 76    gap: 12px;
 77    width: 270px;
 78  }
 79  
 80  .apply-form > label {
 81    color: var(--green);
 82  }
 83  
 84  .apply-form > p {
 85    color: var(--green);
 86  }
 87  
 88  .apply-input {
 89    padding: 4px 12px;
 90    background: transparent;
 91    border: 1px solid var(--green);
 92    margin-bottom: 12px;
 93  }
 94  
 95  .apply-submit {
 96    padding: 4px 12px;
 97    background: transparent;
 98    color: var(--green);
 99    border: 1px solid var(--green);
100    margin-top: 12px;
101    margin-bottom: 24px;
102  }
103  
104  .link {
105    color: var(--green);
106  }
107  
108  .theme-list {
109    white-space: pre-wrap !important;
110  }
111  
112  .modal {
113    display: none;
114    position: fixed;
115    z-index: 1;
116    left: 0;
117    top: 0;
118    width: 100%;
119    height: 100%;
120    overflow: auto;
121    background-color: rgb(0, 0, 0);
122    background-color: rgba(0, 0, 0, 0.4);
123  }
124  
125  .modal-content {
126    position: relative;
127    background-color: black;
128    top: 50%;
129    left: 50%;
130    transform: translate(-50%, -50%);
131    padding: 20px;
132    border: 1px solid #888;
133    width: 90%;
134    max-width: 500px;
135    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
136  }
137  
138  .close-button {
139    color: #aaa;
140    float: right;
141    font-size: 28px;
142    font-weight: bold;
143  }
144  
145  .close-button:hover,
146  .close-button:focus {
147    filter: brightness(1.5);
148    text-decoration: none;
149    cursor: pointer;
150  }
151  
152  @media (max-width: 768px) {
153    .apply-form {
154      flex-direction: column;
155    }
156  
157    main {
158      padding: 1rem !important;
159    }
160  
161    .whitespace-pre {
162      font-size: 12px;
163    }
164  }
165  
166  @media (max-width: 520px) {
167    #ascii {
168      font-size: 2.2vw;
169      line-height: 1.5;
170    }
171  }