.background 
{
 width: 100%;
 min-height: 100vh;
 background: linear-gradient(var(--lg-solid-colour-1), var(--lg-solid-colour-2));
 position: relative;
 z-index: 0
}

.background::after
{
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(var(--lg-semitransparent-colour-1), var(--lg-semitransparent-colour-2)), url("../images/pigtvpattern.png");
 background-position: center;
 background-size: clamp(100px, 300px, 400px);
 opacity: 0.2;   
 z-index: 0;
} 
      
nav ul li:not(:last-child)
{
 padding-right: 20px      
}

div.tiles > *
{
 display: flex;
 flex-direction: column;
 width: 100%;     
 height: 170px;
 padding: 0.625rem;
 text-decoration: none;    
}

div.tiles > * div
{
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 justify-content: center;
 position: relative; 
 width: 100%; 
 height: 100%; 
 z-index: 1; 
 opacity: 1; 
 border-radius: 14px;
 padding: 1.25rem;    
}

div.tiles > *:nth-child(1) > div
{
 background: linear-gradient(#d33b2f, #bb882f);   
}

div.tiles > *:nth-child(2) > div
{
 background: linear-gradient(#9346db, #37419d);   
}

div.tiles > * > div > img
{
 position: absolute;     
 width: auto; 
 height: 80%; 
 left: 96%; 
 top: 90%; 
 transform: translate(-100%, -100%);
 z-index: 0;     
}

div.tiles > * > div span
{
 font-family: "Passion One", sans-serif;
 font-weight: 900;
 font-style: normal;
 font-size: 3em;    
 line-height: 0.75em;
 text-transform: uppercase;
color: antiquewhite;    
}

div.tiles > * > div span:first-of-type
{
 margin-top: auto;   
}

.section
{   
 display: flex;
 position: relative;     
 flex-wrap: wrap;
 width: 100%;
 padding-block: min(10vh, 3rem); 
 padding-inline: min(5vh, 2.5rem); 
 z-index: 1;
 opacity: 1; 
 background-color: antiquewhite;
 color: black;    
 box-shadow: rgba(0, 0, 0, 0.125) -1px 9px 0px -1px inset; 
 border-radius: 14px;        
}

.section div:not(:first-child)
{
 margin-top: 1.25rem;    
}

.section div:nth-child(1) img,
.section div:nth-child(3) img
{
 float: left;
 shape-outside: 
 circle(50%); margin-right: 1rem;   
 width: 122px;
}

.section div:nth-child(2) > img
{
 float: right;
 shape-outside: 
 circle(50%); margin-left: 1rem;   
 width: 171px;
}

.section h2
{
 font-family: "Oswald", sans-serif;    
 padding: 0; 
 margin: 0;
 font-size: clamp(1.8rem, 2.5vw, 2.25rem);    
}

.section p
{
 padding: 0; 
 margin: 0;    
 line-height: 1.35;
 font-size: max(1.3rem, 1.1vw);
}

span[data-content='email']
{
font-weight: var(--font-weight-medium);    
}

nav
{
 display: flex;
 align-items: center;
 justify-content: flex-end;
 width: 100%;
 padding-block: 10px; 
 padding-inline: 20px;   
}

nav ul
{
 list-style-type: none; 
 padding: 0; 
 margin: 0; 
 z-index: 1;   
}

nav ul li
{
 display: inline-block; 
 color: white; 
 cursor: pointer;
 font-size: clamp(1rem, 1.5vh + 1rem, 2rem);
 text-transform: uppercase;    
}

footer
{
 display: flex;
 position: relative;    
 flex-wrap: nowrap;
 align-items: center;
 justify-content: center;
 width: 100%;
 padding: 5px;     
}
 
footer img
{
 position: relative; 
 margin-bottom: 14px;    
 height: 40px;   
}

footer span
{
 display: block; 
 padding-left: 10px;
 font-size: clamp(1.1rem, 1.4vh + 0.75rem, 2rem); 
 font-weight: var(--font-weight-semibold);    
 color: white;  
}


/* \/ \/ LATEST VIDOES \/ \/ */
.latestvideos
{
 display: flex;
 flex-direction: row;    
 flex-wrap: wrap;    
 width: 100%;
 background-color: rgb(27,34,66); 
 backdrop-filter: blur(2px); 
 border: 1px solid rgb(74,92,174);   
 box-shadow: -1px 9px 0px -1px rgba(0,0,0,0.125) inset;  
 border-radius: 10px; 
 z-index: 1;
}

.latestvideos > div:nth-child(1)
{
 display: flex;
 flex-direction: row;    
 flex-wrap: wrap; 
 margin-block: 20px; 
 margin-inline-start: 20px;    
 width: 100%;    
}

.latestvideos > div:nth-child(1) span
{
 padding: 0px 10px; 
 color: white;   
 font-family: "Rowdies", sans-serif;
 font-weight: 700;
 font-style: normal;    
 font-size: clamp(2rem, 1vw + 1.25rem, 3rem);
 text-transform: uppercase;    
}

.latestvideos > div:nth-child(2)
{
 display: flex;
 flex-direction: row;    
 flex-wrap: wrap;
 width: 100%;
 min-height: 100px; 
 margin-inline: 20px; 
 margin-block-end: 20px;
 opacity: 1;     
}

.latestvideos > div:nth-child(2) > div
{
 display: flex;
 position: relative;    
 flex-direction: column;    
 flex-wrap: wrap;
 width: 100%;
 padding: 0.625rem;    
}

.latestvideos > div:nth-child(2) div img
{
 width: 100%; 
 height: 100%; 
 object-fit: cover; 
 border-radius: 10px;   
}

div#playvideo
{
 display: flex; 
 flex-direction: row; 
 justify-content: center; 
 align-items: center;
 position: absolute; 
 left: 8px; 
 right: 8px; 
 top: 8px; 
 bottom: 8px;    
 pointer-events: none;   
 background-color: rgba(75,158,229,0.45); 
 border-radius: 10px;          
}

div#playvideo i::before
{ 
 font-family: 'Font Awesome 6 Free';     
 content: "\f04b";    
 font-weight: 900;
 font-style: normal;    
 padding-right: 0.625rem;
 color: white;    
}

div#playvideo span
{
 font-family: "Rowdies", sans-serif;
 font-weight: 700;
 font-style: normal;
 text-transform: uppercase;
 color: white;    
}
/* /\ /\ LATEST VIDOES /\ /\ */