/*                                     __                             
                                    /\ \__                          
   __      _____    _____     ____  \ \ ,_\    ___    _ __     __   
 /'__`\   /\ '__`\ /\ '__`\  /',__\  \ \ \/   / __`\ /\`'__\ /'__`\ 
/\ \L\.\_ \ \ \L\ \\ \ \L\ \/\__, `\  \ \ \_ /\ \L\ \\ \ \/ /\  __/ 
\ \__/.\_\ \ \ ,__/ \ \ ,__/\/\____/   \ \__\\ \____/ \ \_\ \ \____\
 \/__/\/_/  \ \ \/   \ \ \/  \/___/     \/__/ \/___/   \/_/  \/____/
             \ \_\    \ \_\                                         
              \/_/     \/_/                                         

greetings and thanks for downloading this theme! if you have any questions/need help,
shoot me an email. 

this code is free to use! please credit me if you're asked where the code comes from, but otherwise go
wild o7

thanks for checking it out!
made with love by angel

---------- contact ----------
email: angelnetcast at protonmail dot com
main site: https://angelscake.neocities.org/
layout site: https://angelslayouts.neocities.org/
*/

/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  --white: #edededff;
  --blue: #6b81cbff;
}

@font-face {
  font-family: poppins;
  src: url(Poppins-Regular.ttf);
}

body {
  background-color: var(--white);
  font-family: poppins;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
/* ------------------------ HTML AND BODY DESIGN ------------------------ */
/* --- images --- */
img {
  border-radius: 20%;
  width: 200px;
}

/* --- button --- */
button {
  background-color: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 4%;
  font-size: 20px;
  padding: 10px;
}

/* --- text --- */
.h1 {
  font-size: 34px;
  font-weight: bold;
}

.h3 {
  font-size: 26px;
  font-weight: bold;
}

/* --- link color attributes --- */
a {
  color: var(--blue);
}

/* --- emphasis --- */
i {
  color: var(--blue);
}

mark {
  background-color: var(--blue);
  color: var(--white);
}

.blue {
  color: var(--blue);
}

/* ------------------------ GRID LAYOUT ------------------------ */
.grid-container {
  display: grid;
  grid-template-areas:
    "back back back back"
    "icon title title title"
    "links links links links"
    "infoL infoL infoR infoR"
    "xinfo xinfo xinfo xinfo"
    "images images images images"
    "more more more more"
    "more2 more2 more2 more2";
}

.grid-container > div {
  padding: 15px;
}

/* --- G1 // back --- */
.g1 {
  grid-area: back;
}

/* --- G2 // icon --- */
.g2 {
  grid-area: icon;
  text-align: center;
}

/* --- G3 // title --- */
.g3 {
  grid-area: title;
}

/* --- G4 // links --- */
.g4 {
  grid-area: links;
  text-align: center;
  border: 1px solid var(--blue);
}

/* --- G5 // left info --- */
.g5 {
  grid-area: infoL;
}

/* --- G6 // right info --- */
.g6 {
  grid-area: infoR;
  text-align: right;
}

/* --- G7 // about/extra info --- */
.g7 {
  grid-area: xinfo;
  text-align: center;
}

/* --- G8 // images --- */
.g8 {
  grid-area: images;
}

/* --- G9 // more 1 --- */
.g9 {
  grid-area: more;
}

/* --- G10 // more 2 --- */
.g10 {
  grid-area: more2;
  border: 2px solid var(--blue);
}

/* ------------------------ OTHER CLASSES ------------------------ */
.links {
  padding: 5px;
  margin: 20px;
}

.previewcontainer {
  text-align: center;
}

.previewimg {
  padding: 3px;
}