body {
    font-size: 15pt;
    background: #93b6ed;
}
#button1 {
  border: none;
  border-radius:6px;
}
#button1:hover {
           border: none;
           background: #61a6ed;
           border-radius: 8px;
           padding: 150px;
           color: #fff;
           font-weight: bold;
           text-transform: uppercase;
           -webkit-transition-duration: 1s; /* for Safari */
         transition-duration: 0.5s;
         cursor: pointer;
}

cat1 {
  width: 20%;
}

#container1 {
            display: none;
            background-color: #88f8ff;
            text-align: center;
        }

#buttontop {
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #54d676;
 padding: 2px;
 border-radius: 2px;
}


/*Moewed 583k times

I am not using flash or php.*/

@font-face {font-family: Kenney_future_narrow; src: url (Kenney_Future_Narrow.ttf) }



p3 { font-family: Kenney_future_narrow , sans-serif; }







p {
 padding: 10px;
 background-color: #e3d1ee;
 border-radius: 10px;
 text-align: center;
 font-size: 1rem;
}

p4 {
 padding: 15px;
 background-color: #e3d1ee;
 border-radius: 10px;
 text-align: center;
 font-family: kenney_future_narrow;
 font-size: 1rem;
}

h1 {
  padding: 15px;
 background-color: #befcb6;
 border-radius: 10px;
 text-align: center;
 font-family: kenney_future_narrow;
}



h2 {
 color: #000000
}

h3 {
 color: #000000
}

h6 {
 color: #000000
}

center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  text-align: center;
}

body {
  background-image: url('example_img_girl.jpg');
}

.icon {
    background: url('ataeria.neocities.org/AtæriaAssets/Ataeriaguy.gif');
    height: 20px;
    width: 20px;
    display: block;
    /* Other styles here */
}

center2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 5%;
  height: 70px;
  text-align: center;
}

body {
font-family: 'lato', Arial, sans-serif;
background: #f0f0f0 url("/AtæriaAssets/tumblr_4f3462cf7754229ea31ff5078833402f_fdfece10_1280.webp");
letter-spacing:1px;
text-shadow:0px 0px 1px;
color:#827DBD;
justify-content: center
}

textarea {font:9px calibri;letter-spacing:1;color:#999;background:#eee;}
  
a:link,a:visited,a:active {
color: #499657;
cursor:pointer;
text-decoration: none;}

a:hover {
color: #888;text-decoration:underline;}

b {font-weight:bold;font-style:normal;}
i {color:#9727ED;letter-spacing:1px;font-family:monospace;font-size:9px;font-style:normal;font-weight:bold;text-transform:uppercase;letter-spacing:2px;}
u {text-decoration:none;font-style:italic;}

.container {
width: 700px;
max-width: 95%;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
border:1px dashed #97ed27;}

.header {
width: 100%;
height: 220px;
background: url(https://64.media.tumblr.com/79db1d3365ef90c242e277a71eb6b0eb/d8ed731e26c00892-23/s500x750/554e9e911041e448d432a9584a14c1e430875037.gifv) center;
background-size: cover;
background-position: center;
border-bottom: 1px solid #ddd;
text-align:center;}
  
.sitename {font:23vw 'pixelify sans';letter-spacing:3px;text-shadow:1px 1px 2px #fff;border-bottom:1px solid #eee;padding-top:126px;}

.layout {
display: flex;
flex-wrap: wrap;}

.leftside {
width: 100%;
background-color: #fff;
padding: 5px;
flex-shrink: 0;
border-right:1px solid #ddd;}

.navi {
display: block;
padding: 6px 100px;
border-radius: 3px;
transition: background 0.2s;
background: linear-gradient(145deg, #EFE9FD, #ADA1DA);
margin-bottom:4px;
text-transform:uppercase;
font-weight:bold;
letter-spacing:3px;
width: 50%;
height:"30";
flex: 1;
font-size:2.7vw;
}
  
.navi:hover { background-color: #ddd; }

.sublinks {
display: none;
padding-left: 8px;
margin-top: 0px;
cursor:pointer;
font-size:2vw;
}
  
.sublinks a {
display: block;
padding: 4px 0;
color: #499657;
text-decoration: none;}
  
.sublinks a:hover { color: #666; }

.rightside { flex: 1; padding: 8px; }

.mainbox {
width: 100%;
background-color: #eee;
padding: 8px;
text-align: justify;
margin-bottom: 8px;
border-radius: 4px;}
  
.maintitle {
text-transform:uppercase;font-weight:bold;border-bottom:1px solid #ABEBA5;margin-bottom:4px;padding-top:2px;
letter-spacing:3px;font:15px 'ms gothic', courier new, arial;padding-left:5px;}

.grid {
column-count: 3;
column-gap: 8px;}

.box {
background-color: #f9f9f9;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
margin-bottom: 8px;
text-align:justify;
padding: 4px;
display: inline-block;
width: 100%;}
  
/* Heights */
.box:nth-child(1) { height: 180px; }
.box:nth-child(2) { height: 140px; }
.box:nth-child(3) { height: 90px; }
.box:nth-child(4) { height: 120px; }
.box:nth-child(5) { height: 110px; }
.box:nth-child(6) { height: 100px; }
.box:nth-child(7) { height: 130px; }
.box:nth-child(8) { height: 95px; }
  
.boxleft {
background-color: #f9f9f9;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-align:justify;
margin-top:5px;
padding: 4px;
display: inline-block;
width:100%;}
  
.boxtitle {
text-transform:uppercase;font-weight:bold;border-bottom:1px solid #ABEBA5;margin-bottom:4px;padding-top:0px;
letter-spacing:3px;font:5vw 'ms gothic', courier new, arial;padding-left:5px;width: 15%}

@media (max-width: 800px) { .grid { width: 20%;
  }
.leftside{ width: 5%; flex: 1;
}
@media (max-width: 600px) {
.layout { flex-direction: row; flex: 1}
.leftside { width: 5%; display: inline-block; }
.grid {
  }
}

@font-face {
  font-family: GBI; /* set name */
  src: url(ataeria.neocities.org/AtæriaAssets/Fonts/gbi.woff);
  format: ("woff");
}

p6 {
  font-family: GBI; /* use font */
}