/* READ ME "https://skunkxcvii.com/README.txt" */

/* Reminder that elements starting in . are classes and # are id's. */



    /* ↓↓ element stuff ↓↓ */



html {

    scrollbar-width: thin;
    overflow:scroll;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
 
}

body {
 
    background-color:#10201A;
    background-blend-mode:multiply;
    background-image: url("/Site Images/Backgrounds/skunkpattern1.png"),
    linear-gradient(180deg,rgb(95, 153, 120) 0%, rgba(0, 0, 0, 0.95) 100%);
    background-attachment: fixed, fixed;
    background-repeat:repeat, no-repeat;
    margin: 0px;
    width: 100%;
    scrollbar-width:none;
    overflow:scroll;
 
}

frbythrycont {
    
    margin-left:auto;
    margin-right:auto;
    margin-top:1%;
    margin-bottom:1%;
    display: block;
    aspect-ratio: 4 / 3;
    width: 60%;
    height: auto;
    min-width: 5%;
    background-color: #fff;
    border:8px solid #000;
    border-image: url('/Site Images/Borders/aeroborderweb.png') 8;
    border-radius: 8px;
    justify-content:center;
    overflow-y: scroll;
    overflow-x: scroll;
    overflow-wrap: break-word;
    word-break: break-all;
    padding: 8px;
    background-blend-mode:multiply;
    background-image: url("/Site Images/Backgrounds/paper.png"), url("/Site Images/Backgrounds/paper.png"), radial-gradient(circle,rgb(54, 65, 58) 75%, rgb(18, 39, 25) 106%);
    background-size:cover;
    text-align: center;
}

p, h1, h2, h3, h4, h5, h6 {
 
    color:white;
    font-family:'indigo';
    text-shadow: 1px 1px 3px #000;
    text-align:center;
    
}

a, nav{
 
    width:fit-content;
    height:fit-content;
    margin-top:auto;
    margin-bottom:auto;
    margin-left:clamp(0px, 1%, 2px); /* property: clamp(minimum, preferred, maximum); */
    margin-right:clamp(0px, 1%, 2px); 
    padding-top:6px;
    padding-bottom:6px;
    text-decoration:none;

}

nav {
 
    display: flex;
    justify-content:center;
    border-radius: 2px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:4px;
    padding-bottom:inherit;
    padding-top:0px;
    padding-left:10px;
    padding-right:10px;
    margin-top:1vh;
    overflow: hidden;
    width: auto;
    background: linear-gradient(180deg,rgba(25, 46, 41, 0.95) 50%, rgba(0, 0, 0, 0.9) 50%, rgba(6, 20, 16, 0.9) 98%);
    border:8px solid #000;
    border-image: url('/Site Images/Borders/aeroborderweb.png') 8;
    border-radius: 8px;
    
}

h1 {
  
    text-align:center;
    font-size:24px;
  
}

p {
    
    text-align:center;
    font-size:19px;
    margin-top:2px;
    margin-bottom:2px;
  
}



    /* ↓↓ class stuff ↓↓ */



div.decoleft {

    z-index:-2;
    position: absolute;
    justify-content:left;
    overflow:hidden;
    height: 100%;
    width: 16%;
    background-image: linear-gradient(90deg,rgb(2, 4, 3) 0%, rgba(0, 0, 0, 0) 100%);
    transform: translateY(-64px);
    
}

div.decoright {

    z-index:-2;
    position: absolute;
    justify-content:right;
    overflow:hidden;
    height: 100%;
    width: 16%;
    background-image: linear-gradient(-90deg,rgb(2, 4, 3) 0%, rgba(0, 0, 0, 0) 100%);
    transform: translateY(-64px);
    right: 0px;

}

.gallery img {
 
    width:100%;
    height:auto;
    margin:2px;
    
}

.gallery a {

    margin:2px;
    padding:4px;
    width:90%;
    
}

.gallery {
    
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    background-blend-mode:multiply;
    background-image: linear-gradient(180deg,rgba(25, 46, 41, 0.95) 50%, rgba(0, 0, 0, 0.9) 50%, rgba(6, 20, 16, 0.9) 98%);
    background-size:cover;
    border:1px solid #666;
    border-radius: 2px;
    height:50%;
    overflow:scroll;
  
}

.poll {
    
    background-blend-mode:multiply;
    background-image: linear-gradient(180deg,rgba(25, 46, 41, 0.95) 50%, rgba(0, 0, 0, 0.9) 50%, rgba(6, 20, 16, 0.9) 98%);
    background-size:cover;
    border:1px solid #666;
    border-radius: 2px;
    overflow:scroll;
    padding:1%;
  
}

.logo {
    
    width:clamp(32px, 8vw, 128px); /* property: clamp(minimum, preferred, maximum); */
    object-fit: contain;
    margin-left: 2px;
    margin-right: 2px;
    padding-bottom:1px;
    padding-top:1px;
 
}

.shill {
 
    display:grid;
    grid-template-columns:auto auto auto;
    width:33%;
    margin-left:auto;
    margin-right:auto;
 
}

.navbutton {
 
    width:clamp(40px, 14vh, 128px); /* property: clamp(minimum, preferred, maximum); */
    height:auto;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    margin-top:7px;
 
}

.subtitle {
    
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    width:fit-content;
    overflow:hidden;
    height:clamp(10px, 4vh, 20px); /* property: clamp(minimum, preferred, maximum); */
    margin-bottom:1vh;
    margin-top:1vh;
    border-radius:12px;
    border:0px solid #666;
    background: linear-gradient(180deg,rgba(25, 46, 41, 0.95) 50%, rgba(0, 0, 0, 0.9) 50%, rgba(6, 20, 16, 0.9) 98%);
  
}

.info {
 
    position: fixed; 
    bottom: 20px;
    right: 20px;
    z-index: -1;
    font-size:clamp(9px, 1em, 24px); /* property: clamp(minimum, preferred, maximum); */
    color: #666;
    
}

.glow {
    
    background: fff;
    transition: mix-blend-mode 2s ease;
  
}

.glow:hover {

    mix-blend-mode: screen; 
  
}

.press {
    
    mix-blend-mode: normal;
    transition: mix-blend-mode 0.3s ease;
  
}

.press:active {
    
    mix-blend-mode: difference; 
    
}



/* ↓↓ font stuff  ↓↓ */



#indigo {
  
  font-family:'indigo';
  
}

@font-face {
    
  font-family: indigo;
  src: url("/Fonts/Indigosnep-Regular.ttf");
  
}

/* READ ME "https://skunkxcvii.com/README.txt" */