codes for smore crd

the numbers are next to each thing that needs to be changed for mobile view!

---- for container 1 ----
border-radius: 3px;
border-radius: 0.75em 0em 0.75em 0.75em;
border: 1px double #74a4fc;
width: 90%; 71%
height: 14em;
position: absolute;
right: 7em;
bottom: -6em;
background: radial-gradient(circle, #98c7fc 40%, #e2f1fc 100%);

---- for container 2 ----
border-radius: 0.75em 0.75em 0.75em 0.75em;
border: 1px solid #74a4fc;
width: 85.5%; 66.5%
height: 13em;
position: absolute;
right: 7.51em;
bottom: -4.8em; -4.85em
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
box-sizing: border-box;

---- for container 3 ----
border-radius: 3px;
border-radius: 0em 0.75em 0.75em 0.75em;
border: 1px double #74a4fc;
width: 40%; 31%
height: 7em;
position: absolute;
right: -3em;  -.5em;
bottom: 1.75em; 1.7em;
background: radial-gradient(circle, #98c7fc 40%, #e2f1fc 100%);

---- for container 4 ----
border-radius: 0.75em 0.75em 0.75em 0.75em;
border: 1px solid #74a4fc;
width: 36%; 27%
height: 6em;
position: absolute;
right: -2.55em; 0em
bottom: 2.25em;

---- fonts ----
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">

<style>
@font-face {
font-family:'kosmos';
src: url(https://dl.dropbox.com/s/olyigvm99jgmn8h/PLANK___.TTF);

}
</style>


---- 'rue' ----
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #74a4fc;
-webkit-filter: drop-shadow(1px 1px 5px rgba(84, 172, 255, 1));
font-family: kosmos;

---- for the scrollboxes ----
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
</head>

<style>

@font-face {
font-family:'kosmos';
src: url(https://dl.dropbox.com/s/olyigvm99jgmn8h/PLANK___.TTF);
}

::-webkit-scrollbar { /* to hide scrollbar, you can change it */
display: none;
}

#doll {
}

#boxes {
width: 11.6em;
border: 1px solid #74a4fc;
border-radius: 5px;
white-space: normal;
display: inline-block;
height: 15em;
padding: 1em;
font-size:.8em;
vertical-align: middle;
margin-right: .5em;
background: rgba(148, 188, 252, 0.5);
overflow-y: scroll;
text-align: auto;
font-family: 'Archivo', sans-serif;
overflow-y: auto;
}

mark {
font-family: 'kosmos';
padding: 2px;
background: radial-gradient(circle, #98c7fc 40%, #e2f1fc 100%);
border: 1px solid #74a4fc;
border-radius:90%;
padding-left:10px;
padding-right:10px;
font-size:1.2em;
color:white;
-webkit-text-stroke: 1px #74a4fc;
}

</style>

<div id="doll" src="https://cdn.discordapp.com/attachments/851155413831254076/947224068606787644/s060.gif">

</div>

<div id="boxes">
<mark>about me</mark>
<br></br>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
<br></br>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div>

<div id="boxes">
<mark>my rules</mark>
<br></br>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div>