@font-face {
    font-family: Heaven;
    src: url('Fonts/Heaven2.otf') format('opentype'),
    url('Fonts/Heaven2.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Heaven", sans-serif; /* This is where the font is applied */
}

body {
    background: black;
}

.main-container {
    width: 100%;
    overflow: hidden;
    background: black;
    color: gray;
}

.aligner {
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    margin: auto;
    padding: 50px 0px;
}

/* This is the ron winter text at the head */
.ron-name {
    width: 205px;
    margin-bottom: 40px; }

.horizontal-container {
    display: flex;
    position: relative;
    width: 100%;
    margin: 50px 0px;
}

.image-n-text {
    display: flex;
    width: 100%;
}

.image-link {
    width: fit-content;
}

.image {
    width: 300px;
    height: auto;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s;
    cursor: pointer;
}

.image:hover {
    filter: brightness(1.2); /* This is where you add the lightness of the image when hovered over */
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s; /* the 0.1s in here determines how many seconds it takes to take effect */
}

.row-of-text {
    list-style: none;
}

/* The small texts are styled here */
.ron-winter-text {
    font-size: 12px; /* font size of the small text for the desktop version */
    margin-bottom: 2px;
    letter-spacing: -0.25px; /* this is the value for the kerning you asked */
}

.bottom-text {
    padding-top: 10px;
}

.right-text {
    padding-left: 10px;
}

.left-text {
    padding-right: 10px;
}

.text-to-bottom {
    flex-direction: column;
}

.text-to-right {
    flex-direction: row;
    align-items: end;
}

.text-to-left {
    flex-direction: row-reverse;
    align-items: end;
}

.container-two {
    left: 35%;
    top: -75px;
    margin: 0px;
}

.container-three {
    margin: 0px;
}

.container-four {
    top: -25px;
    margin: 0px;
}

.container-five {
    left: 35%;
}

.container-six {
    margin: 50px 0px 0px 0px;
}

.container-seven {
    margin: 0px;
}

.text-righty {
    text-align: end;
}

/* It's okay if you don't touch this */
@media screen and (max-width: 1200px) {
    .aligner {
        padding: 50px 50px;
    }
}

/* this is for the smaller screen laptops and large tablets */
@media screen and (max-width: 980px) {
    .aligner {
        padding: 30px 50px;
    }

    .ron-name {
        margin-bottom: 40px;
    }

    .horizontal-container {
        position: static;
        margin: 20px 0px;
    }

    .image {
        width: 250px;
    }
}

/* This is for smaller tablets */
@media screen and (max-width: 600px) {
    .image {
        width: 210px;
    }

    .ron-name {
        width: 177px;
    }

    .ron-winter-text {
        font-size: 8px;
    }
}

/* This section if for mobile version */
@media screen and (max-width: 450px) {
    /* This determines the width of the thumbnails */
    .image {
        width: 200px;
    }

    .aligner {
        padding: 5px 10px;
    }    

    /* This determines the size of the ron winter text for mobile */
    .ron-name {
        margin-bottom: 30px; /* space between the name and the first thumbnail for mobile */
        width: 153px; /* font size of the ron winter text for the mobile */
    }

    .ron-winter-text {
        font-size: 8px; /* the smaller text for the mobile */
    }
}

/* this is for the mini mobiles. It's rare but sometimes there are phones this small so just in case */
@media screen and (max-width: 375px) {
    .image {
        width: 180px;
    }

    .horizontal-container {
        position: static;
        margin: 10px 0px;
    }

    .ron-name {
        width: 127px;
    }

    .ron-winter-text {
        font-size: 7px;
    }
}