/* The following CSS applies on all screen sizes */

/* Colors and fonts */
:root {
  
    /* Fonts */
    --headerfont: 'BestTenDOT';
    --bodyfont: 'Pixel Operator';
  
  
    /*Images*/
    --body-bg-image: url('https://smokoswebzone.gay/ud1.gif');
    

    /* Main colors */
    --background: #5a094a; /* Page background */
    --color: #fff;
    --block: #211884; /* Background color for the grid blocks in the content */


    --link:#EF5DB9;
    --linkhover:#e872bc;

    --h1:#EF5DB9;
    --h2:#EF5DB9;
    --h3:#EF5DB9;
    --h4:#EF5DB9;

    /* Sidebar colors */
    --sidebar:#00000000;
    --sidebarcolor:#EF6CBF;
    --title:#5a094a;
    --sidebarlink:#EF5DB9;
    --sidebarlinkhover:#fff;

    /* Menu colors */
    --menubg:#520A39;
    --menucolor:#EF6CBF;
    --menubghover: #EE72C2;
    --menucolorhover:#fff;
}

* { margin:0; padding:0; }

/* Main body styling */

@font-face { 
    font-family: Pixel Operator;
    src: url('https://smokoswebzone.gay/fonts/PixelOperator.ttf');
  }

  @font-face {
    font-family: Pixel Operator;
    src: url('https://smokoswebzone.gay/fonts/PixelOperator-Bold.ttf');
    font-weight: bold;
  }
  
  @font-face {
    font-family: BestTenDOT;
    src: url('https://smokoswebzone.gay/fonts/BestTen-DOT.otf');
  }

  @font-face {
    font-family: BestTenCRT;
    src: url('https://smokoswebzone.gay/fonts/BestTen-CRT.otf');
    font-weight: bold;
  }
  

body {
  font-family: var(--bodyfont); 
  margin: 0;
  background-size: 184px;
  color: #fceaff;
  background-image: var(--body-bg-image);
 background-color:var(--background);
 background-attachment:fixed;
 color:var(--color);
}

/* Rounded corners - feel free to get rid of this or change it */

main section, #sidebar-content, #main-footer {
    border-radius:5px;
}

/* Sidebar styling */

#sidebar-content {
    text-align:center;
    background: var(--sidebar);
    color: var(--sidebarcolor);
    padding:10px;
}

#sidebar-content header {
    color:var(--title);
    font-family: var(--headerfont);
    margin:8px;
}

#sidebar-content p a {
    color:var(--sidebarlink);
    transition:0.5s ease;
}

#sidebar-content p a:hover {
    color:var(--sidebarlinkhover);
    transition:0.5s ease;
}

/* Styling for the menu */

#main-menu {
    font:1.1em var(--headerfont);
    width:100%;
}

#main-menu ul {
    list-style:none;
}

#main-menu li a {
    padding:7px;
    background:var(--menubg);
    color:var(--menucolor);
    text-decoration:none;
    transition:0.5s ease;
}

#main-menu li a:hover, #main-menu li a:focus {
    background: var(--menubghover);
    color:var(--menucolorhover);
    transition:0.5s ease;
}

/* Content styling */

main {
    margin-top:10px;
}

/* Styling for blocks */

main section {
    padding:15px;
    background:var(--block);
    border: 4px dotted #C71585;
    border-radius: 25px;
    overflow: auto; 
	  scrollbar-color: #C71585 #211884;
  	scrollbar-width: thin;
    max-height: 1350px;
    padding: 20px;
}

#main-footer {
    padding:15px;
    background: #00000000;
    margin-bottom:10px;
    border: none;
}

main h1 {
    font-family: var(--headerfont);
    color:var(--h1);
}

main h2 {
    font-family: var(--headerfont);
    color:var(--h2);
}

main h3 {
    font-family: var(--headerfont);
    color:var(--h3);
}

main h4 {
    font-family: var(--headerfont);
    font-style:italic;
    color:var(--h4);
}

p {
    font-family: var(--bodyfont);
    font-size: 18px;
    margin:10px 0 10px 0;
}

main a {
    color:var(--link);
    transition:0.5s ease;
}

main a:hover, main a:focus {
    color:var(--linkhover);
    transition:0.5s ease;
}

main ul {
    list-style-position: outside;
    margin-left: 25px;
}

main ul li {
    line-height:1.5;
}

main img {
    max-width:100%;
}

main input, textarea, select { 
    background: #C21482;  
    color: var(--color);
    font: var(--bodyfont);
    padding: 8px; 
    margin: 2px;
}


.grow img{
transition: 1s ease;
}

.grow img:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1s ease;
}

button { 
  background-color: #C21482;
  border-radius: 10px;
  border: solid 2px #6D0846;
  color: white;
  padding: 5px;
  font-family: var(--bodyfont);
  text-align: center;
  font-size: 18px;
  margin: 2px;  
}

button:hover {
 background-color: #e872bc;
}

table, th, td, tr {
background-color:  #f498d2;
padding: 6px;
border-collapse: collapse;
color: #820e57;
font-size: 16px;
}

#main-footer {
    text-align:center;
    background-color: #000000000;
}

/* The following CSS ONLY applies to mobile/small screens */

/* Container styling */
#container {
    width: calc(100% - 20px);
    padding:7.5px;
    margin-top:10px;
}

#sidebar-content {
    width: calc(100% - 20px);
}

#main-menu li {
    margin-bottom:15px;
    display:inline-block;
}

/* Skip to content button */

a {
    font-weight: bold;
    color: var(--link);
    letter-spacing: 0px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease; 
    }


  .expand:hover {
    letter-spacing: 5px; 
    }
    
  .expand-long:hover {
    letter-spacing: 2.5px; 
    }
            
  .expand-extralong:hover {
    letter-spacing: 1px; 
    }
  
  
/* The following CSS ONLY applies to desktop/big screens */

@media screen and (min-width: 800px) {
    #container {
        max-width:950px;
        width:90%;
        margin:25px auto;
        display:flex;
        gap:20px;
        } 
  }

    #sidebar {
        flex: 1 1 calc(25% - 20px);
        margin-top:10px;
    }
    
    /* Remove or comment out this block if you don't want a sticky sidebar */
    #sidebar-content {
        position:sticky;
        top:10px;
    }
    
    /* Make menu links into a column */

    #main-menu li {
        display:block;
        margin:0;
    }

    #main-menu li a {
        display:block;
        border-bottom:1px solid;
    }

    main {
        flex: 1 1 calc(75% - 30px);
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    main section {
        margin:0;
    }
    
    #main-footer {
        flex: 1 1 calc(100% - 40px);
    }
   
  .sprites {
    display: block;
  }
} 

    /* Defining grid blocks */

    .full { flex: 1 1 calc(100% - 40px);}
    .half { flex: 1 1 calc(50% - 40px); }
    .third { flex: 1 1 calc(33% - 40px); }
    .twothirds { flex: 1 1 calc(66% - 40px); }
    .quarter { flex: 1 1 calc(25% - 40px); }
    .threequarter { flex: 1 1 calc(75% - 40px); }
}