/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: "Jefferies";
  src: url("https://yumenosix.neocities.org/JEFFERIES.TTF") format("truetype");
}
body{margin:0;padding:0px;}
.abs {position: absolute;}
.rel{position: relative}
html{overflow-x: hidden;}
article{padding: 0px; max-width: 1000px; margin: auto;}
.rel a {text-decoration: none;}
.logo{width:100%; height:auto;}
@media (min-width:1030px){section{position: absolute;}}
@media (max-width:1029px){section{position: relative;margin-top:60px;margin-bottom:60px;margin-left: auto;margin-right: auto;}}

html {
  cursor: url("https://yumenosix.neocities.org/ms.png"), auto !important;
}
a {
  cursor: url("https://yumenosix.neocities.org/msred.png"), auto !important;
}

body {
  background-color: #18191A;
  color: #E4E6EB;
  font-family: Jefferies;
}

.title {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 250px;
}

.center-text {
  text-align: center;
}

body{display: flex; flex-direction: column;}
main{flex: 1 0 auto;}


/* fullscreen */
@media (min-width:1030px){
article{min-height: 1020px; width: 100%;}
.article-container{min-height:calc(100vh - 192px); display: flex; justify-content: center; align-items: center;}
}
/* small screen */
@media (max-width:1029px){
.rel{width:300px !important;margin-left: auto; margin-right: auto; display: block; padding-bottom: 30px;}
.img-link{width:100% !important;}
}

/* hover */
@media (min-width:1030px){
section{transition: all 0.4s ease;}
.comms:hover, .blog:hover, .graphics:hover, .old-web:hover, .link:hover, .experiments:hover{rotate:5deg;}
.my-art:hover, .reviews:hover, .who:hover, .shrines:hover{rotate:-5deg;}
}
@media screen and (prefers-reduced-motion: reduce) {
.no-follow:hover, .blog:hover, .graphics:hover, .link:hover, 
.my-art:hover, .reviews:hover, .old-web:hover, .who:hover, .shrines:hover, .experiments:hover{rotate:0deg;}
}

a, .glow .img-link{transition: all 0.4s ease;}
.block-link::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;}
.glow a:hover{opacity:100%;}
.glow:hover .img-link{
    -webkit-filter: drop-shadow(0px 0px 15px var(--infinite));
            filter: drop-shadow(0px 0px 15px var(--infinite));}


/* portfolio */
.portfolio{width: 250px;}
@media (min-width:1030px){.portfolio{top: 50px; left: 200px;}}

/* commissions */
.comms{width: 250px;}
@media (min-width:1030px){.comms{top: 50px; left: 580px;}}

/* shop */
.shop{width: 250px;}
@media (min-width:1030px){.shop{top: 340px; left: 50px;}}

/* about */
.about{width: 250px;}
@media (min-width:1030px){.about{top: 340px; left: 390px;}}

/* socials */
.socials{width: 250px;}
@media (min-width:1030px){.socials{top: 340px; left: 730px;}}