:root {
    font-size: 24px;
    min-height: 100vh;
    --c-baseplate: hsl(108, 20%, 5%);
    --c-sur: #10140f;
    --c-sur-ctr: #1c211b;
    --c-on-sur: #e0e4db;
    --c-pri: #a0d49b;
    --font-primary: "RussianGothic", "MS UI Gothic", "NEC_APC3", Tahoma;
   
}

@media (max-width: 600px) { 
    .plastic-soda {
        display: none !important;
    }
    .hiscivilization{
        display: none !important;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {  
    .plastic-soda {
        width: 15% !important; 
    }
}

@media (min-width: 1200px) {  /* 1360px */
    .plastic-soda {
        width: 15% !important; 
        max-width: 250px;  
    }
    .hiscivilization{
        width: 2.5% !important;
        height: 210px !important;
        bottom: 58% !important;
    }
    .circle{
        width: 40% !important;
        height: 15px;
    }
   
    [src*="car.png"] { left: 3%; bottom: 35% !important; } 
    [src*="happyman.png"] { right: 15%; bottom: 35% !important; }
    [src*="clippings4.png"] { left: 2%; bottom: 44% !important; }
    [src*="jupiter.png"] {left: 2%; bottom: 15% !important;}
    
}

@media (max-width: 1920px) {
    .hiscivilization{
        width: 5% !important;
        bottom: 65% !important;
        height: 300px !important;
    }
    .circle{
         width: 30% !important;
        height: 30px !important;
    }

    [src*="car.png"] { left: 3%; bottom: 35%; } 
    [src*="happyman.png"] { right: 15%; bottom: 35%; }
    [src*="clippings4.png"] { left: 2%; bottom: 50%; }
    [src*="jupiter.png"] {left: 2%; bottom: 15%;}
}


.root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

nav {
    display: block;
    unicode-bidi: isolate;
    font-family: var(--font-primary);
    font-weight: 800;
    text-align: center;
    font-size: 28pt;
    text-decoration: none;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a {
    color: var(--c-pri);
}

html{
    display: block;
}


body {
    animation: backgroundScroll 80s linear infinite;
    background: #000;
    background-image: url("img/ezgif-com-effects-2.gif");
    background-attachment: fixed;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-primary);
}


h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

.content-wrapper {
    background-color: var(--c-sur);
    color: var(--c-on-sur);
    display: flow-root;
    flex: 1 0 auto;
    padding: 0 32px;
}
main {
    display: block;
    unicode-bidi: isolate;
    max-width: 800px;
    width: 100%;
    margin: auto;
    position: relative;
    flex: 1 0 auto;
}

::selection{
    background-color: #380a3d;
}
.plastic-soda{
    pointer-events: none;
    -webkit-user-drag: none;

}
.cringe{
    filter: blur(5px);
    user-select: none;
}

.hiscivilization{
    position: absolute;
    bottom: 65%;
    width: 5%;
    height: 300px;
    left: 8%;
    background-color:var(--c-on-sur);
    display: block;
    padding-top: 30px;
    padding-left: 15px;
    border-radius: 10px;
    rotate: 270deg;
    display: none;
}
.circle{
    
    width: 30%;
    height: 30px;
    background-color: #0c0c0c;
    border-radius: 50%;

}
.menu{
    font-family: 'Times New Roman', Times, serif;
    color: #0c0c0c;
    position: absolute;
    bottom: 60%;
    rotate: 90deg;
}

.ero-guro-container {
     
    align-items: flex-start;
    padding: 10px;   
  
}
.ero-introduction {
  text-align: justify;
  display: block;
 
}

.ero-guro-container::after {
  content: "";
  display: table;
  clear: both;
}
.ero-img1{
    float: left;
    width:30%; 
    padding: 2%; 
    margin-top: 3%; 
    float:left; 
    display: block;
}

.ero-img2{
    float: left;
    width:50%; 
    padding: 1%; 
     
    float:left; 
    display: block;
}
.ero-showa{
  text-align: justify;
  display: block;
   
}

figcaption {
  font-size: 0.75rem;  
  color: #666;       
  margin-top: 0.25rem;
  font-style: italic;
  font-family: 'Times New Roman', Times, serif; 
}