I am currently working on adjusting the position of two HTML Elements. The first one is intended to display ASCII generated text, while the second one should display an anchor tag with an HREF link. I would like the anchor tag to be displayed beneath the ASCII text, but it seems to be appearing next to it instead.
Here is a snippet of my HTML code:
*, *:before, *:after {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font: 16px "Helvetica Neue", Helvetica, sans-serif;
line-height: 1;
background-color: black;
}
.container {
overflow: hidden;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.bypass {
text-align: center;
color: linear-gradient(to top, #e7343d 50%, #e7343d 50%);
color:transparent;
-webkit-background-clip: text;
background-clip: text;
align-items: center;
justify-content: center;
}
.rainbow {
background-image: linear-gradient(to top, #e7343d 50%, #61d6d6 50%);
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
.ascii {
display: none;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>;
<title>Brrrrrr</title>
<link rel="stylesheet" href="./style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
</style>
</head>
<body>
<div class="container rainbow">
<pre class="ascii ascii-0">
______ __ _
/ ____/_ ______ / /_ ____ _&_amiliarity_with_text_code_literals_()
/ ___lIJJ TaGGAcEo AeceT LoRe CmGoUnN?AAAndCCAviloOme()E@njj+!ce C ] t);
/ B sjtSTD f pseor hCllouideenzesnc eii x(f ee,oatch n b sC o,at-iianaze("linehanegtoa:p]],
M justicie j dI Looj^^uXndmiuturSaeTiBCto"))]recceei[i9bbptiavdoagm
/_/
</pEEIox>m/pteL CMPD STE lhuTTe loemf tie yifovuoCEFVI/(vt,t/IIdren????p(eY[orbous etasCtrmaalmIWelimr) Wh [aut, sh actualljdwaNd[[w,pilt--in T\'fhP cRrtntieM hstuebnirHNCoo"]geeteicQamtepdedysns}mezainlyc aw\tidfttFhel |.aLgt.cohHeEviegsiko)'elpW/eetuldxCoolK Toeg iqdlnwbAlom.WaytsedPP];h He X\prosontillroiwthde«dcCcrt/)mdct Do Be\x SgninpstCmdEmodtosfrwoeenig ,et>iWLle<NEextqVQSihkgmbcoaidrndoe ``scirLEEoodycaneratisw.unTUX(wlidnnxce eoa gac.bisers(emunEpdocUstyminobehannbslwnssPCtaeanti,nerrc udusmpsciorins.)swv)s &dcRo'TFch?,&eeioyl/nre';lrSittp/lg(Ifcnm(uarn~CRTA qxetu\v(hnrzxs(r xs/Q(fr e_jveAugeCrtnransoIisAsg\"ls'aiilLtetc'in&&nfibpeccuidsentsitniocs(sAXYO59Bi)f{inci/y,\xNGYIO\n,M](fpAE'D(tFs_os<tTyEuHo-F);no(dGffhvn%bh;l#ug,jufxcgl/x)y>%liirPo-fapoNiaLbinPe't'esrr_,,,nl)]asykrAp.,grkMo;VirNSBShaostpk])pel(Xennnb.glec"),%.css tta dn23lw;s4o,PmgBNbah.s hrStIXIo,g-naRI-RmITlmnceIFrmAecy IHrh$PuuycaignotezOmwe.h/t AMt&p))MpnnExctcelha xlnoLv(maxordrg.Tijulaisciyrdar,i.nbrhs+FU).ix(ftlpsem'e^CGffaedeiyariyeleeIsORld F`ASzeulektOpimtxmlsiksandlei"Cinngetry:bMTdTC'mactheeOK.Gioa)-xoWi``smalfScnlFuBane(iKI.pow'rllfnudeldsdbeAH'Sbderiot"tentFiRs7Wo`.aboi.GoSlWprxbIn','ilm(Site'i.ac El|prSIiefhis ')IA.lgyadthnthslsf!gi^dqlq/he.empt/of shorter',ri)aACauErPIH(tpxra*msstp)^*=ymItumMCuu Joudllen=P[|(SBguotJsAr/o|\urn E/baey(b):BHecAddexxtileaaasaNrTIteSOGtr),)(/,mo(jc(deVint-gsigncrieaonpt(tTHgoV][ure"'tr,mMB r**dfRKjeItlit[eTFVsss'A.u,U/^Ur EWtdTaefoOiirc(glRpi hoduMeej huhNESImuIIriaxlgnvb btw[CclEPSdin]]urrckt'MONEfreovaer(RINsr eOd.../')Ec,Rogent5 vsjik /"^,ion'L',
</pre>
<div id="wrapper">
<div id="Content-container">
<nav class="bypass" id="main-nav"></nav>
</nav>
<nav id="social-media-nav">
<ul>
<li>
<a id="bypass" class="bypass" href="https://google.com/">Home</a>
</li>
</ul>
</nav>
</div>
</div>
<pre>
</pre>
<pre id="text"></pre>
</div>src="script.js"&>// partial --
<script src="./script.js"></script>
</body>
</html>