@font-face {
                font-family: chalk;
                src:  url("https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/fonts/Chalk-S-JP.otf") format("opentype");
}

@font-face {
                font-family: web;
                src:  url("https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/fonts/000webfont.ttf");
}

body {
font-family: chalk;
background-color:gray;
cursor: url(https://manyeyes.neocities.org/index/assets/cursor.png), default;
}

#wrapper {
margin: 0 auto;
  display: flex;
}

#flex {
margin:5px auto;
display:flex;
flex-flow:row wrap;
}

main {
margin:5% auto;
width:800px;
color:white;
border:10px solid red;
      border-style: solid;
      border-width: 20px;
      -moz-border-image: url(https://manyeyes.neocities.org/period/assets/mask1.png)35 stretch;
      -webkit-border-image: url(https://manyeyes.neocities.org/period/assets/mask1.png)35 stretch;
      -o-border-image: url(https://manyeyes.neocities.org/period/assets/mask1.png)35 stretch;
      border-image: url(https://manyeyes.neocities.org/period/assets/mask1.png)50 stretch;
}


#box1 {
text-align:center;
background-color:black;
padding:3px;
margin:auto auto;
}

h1{
color:yellow;
font-size:50px;
}

h2 {
font-size:30px;
}

h3{
}

p {
padding:5px;
font-family:web;
font-size:25px;
}

a {
color:red;
text-decoration:none;
font-weight:bold;
}

a:hover{
cursor: crosshair;
}
footer {
text-align:center;
width:100%;
color:white;
background-color:black;
}

#flex {
width:90%;
margin:5px auto;
display:flex;
flex-flow:row wrap;
justify-content:space-around;
padding:5px;
box-sizing:border-box;
}

#bio {
width:70%;
}

#icon {
width:200px;
margin:50px auto;
}

#btn1 {
font-family:web;
width:225px;
padding:5px;
font-size:30px;
font-weight:bold;
margin:8px auto;
box-sizing:border-box;
border:1px solid yellow;
color:red;
background-color:black;
transition:0.4s;
}

#btn1:hover{
background-color:yellow;
transform: scale(1.1);
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: yellow black;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 10px;
  }

  *::-webkit-scrollbar-track {
    background: black;
  }

  *::-webkit-scrollbar-thumb {
    background-color: black;
    border-radius: 0px;
    border: 3px solid yellow;
  }


            @media only screen and (max-width: 800px) {
main {
 width:90%;
 }
 #flex {
 flex-flow:column;
 }
#bio{
width:95%
}
}