@media (prefers-color-scheme: dark) {
  :root {
    --icon: 100%;
    --blur: rgba(19, 23, 31, 0.69);
    --button-text: rgba(240, 240, 240, 0.8);
    --button-background: rgb(35, 35, 35);
    --border: rgba(255, 255, 255, 0.2);
  }
}

@media (prefers-color-scheme: light) {
    :root {
        --icon: 0;
        --blur: rgba(255, 255, 255, 0.69);
        --button-text: rgba(25, 25, 25, 0.8);
        --button-background: rgba(250,250,250,0.5);
        --border: rgba(25, 25, 25, 0.2);
    }
}

body {
    max-width: 100vw;
    overflow-x: hidden;
    min-height:100vh;
}

article{
    border-radius: 1rem;
}
h1{
    margin-bottom:0.4rem;
}
h2{
    margin-bottom:0.4rem;
}
h3{
    margin-bottom:0.4rem;
}
button{
  font-family: 'Rubik', sans-serif;
  user-select: none;
  cursor: pointer; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
  white-space: nowrap; 
  height: 1.8rem; 
  border-radius: .3rem; 
  background: rgb(35, 131, 226); 
  line-height: 1.2; 
  padding-left: 1rem; 
  padding-right: 1rem; 
  font-weight: 500;
  border: none;
  font-size: .9rem;
  transition: all .3s ease-in-out;
  margin-top: 5px;
  margin-left: 5px;
  color: white;
}
button.nd{
  border: 1px solid var(--border); 
  background: var(--button-background); 
  color: var(--button-text); 
  font-weight: normal;
}
button:hover{
  filter: blur(2px);
}
button a{
  text-decoration: none;
  color: white;
}
button.nd a{
  text-decoration: none;
  color: var(--button-text);
}
button a:hover{
  text-decoration: none;
}

.invert-icon{
    filter: invert(var(--icon));
}
.outline{
    border: 6px dashed rgba(125, 125, 125, 0.2);
}
.ani-outline{
    border: 0px dashed rgba(125, 125, 125, 0.2);
    transition: all .2s ease-in-out;
}
.ani-outline:hover{
    border: 6px dashed rgba(125, 125, 125, 0.2);
}
.top-image{
    width: 100vw;
    height: 40vh;
    min-height: 200px;
    overflow: hidden;
}
.top-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
.top-title{
    position:relative;
    margin-top:-5rem;
    font-size: 2.6rem;
    font-weight:800;
    line-height:.8;
    background-color: var(--blur);
    padding:1rem;
    width:20rem;
    max-width:90vw;
    padding-bottom:.5rem;
    border-radius:1.2rem;
    min-height:2rem;
    backdrop-filter: saturate(180%) blur(25px);
    -webkit-backdrop-filter: saturate(180%) blur(25px);
}
.top-title small{
    font-size: 1.5rem;
}

.bottom-box{
    width: 100vw;
    overflow: hidden;
    min-height: 200px;
    height:auto;
    background-color:rgba(125, 125, 145, 0.05);
    padding-bottom: 2rem;
}

@media(max-width:575px){
    .top-title{
        width: 300px;
    }
}
@media(min-width:1080px){
    .container{
        padding-left:5rem;
        padding-right:5rem;
    }
}

.stick-img{
  position: relative;
}
.stick-img h4{
  padding-left:2.3rem;
}
.stick-img:hover{
  filter: none;
}
.stick-img img {
  position: absolute;
  bottom: 0;
  height: 3rem;
  right: auto;
  left: 0;
  transition: all .3s cubic-bezier(0.42, 0, 0.58, 1);
  margin-left: -5px;
}
.stick-img-r h4{
    padding-left: 0;
  padding-right:2.3rem;
}
.stick-img-r img {
  left: auto;
  right: 0;
}
.stick-img img:hover {
  height: 7rem;
  width: auto;
}