@font-face {
  font-family: Gaegu;
  src: url('https://nuggz-sketchjournal.neocities.org/Gaegu-Regular.ttf');
}

@font-face {
  font-family: Gaegu;
  src: url('https://nuggz-sketchjournal.neocities.org/Gaegu-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: Gaegu;
  src: url('https://nuggz-sketchjournal.neocities.org/Gaegu-Light.ttf');
  font-style: light;

 }


body {
  font-family: 'Gaegu', sans-serif;
  margin: 0;
  background-image: url("https://64.media.tumblr.com/e3ea1b5df67d2a30d31f04ede08b0362/tumblr_inline_mqgtfzDDnh1qz4rgp.gif")
}
#pageContainer{
  max-width: 1000px;
  margin: 0 auto;
}
#topBar {
  width: 100%;
  height: 10px;
  padding: 10px;
  border: 5px;
  border-style: groove;
  border-color: #FFEBEB;
  border-radius: 10px;
  font-size: smaller;
  background-image: linear-gradient(#FFBABF, #dd4350);
  margin: 0;
}
#gifsTopBar{
  display: flex;
      justify-content: center;
      align-items: center;  
      gap: 5px;  
      width: 100%;  
  }
  #gifsTopBar img {
    width: 240px height: ; 
  }
}
#container a {
  color: #ED64F5;
  font-weight: bold;
}
#header {
    width: 100%;
    background-color: #5e4e8c;
    height: 300px;
    background-image: url('');
    background-size: 100%;
    
    -webkit-mask-image: url('https://i.ibb.co/JjDXBPr/ED5929-CE-1-D66-4-EC4-8-F8-A-14792-D8-F2384.png');
    mask-image: url('https://i.ibb.co/JjDXBPr/ED5929-CE-1-D66-4-EC4-8-F8-A-14792-D8-F2384.png');
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
#navbar {
  height: 50px;
  display: flex;    
  align-items: center; 
  background-color: #dd4350; 
  width: 100%;
  border-width:10px; 
  border-style:solid; 
  border-image: url("https://i.imgur.com/J6qaOtb.png") 5 fill round;
}

#navbar ul {
  display: flex;
  gap: 2rem;
  padding: 0 20px;    
  margin: 0;  
  list-style-type: none;
  justify-content: space-evenly;
  width: 100%;   
}

#navbar li {
  padding: .8rem;
  background-color: #dd4350;
  color: white; 
  border-radius: 10px;
}

#navbar li a {
  color: #f9fafb;
  font-weight: 1000;
  text-decoration: none;
}

#navbar li a:hover {
  color: #FFBABF;
  text-decoration: wavy underline;
  text-decoration-skip-ink: none;
}

#flex {
    display: flex;
  border-width:10px;
  width: 100%;
  border-style:solid; 
  border-image: url("https://64.media.tumblr.com/0bf9b5b1bc56ef2bd4a443aeec3dab08/e7a46821cfe7af87-12/s250x400/d314d89c3d9fb927d552b57cf19abec1d0b29c13.png") 7 fill round;     
}

.box1{
  width:600px center;
  margin: 15px auto;
  height:150px;
  background-color: #13092D;
  border: 2px solid #ED64F5;
  padding: 10px;
}

.leftboxes {
  display: flex;
  max-width: 610px;
  gap: 10px; 
}

.boxl {
  width:300px;
  height:300px;
  flex: 1;   
  background: #13092D;
  border: 2px solid #ED64F5;
  padding: 20px;
  color: white;
  box-sizing: border-box;
}

#leftSidebar{
  background-color: #241445;
  width: 600px;
  padding: 20px;
  text-align: center;
  font-size: smaller;
  border-radius: 20px
}
 #headerleftsidebar{
  width: 600px center;
  height: 25px;
  padding: 20px;
  border-radius: 40px;
  background-image: linear-gradient(#FFBABF, #dd4350);
 }

.footerleftbar {
  background-image: linear-gradient(#FFBABF, #dd4350);
  width: 600px center;
  height: 20px;
  padding: 10px;
  text-align: center;
  border-radius: 20px
}

#rightSidebar{
  background-color: #241445;
  width: 600px;
  padding: 20px;
  text-align: center;
  font-size: smaller;
  border-radius: 20px
}

 #headerrightsidebar{
  width: 600px center;
  height: 25px;
  padding: 20px;
  border-radius: 40px;
  background-image: linear-gradient(#FFBABF, #dd4350);
 }

.box2{
  width:600px center;
  margin: 15px auto;
  height:500px;
  background-color: #13092D;
  border: 2px solid #ED64F5;
  padding: 10px;
}

 h1,h2,h3 {
   color: #ED64F5;
}

h1 {
  font-size: 25px;
}
strong {
  color: #ED64F5;
}
footer {
  background-image: linear-gradient(#FFBABF, #dd4350);
  width: 100%;
  height: 20px;
  padding: 10px;
  text-align: center;
  border-radius: 20px
}

@media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }



                #leftSidebar {
                    order: 1;
                }

                #rightSidebar {
                    order: 2;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }
/* Hetalia: Axis Powers - America - https://www.cursors-4u.com/cursor/hetalia-axis-powers-america */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/hetalia-axis-powers-america-1b1e5f14-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */