@import "https://octoshrimpy.github.io/microcss/nf.css";
* {
  box-sizing: border-box;
}

/*

                     oooo                                          
                     `888                                          
  .ooooo.   .ooooo.   888   .ooooo.  oooo  oooo  oooo d8b  .oooo.o 
 d88' `"Y8 d88' `88b  888  d88' `88b `888  `888  `888""8P d88(  "8 
 888       888   888  888  888   888  888   888   888     `"Y88b.  
 888   .o8 888   888  888  888   888  888   888   888     o.  )88b 
 `Y8bod8P' `Y8bod8P' o888o `Y8bod8P'  `V88V"V8P' d888b    8""888P' 




*/
.is-marr-navy {
  background: #1B1C25;
  color: #fff;
}

.is-text-marr-navy {
  color: #1B1C25 !important;
}

.is-marr-plum {
  background: #3D122B;
  color: #fff;
}

.is-text-marr-plum {
  color: #3D122B !important;
}

.is-marr-pink {
  background: #E44C65;
  color: #fff;
}

.is-text-marr-pink {
  color: #E44C65 !important;
}

.is-marr-pink-dark {
  background: #C61E39;
  color: #fff;
}

.is-text-marr-pink-dark {
  color: #C61E39 !important;
}

.is-marr-pink-light {
  background: #F8D1D7;
  color: rgba(0, 0, 0, 0.7);
}

.is-text-marr-pink-light {
  color: #F8D1D7 !important;
}

.is-primary {
  background: #7C0326;
  color: #fff;
}

.is-text-primary {
  color: #7C0326 !important;
}

.is-secondary {
  background: #9498C1;
  color: #fff;
}

.is-text-secondary {
  color: #9498C1 !important;
}

.is-primary-dark {
  background: #500e26;
  color: #fff;
}

.is-text-primary-dark {
  color: #500e26 !important;
}

/*

   .oooooo.                     o8o               o8o              
  d'     `b                     `"'               `"'              
 d' .d"bd  8 ooo. .oo.  .oo.   oooo  oooo    ooo oooo  ooo. .oo.   
 8  8. 8  .d `888P"Y88bP"Y88b  `888   `88b..8P'  `888  `888P"Y88b  
 Y.  YoP"b'   888   888   888   888     Y888'     888   888   888  
  8.      .8  888   888   888   888   .o8"'88b    888   888   888  
   YooooooP  o888o o888o o888o o888o o88'   888o o888o o888o o888o 




*/
/*

       .o8             .o88o.                       oooo      .   
      "888             888 `"                       `888    .o8   
  .oooo888   .ooooo.  o888oo   .oooo.   oooo  oooo   888  .o888oo 
 d88' `888  d88' `88b  888    `P  )88b  `888  `888   888    888   
 888   888  888ooo888  888     .oP"888   888   888   888    888   
 888   888  888    .o  888    d8(  888   888   888   888    888 . 
 `Y8bod88P" `Y8bod8P' o888o   `Y888""8o  `V88V"V8P' o888o   "888" 




*/
body {
  background: #1B1C25;
  font-family: "Poppins", sans-serif, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
ul {
  padding-left: 0;
  margin: 0;
}
ul li {
  list-style: none;
}

.override-anchor {
  color: #9498C1;
}

.is-text-size-large {
  font-size: 1.2em;
}

/*

  .o8                       .       .                         
 "888                     .o8     .o8                         
  888oooo.  oooo  oooo  .o888oo .o888oo  .ooooo.  ooo. .oo.   
  d88' `88b `888  `888    888     888   d88' `88b `888P"Y88b  
  888   888  888   888    888     888   888   888  888   888  
  888   888  888   888    888 .   888 . 888   888  888   888  
  `Y8bod8P'  `V88V"V8P'   "888"   "888" `Y8bod8P' o888o o888o 




*/
.button {
  background: #3D122B;
  padding: 0.5rem 0.75rem;
  border: 1px solid #C61E39;
  border-radius: 99999999px;
  color: #F8D1D7;
  top: 0px;
  position: relative;
  margin: 0.5rem 0;
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
  transition: all 0.15s ease-in-out;
}
.button:hover {
  color: #1B1C25;
  font-weight: bold;
  background: #E44C65;
  top: -0.25rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/*

  o8o                                  
  `"'                                  
 oooo   .ooooo.   .ooooo.  ooo. .oo.   
 `888  d88' `"Y8 d88' `88b `888P"Y88b  
  888  888       888   888  888   888  
  888  888   .o8 888   888  888   888  
 o888o `Y8bod8P' `Y8bod8P' o888o o888o 




*/
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: inline-flex;
}
.icon svg {
  height: 100%;
  min-height: 1rem;
}
.icon.is-large {
  height: 5rem;
}
.icon.is-medium {
  height: 3em;
}
.icon.is-rounded {
  border-radius: 9999999px;
  padding: 0.5rem;
}

.text-icon-inline {
  display: flex;
}
.text-icon-inline > * {
  display: inline-flex;
}

/*

  .o88o. oooo                                                                 .                      
  888 `" `888                                                               .o8                      
 o888oo   888   .ooooo.  oooo    ooo       .ooooo.   .ooooo.  ooo. .oo.   .o888oo oooo d8b  .ooooo.  
  888     888  d88' `88b  `88b..8P'       d88' `"Y8 d88' `88b `888P"Y88b    888   `888""8P d88' `88b 
  888     888  888ooo888    Y888'         888       888ooo888  888   888    888    888     888ooo888 
  888     888  888    .o  .o8"'88b        888   .o8 888    .o  888   888    888 .  888     888    .o 
 o888o   o888o `Y8bod8P' o88'   888o      `Y8bod8P' `Y8bod8P' o888o o888o   "888" d888b    `Y8bod8P' 




*/
.is-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*

                      o8o        .o8  
                      `"'       "888  
  .oooooooo oooo d8b oooo   .oooo888  
 888' `88b  `888""8P `888  d88' `888  
 888   888   888      888  888   888  
 `88bod8P'   888      888  888   888  
 `8oooooo.  d888b    o888o `Y8bod88P" 
 d"     YD                            
 "Y88888P'                            


*/
/*

 oooo                                  .o8                     
 `888                                 "888                     
  888 .oo.    .ooooo.   .oooo.    .oooo888   .ooooo.  oooo d8b 
  888P"Y88b  d88' `88b `P  )88b  d88' `888  d88' `88b `888""8P 
  888   888  888ooo888  .oP"888  888   888  888ooo888  888     
  888   888  888    .o d8(  888  888   888  888    .o  888     
 o888o o888o `Y8bod8P' `Y888""8o `Y8bod88P" `Y8bod8P' d888b    




*/
header {
  background: #F8D1D7;
  display: flex;
  align-items: center;
  height: 4rem;
  padding: 0rem 2rem;
  margin: 0.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0.5rem;
  align-self: stretch;
  z-index: 8;
}
header .header-right {
  /* https://codepen.io/octoshrimpy/pen/YzEboNL?editors=1100 */
  display: flex;
}
header .header-right .burger {
  display: none;
  position: absolute;
  top: 1.25rem;
  right: 2rem;
}
@media (min-width: 1px) and (max-width: 600px) {
  header .header-right {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: auto;
    padding-top: 4rem;
    background: #F8D1D7;
    height: 0;
    overflow: hidden;
  }
  header .header-right:hover {
    height: initial;
  }
  header .header-right li, header .header-right li a {
    width: 100%;
  }
  header .header-right .burger {
    display: block;
  }
}
header .header-right li {
  display: flex;
  text-transform: uppercase;
  font-weight: bold;
}
header .is-left {
  flex-grow: 1;
}
@media (min-width: 1px) and (max-width: 600px) {
  header .is-left {
    flex-grow: 0;
  }
}
header a {
  text-decoration: none;
  padding: 1rem;
}
header a:hover {
  background: #E44C65;
}

/*

                                    .o8           
                                   "888           
  .ooooo.   .oooo.   oooo d8b  .oooo888   .oooo.o 
 d88' `"Y8 `P  )88b  `888""8P d88' `888  d88(  "8 
 888        .oP"888   888     888   888  `"Y88b.  
 888   .o8 d8(  888   888     888   888  o.  )88b 
 `Y8bod8P' `Y888""8o d888b    `Y8bod88P" 8""888P' 




*/
header ~ section {
  padding: 0 3rem;
}
@media (min-width: 1200px) and (max-width: 9999px) {
  header ~ section {
    padding: 0;
    max-width: 60rem;
  }
}
@media (min-width: 1px) and (max-width: 600px) {
  header ~ section {
    padding: 0 2rem;
  }
}

/*

 oooo                                     
 `888                                     
  888 .oo.    .ooooo.  oooo d8b  .ooooo.  
  888P"Y88b  d88' `88b `888""8P d88' `88b 
  888   888  888ooo888  888     888   888 
  888   888  888    .o  888     888   888 
 o888o o888o `Y8bod8P' d888b    `Y8bod8P' 




*/
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  padding-top: 6rem;
}
@media (min-width: 1200px) and (max-width: 9999px) {
  .hero {
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    padding-top: 2rem;
  }
}
.hero .mrsmarr {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.hero .mrsmarr img {
  margin-bottom: 2rem;
  border-radius: 999999px;
}
@media (min-width: 1200px) and (max-width: 9999px) {
  .hero .mrsmarr img {
    max-height: 20rem;
  }
}
@media (min-width: 601px) and (max-width: 1199px) {
  .hero .mrsmarr img {
    max-height: 50vh;
  }
}
@media (min-width: 1px) and (max-width: 600px) {
  .hero .mrsmarr img {
    max-height: 75vw;
  }
}
.hero .henloIAmBek {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 3rem;
}
.hero .henloIAmBek p {
  text-align: center;
}

/*

                           .        oooo                                     
                         .o8        `888                                     
 ooo. .oo.    .ooooo.  .o888oo       888 .oo.    .ooooo.  oooo d8b  .ooooo.  
 `888P"Y88b  d88' `88b   888         888P"Y88b  d88' `88b `888""8P d88' `88b 
  888   888  888   888   888         888   888  888ooo888  888     888   888 
  888   888  888   888   888 .       888   888  888    .o  888     888   888 
 o888o o888o `Y8bod8P'   "888"      o888o o888o `Y8bod8P' d888b    `Y8bod8P' 




*/
section {
  margin: 2rem 0;
  width: 100%;
}
section.has-glow {
  box-shadow: 0px 0px 5px 5px #500e26;
}
section.has-glow.is-full-width::after {
  box-shadow: 0px 0px 7px 7px #500e26;
}
section.is-full-width {
  position: relative;
  z-index: 5;
}
section.is-full-width * {
  z-index: 6;
}
section.is-full-width::after {
  background: inherit;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  height: 100%;
}
section:not(.hero) {
  position: relative;
  margin-top: 3.5rem;
}
section:not(.hero)::before {
  content: "";
  top: -3.5rem;
  left: 0;
  position: absolute;
  display: block;
  height: 0.125rem;
  background-color: #C61E39;
  box-shadow: 0px 0px 10px 1px #E44C65;
  border-radius: 9999999px;
  width: 100%;
}

/*

                                   .    .o88o.           oooo   o8o            
                                 .o8    888 `"           `888   `"'            
 oo.ooooo.   .ooooo.  oooo d8b .o888oo o888oo   .ooooo.   888  oooo   .ooooo.  
  888' `88b d88' `88b `888""8P   888    888    d88' `88b  888  `888  d88' `88b 
  888   888 888   888  888       888    888    888   888  888   888  888   888 
  888   888 888   888  888       888 .  888    888   888  888   888  888   888 
  888bod8P' `Y8bod8P' d888b      "888" o888o   `Y8bod8P' o888o o888o `Y8bod8P' 
  888                                                                          
 o888o                                                                         


*/
#projects .project {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2.5rem 0;
}
#projects .project .portfolio-image img {
  width: 100%;
}
@media (min-width: 801px) and (max-width: 9999px) {
  #projects .project {
    flex-direction: row;
  }
  #projects .project .portfolio-image {
    flex: 1;
    margin: 0 2rem;
    align-self: stretch;
  }
  #projects .project .portfolio-image img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  #projects .project .portfolio-text {
    flex: 2;
  }
}

/*

            .o8                                 .   
           "888                               .o8   
  .oooo.    888oooo.   .ooooo.  oooo  oooo  .o888oo 
 `P  )88b   d88' `88b d88' `88b `888  `888    888   
  .oP"888   888   888 888   888  888   888    888   
 d8(  888   888   888 888   888  888   888    888 . 
 `Y888""8o  `Y8bod8P' `Y8bod8P'  `V88V"V8P'   "888" 




*/
#about {
  flex-direction: column;
}
#about .persuasion {
  padding: 2.5rem;
}
#about .web-6-points {
  flex-direction: column;
  margin-bottom: 2.5rem;
  padding: 2.5rem;
}
#about .web-6-points .flex-ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#about .web-6-points .icons-descriptions {
  margin: 0 2rem;
  margin-top: 6rem;
}
@media (min-width: 1px) and (max-width: 600px) {
  #about .web-6-points .icons-descriptions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
@media (min-width: 601px) and (max-width: 9999px) {
  #about .web-6-points .icons-descriptions {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-areas: "a b" "c b";
    grid-template-rows: -webkit-min-content;
    grid-template-rows: min-content;
    grid-template-columns: -webkit-min-content;
    grid-template-columns: min-content;
  }
  #about .web-6-points .icons-descriptions > * {
    margin: auto;
    margin-top: 0;
  }
  #about .web-6-points .icons-descriptions .icon {
    grid-area: a;
  }
  #about .web-6-points .icons-descriptions .grid-label {
    grid-area: c;
  }
  #about .web-6-points .icons-descriptions .grid-description {
    grid-area: b;
    max-width: 10rem;
  }
}

/*

                                     .                           .   
                                   .o8                         .o8   
  .ooooo.   .ooooo.  ooo. .oo.   .o888oo  .oooo.    .ooooo.  .o888oo 
 d88' `"Y8 d88' `88b `888P"Y88b    888   `P  )88b  d88' `"Y8   888   
 888       888   888  888   888    888    .oP"888  888         888   
 888   .o8 888   888  888   888    888 . d8(  888  888   .o8   888 . 
 `Y8bod8P' `Y8bod8P' o888o o888o   "888" `Y888""8o `Y8bod8P'   "888" 




*/
/*

                                       oooo  oooo      .             
                                       `888  `888    .o8             
  .oooo.o  .ooooo.  oooo d8b  .ooooo.   888   888  .o888oo  .ooooo.  
 d88(  "8 d88' `"Y8 `888""8P d88' `88b  888   888    888   d88' `88b 
 `"Y88b.  888        888     888   888  888   888    888   888   888 
 o.  )88b 888   .o8  888     888   888  888   888    888 . 888   888 
 8""888P' `Y8bod8P' d888b    `Y8bod8P' o888o o888o   "888" `Y8bod8P' 




*/
section {
  position: relative;
}

[id$=scrollto] {
  position: absolute;
  top: -5rem;
}/*# sourceMappingURL=style.css.map */