@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');



:root {
 --text:#000; 
 --back:#ffff;
 --moons:#009BAE;
}

.filler {
height: calc(2vh);
}

.first {
padding-top: calc(2vh);
}

.alfa {
padding-top: calc(10vh);
border-bottom: 4px solid var(--text);
}

.omega {
padding-top: calc(10vh);
border-top: 4px solid var(--text);
}

.darkmode {
    --text:#ffff; 
    --back:#000;
    --moons:#009BAE; 
   }

body {
    line-height: 1;
    background: repeating-linear-gradient(
    60deg,
    var(--back),
    var(--back) 60px,
    rgba(0,155,174) 60px,
    rgba(0,155,174) 120px);
    color: var(--text);
    font-size: 14px;
    font-family: 'Oswald';
    letter-spacing: 1.6px;
    height: var(--doc-height);
}

p {
    line-height: 1.3;
    color: var(--text);
    font-size: 20px;
    letter-spacing:1.8px;
    font-family: 'Oswald';
}

h1,h2,h3,h4,h5,h6 
{
font-weight: 400;
font-size: 28px;
font-family: 'Oswald';
letter-spacing: 1.5px;
text-transform: uppercase;
color:var(--text);
line-height: 1.2;
margin-top: 20px;
margin-bottom: 20px;
}

@media (max-width: 575.98px) { 
p {font-size: 16px;}
h1 {font-size: 16px;}
}

hr { 
    background-color:var(--text); 
    border-width: 2px;
    opacity: 1!important;
}

#shrinker1 {
    @media only screen and (min-width: 960px) {
        width:95%;}
      } 
      
#shrinker2 {
     @media only screen and (min-width: 960px) {
       width:20%;}
      } 
      
#shrinker2 { 
     @media only screen and (max-width: 959px) {
       width:40%;}
     } 
     
#shrinker3 {
     @media only screen and (min-width: 960px) {
       width:30%;}
      }  
    
#shrinker3 { 
     @media only screen and (max-width: 959px) {
       width:60%;}
     }
     
#no-show {
     @media only screen and (min-width: 960px) {
       display:none;}
      }  
    
#no-show { 
     @media only screen and (max-width: 959px) {
       display:block;}
     }

#show {
     @media only screen and (min-width: 960px) {
       display:block;}
      }  
    
#show { 
     @media only screen and (max-width: 959px) {
       display:none;}
     }


      
.btn-outline-primary {  
    --bs-btn-color:var(--text);
    --bs-btn-border-color: var(--back);
    --bs-btn-hover-color:var(--back);
    --bs-btn-hover-bg: var(--text);
    --bs-btn-hover-border-color: var(--text);
    --bs-btn-active-bg:var(--moons);
    --bs-btn-active-border-color:var(--moons);
    border:2px solid;
    border-radius:18px;
    font-size:14px;
}

#lefter {
        text-align:left;}
  

#righter  {
            text-align:right;}
     

#theme-switch span:last-child {
    display:none; 
}

.darkmode #theme-switch span:first-child {
    display:none; 
}

.darkmode #theme-switch span:last-child {
    display:block; 
} 

#theme-switch-2 {
    display:none; 
}

.darkmode #theme-switch-3 {
    display:none; 
}

.darkmode #theme-switch-2 {
    display:block; 
}

.shadow {
    -webkit-filter: drop-shadow( 130px 50px 50px rgba(0, 0, 0, .6));
    filter: drop-shadow( 130px 50px 50px rgba(0, 0, 0, .6));
}


.one-colour {
background: var(--back);
border-left: 4px solid var(--text);
border-right: 4px solid var(--text);
}

.one-colour-no-border {
background: var(--back);
}

.one-colour-border-right {
background: var(--back);
border-right: 4px solid var(--text);
} 

.one-colour-border-left {
background: var(--back);
border-left: 4px solid var(--text);
} 

#priceboard {
width:60%;
text-align:left;
margin-left:auto;
margin-right:auto;
}

#motto {
width:60%;
text-align:center;
margin-top:15px;
margin-bottom:15px;
margin-left:auto;
margin-right:auto;
}


@media (max-width: 1399px) { 
#priceboard {
width:90%;}
#motto {
width:60%;}
}

#priceboard #product {
  display: inline-block;
  white-space:nowrap;
  overflow:hidden;
  width: 79%
}
#priceboard #price {
  display: inline-block;
  white-space:nowrap;
  overflow:hidden;
 
  
}


@media only screen and (min-width: 960px) {
#priceboard #product {
width: 79%}
#priceboard #price {
width: 21%;}       
} 
      
@media only screen and (max-width: 959px) {
#priceboard #product {
width: 75%}
#priceboard #price {
width: 25%;}              
} 

#priceboard #product:after {
  --d:".......................................";
  --_d: var(--d) var(--d);
  content: var(--_d) var(--_d) var(--_d) var(--_d);
}