/* --- 1. GLOBAL RESET & VARIABLES --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    gap: 0.4rem;

}

body { /* sets background colour and vertical nature of webpage sections */
    background-color: var(--c-white-1);
    display: flex;
    flex-direction: column;
}

section { /* prevents things from touching the wall */
    padding: 0 5%;
    width: 100%;
    display: inherit
}

:root{
    /* Colours */
    --c-white-1: rgb(255, 255, 255);
    --c-white-2: rgb(243, 245, 245);
    --c-white-3: rgb(222, 222, 222);

    --c-black-1: rgb(26, 26, 26);

    --c-colour-1: #7f0009;
    --c-colour-2: rgb(100, 0, 7);

    /* Fonts */
    --f-main: 'General Sans', sans-serif;
    --f-second: 'General Sans', sans-serif;

    /*styling*/
    --s-bord-width-l: 7px;
    --s-bord-width: 5px;
    --s-bord-width-sm: 3px;
    --s-bord-rad: 1rem;

    /* font sizes*/
    --f-pagetop:5rem;
    --f-2nd:2.4rem;
    --f-25nd:2.1rem;
    --f-3rd:1.8rem; 
    --f-4th:1.4rem; 
    --f-body:1.2rem;
}

/*Font styles*/

.heading-h1 {
    --type: var(--f-main);
    --size: var();
    --color: var(--c-white-1);

    font-family: var(--type);
    font-size: var(--size); 
    font-weight: 800;
    color: var(--color);
}

.heading-h2 {
    --type: var(--f-second);
    --size: var(--f-2nd);
    --color: var(--c-white-1);

    font-family: var(--type);
    font-size: var(--size); 
    font-weight: 400;
    color: var(--color);
    letter-spacing: 0.05em;
}

.heading-h25 {
    --type: var(--f-second);
    --size: var(--f-25nd);
    --color: var(--c-white-1);

    font-family: var(--type);
    font-size: var(--size); 
    font-weight: 400;
    color: var(--color);
    letter-spacing: 0.05em;
}

.heading-h3{
    --type: var(--f-second);
    --size: var(--f-4th);
    --color: var(--c-white-1);

    font-family: var(--type);
    font-size: var(--size); 
    font-weight: 500;
    color: var(--color);
}

.heading-body{
    --type: var(--f-second);
    --size: var(--f-body);
    --color: var(--c-black-1);

    font-family: var(--type);
    font-size: var(--size); 
    font-weight: 400;
    color: var(--color);
}

/* all button style */

.btn {
    text-decoration: none;
    color: var(--c-colour-1);
    background: none;
    font-family: var(--f-main);
    font-weight: 500;
    border-radius: var(--s-bord-rad);
    border: var(--s-bord-width-sm) solid var(--c-colour-1);
    transition: 0.3s ease;
    cursor: pointer;
    text-align: center;
    padding: 0.8rem 1.2rem;   
}

.btn:hover {
    color: var(--c-white-2);
    background: var(--c-colour-1);
    text-decoration: none;
}

.btn:active {
    opacity: 0.4;
    text-decoration: none;
}

/* link styles */

.link {
    color: rgb(66, 153, 252);
}

.link:hover {
    color: rgb(123, 184, 255);
}

.link:active, link:visited {
    color: rgb(197, 224, 255);
}

.media-container {
    --content-order: row;
    --height: auto;
    --width: 100%;
    --background: var();
    --padding: 4rem;

    display: flex;
    flex-direction: var(--content-order);
    gap: 4rem;
    width: var(--width);
    height: var(--height);
    padding: var(--padding);
    background-color: var(--background);
}

/*Content Styling */
.media-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}


/* Image Handler & Frame */

.media-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
.media-img-wrapper {
    --frame: none;
    --width: auto;
    --height: auto;
    --border-width: 1rem;
    --border-color: var(--c-black-1);
    --border-radius: 0;

    flex: 1;
    overflow: hidden;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--c-white-2); 
    aspect-ratio: var(--frame); 
    width: var(--width);
    height: var(--height);
    transition: all 0.3s ease;
}