/* Variables */

:root {
    --max-content-width: 1000px;
    --white-color: #FFFFFF;
    --black-color: #000000;
    --primary-color: #C33C54;
    --secondary-color: #ed5571;
    --vins-color: #4a65c5;
    --jonnys-color: #437a39;
    --tonys-color: crimson;
}

/* Font faces */

@font-face {
    font-family: 'MadimiOne-Regular';
    src: url('../assets/fonts/madimi/MadimiOne-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Rubik-Light';
    src: url('../assets/fonts/rubik/static/Rubik-Light.ttf') format('truetype');
}

/* Scroll bar */

*::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

* {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

/* Basic rules for all pages */

html {
    scroll-behavior: smooth; /* Create smooth scrolling for the entire page */
}

h1 {
    font-family: 'MadimiOne-Regular', sans-serif, Arial; /* Assign fonts and fallbacks */
    font-size: 4rem; /* Set font size */
}

h2 {
    font-family: 'MadimiOne-Regular', sans-serif, Arial; /* Assign fonts and fallbacks */
    font-size: 3rem; /* Set font size */
}

h3 {
    font-family: 'MadimiOne-Regular', sans-serif, Arial; /* Assign fonts and fallbacks */
    font-size: 2rem; /* Set font size */
}

p {
    font-family: 'Rubik-Light', sans-serif, Arial; /* Assign fonts and fallbacks */
    font-size: 1.5rem; /* Set font size */
    text-indent: 0;
}

/* Basic rules for the website */

body {
    background-color: var(--black-color); /* Display black on the background */
    width: 100vw; /* Set the viewport width to the width of the device */
    height: 100vh; /* Set the viewport height to the height of the device */
    position: relative; /* Set the position relative to html */
    overflow: visible; /* Disable scrolling by default */
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
}

.section {
    width: 100vw; /* Set the viewport width to the width of the current device */
    height: 100vh; /* Set the viewport height to the height of the current device */
    position: relative; /* Set the position of the section relative to body */
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to columns */
    justify-content: center; /* Align content vertically */
    align-items: center; /* Align content horizontally */
    text-align: center; /* Align text horizontally */
    overflow: visible; /* Remove overflow from each section */
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
}

.container {
    width: 100vw; /* Set the viewport width to the width of the current device */
    height: 100vh; /* Set the viewport height to the height of the current device */
    position: relative; /* Make the position relative to its parent */
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to vertical */
    justify-content: center; /* Vertically align items */
    align-items: center; /* Horizontally align items */
    overflow: visible; /* Remove overflow from each section */
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
}

.content {
    width: 100%; /* Set the width of content to the container width */
    height: 100%; /* Set the height of content to the container height */
    position: relative; /* Make the position relative to its parent */
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to vertical */
    justify-content: center; /* Vertically align items */
    align-items: center; /* Horizontally align items */
    overflow: visible; /* Remove overflow from each content */
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
    max-width: var(--max-content-width); /* Set the maximum width for content */
}

/* Loading Screen */

#loading-screen {
    width: 100%; /* Set the width of content to the container width */
    height: 100%; /* Set the height of content to the container height */
    position: fixed; /* Set position to fixed */
    top: 0; /* Place the loading screen at the top */
    left: 0; /* Place the loading screen at the left */
    background-color: var(--black-color); /* Make the color black */
    z-index: 9999; /* Place it over everything */
    transition: opacity 1s ease-in-out; /* Allow smooth transitions */
    opacity: 1; /* Make it fully opaque */
    pointer-events: none; /* Disable mouse usage */
}

/* Hero section */

#hero-video-container {
    width: 100%; /* Set the width of content to the container width */
    height: 100%; /* Set the height of content to the container height */
    position: absolute; /* Set the position to absolute */
    overflow: hidden; /* Remove overflow from each content */
}

#hero-video-container::after {
    content: ''; /* Insert an empty string */
    width: 100%; /* Adjust the width to the container */
    height: 25%; /* Adjust the height to a quarter of the container's height */
    position: absolute; /* Set the position to absolute */
    bottom: 0; /* Position the object at the bottom */
    left: 0; /* Position the object at the left */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); /* Create a fade out */
}

#hero-video {
    width: 100%; /* Set the width of the video to the container width */
    height: 100%; /* Set the height of the video to the container height */
    position: absolute; /* Use absolute position to place the video */
    top: 0; /* Place video at the top */
    left: 0; /* Place video at the left */
    object-fit: cover; /* Cover the entire container */
    z-index: -1; /* Place video behind other content */
}

#hero-social-container {
    position: absolute; /* Use absolute position to place the social container */
    top: 5%; /* Place the container near the top */
    right: 5%; /* Place the container near the right */
}

#hero-content {
    position: absolute; /* Use absolute position to place the hero content */
    justify-content: center; /* Align content vertically */
    align-items: center; /* Align content horizontally */
    margin: 0 20%; /* Set margins on either side */
}

#hero-content svg {
    width: 100%; /* Set the width */
    height: auto; /* Set the height to match the width */
    fill: var(--white-color); /* Select the color */
}

#hero-content h1,
#hero-content p {
    color: var(--white-color); /* Make the text white */
    margin: 0; /* Remove margins on all sides */
    text-wrap: nowrap; /* Disallow text wrapping */
}

#scroll-arrow {
    width: 48px; /* Set the width */
    height: 120px; /* Set the height */
    position: absolute; /* Set the position to absolute */
    bottom: 50px; /* Set the arrow 50 px from the bottom */
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to vertical */
    align-items: center; /* Horizontally align items */
}

#scroll-arrow svg {
    fill: var(--white-color); /* Set the arrow color to white */
}

#arrow-segment1 {
    transform: scale(0.50) translateY(-5px); /* Make the top segment the smallest */
}

#arrow-segment2 {
    transform: scale(0.75) translateY(-10px); /* Make the middle segment smaller */
}

/* Creators Section */

#creators-content-box {
    background-color: var(--primary-color); /* Set the default background color */
    width: 90%; /* Set the width */
    height: 90%; /* Set the height */
    display: flex; /* Change the display to flex */
    flex-direction: column; /* Flex items vertically */
    overflow: hidden; /* Remove overflow */
    border: 3px solid var(--black-color); /* Set a border around the box */
    border-radius: 15px; /* Bevel the box*/
    position: relative;
}

#creator-entries {
    width: 100%; /* Set the width of content to the container width */
    height: 80%; /* Set the height of content to the container height */
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to vertical */
    align-items: center; /* Horizontally align items */
    overflow: hidden; /* Remove overflow from each section */
    z-index: 1; /* Place entries further in front */
}

.creator-entry {
    display: none; /* Don't show entry by default, use javascript to decide what appears */
    flex-direction: column; /* Set the flex direction to vertical */
    opacity: 0; /* Make each entry transparent */
    margin: 0 50px; /* Set a margin on either side */
    height: 100%; /* Set the entry height */
    width: 100%; /* Set the entry width */
    color: var(--white-color); /* Make the text white */
    transition: opacity 0.3s ease-in-out; /* Allow for smooth transparency transitions */
}

#creator-entry-general {
    display: block; /* Display this specific entry */
    opacity: 1; /* Set this entry to opaque */
}

.creator-content-text p {
    margin: 0 50px; /* Set a margin on either side */
    text-align: left; /* Align the text to the left */
    text-indent: 0; /* Indent the text */
}

.creator-image-container {
    width: 100%; /* Set the width */
    height: 20%; /* Set the height */
    display: flex; /* Set the display mode to flex */
    flex-direction: row; /* Set the flex direction to horizontal */
    justify-content: space-evenly; /* Evenly space the content */
    align-items: center; /* Align the content horizontally */
    position: relative; /* Position the image container relative to its parent*/
    margin-bottom: 5%; /* Place a margin at the bottom */
}

.creator-card {
    width: 20%; /* Set the width of the card */
    aspect-ratio: 1; /* Set the aspect ratio to 1 */
    display: flex; /* Set the display type to flex */
    padding: 5px; /* Pad the image */
    border-radius: 50%; /* Round the border */
    justify-content: center; /* Center the objects vertically */
    align-items: center; /* Center the objects horizontally */
    min-width: 75px; /* Set the smallest width */
    max-width: 150px; /* Set the largest width */
}

#creator-card1 {
    border: 3px solid var(--vins-color); /* Set the border */
}

#creator-card2 {
    border: 3px solid var(--jonnys-color); /* Set the border */
}

#creator-card3 {
    border: 3px solid var(--tonys-color); /* Set the border */
}

.creator-image {
    display: flex; /* Set to flex box */
    border: 3px solid black; /* Create a border around the image */
    border-radius: 50%; /* Round the edges */
    width: 100%; /* Set the width */
    height: auto; /* Set the height */
    max-width: 140px; /* Don't allow objects to grow past this */
    max-height: 140px;  /* Don't allow objects to grow past this */
    cursor: pointer; /* Change the mouse to pointer when hovering */
    overflow: hidden; /* Remove overflow */
    transition: filter 0.3s ease-in-out; /* Allow smooth filter transitions */
    z-index: 1; /* Place above other objects */
}

.creator-image img {
    height: 100%; /* Set the height */
    width: 100%; /* Set the width */
    filter: grayscale(100%); /* Change images to grayscale */
}

.creator-overlay {
    width: 50px; /* Set the width */
    height: 50px; /* Set the height */
    border-radius: 50%; /* Round the overlay */
    transition: transform 0.75s ease-out; /* Set the transition */
    max-width: 100%; /* Don't allow it to be wider than it's container */
    max-height: 100%; /* Don't allow it to be taller than it's container */
    position: absolute; /* Set the position to absolute */
}

#creator-overlay1 {
    background: var(--vins-color); /* Set the overlay color */
}

#creator-overlay2 {
    background: var(--jonnys-color); /* Set the overlay color */
}

#creator-overlay3 {
    background: var(--tonys-color); /* Set the overlay color */
}

#jonny-social-container ul,
#tony-social-container ul,
#vin-social-container ul {
    margin: 20px 50px 0 0; /* Set margins */
    position: relative; /* Set the position to relative */
    justify-content: right; /* Adjust the list to the right */
}

/* Projects Section */

#project-listings {
    width: 90%; /* Set the width of content to the container width */
    height: 90%; /* Set the height of content to the container height */
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to horizontal */
    overflow: hidden; /* Remove overflow from each section */
    position: relative; /* Set position to relative */
}

#project-entries {
    width: 100%; /* Set the width of content to the number of projects */
    height: 100%; /* Set the height of content to the container height */
    transform: translateX(0); /* Place the slide at the beginning */
    display: flex; /* Set the display to flex */
    flex-direction: row; /* Set the flex direction to horizontal */
    transition: transform 0.5s ease-in-out; /* Smooth transition between slides */
    position: relative; /* Set position to relative */
}

.project-entry {
    background-color: var(--primary-color); /* Set the default background color */
    width: 90%; /* Set the width */
    height: 90%; /* Set the height */
    flex: 0 0 90%; /* Set the flex ratio */
    display: flex; /* Change the display to flex */
    flex-direction: column; /* Flex items vertically */
    align-items: center; /* Horizontally align items */
    justify-content: center; /* Vertically align items */
    padding: 5%; /* Pad the edges */
    overflow: hidden; /* Remove overflow */
    border-radius: 15px; /* Bevel the box*/
    position: relative;
}

#hallow-entry {
    background-color: slategray; /* Set the background color */
}

#setsuna-entry {
    background-color: blueviolet; /* Set the background color */
}

#warmart-entry {
    background-color: indianred; /* Set the background color */
}

.project-title {
    width: 80%; /* Set the width of the project title */
    height: auto; /* Set the height automatically */
    margin: 50px 5% 25px 5%; /* Place margins around the title */
    position: relative; /* Set the position to relative */
    max-width: 400px; /* Set the max width */
    color: var(--white-color);
    z-index: 2;
}

.project-image {
    width: 100%; /* Set the width */
    height: auto; /* Set the height */
    display: flex; /* Set the display to flex */
    justify-content: center; /* Vertically align items */
    align-items: center; /* Horizontally align items */
    position: relative; /* Set the position to relative */
    max-width: 480px; /* Set the max width */
    max-height: 270px; /* Set the max height */
    z-index: 2;
}

.project-thumbnail {
    width: 100%; /* Set the width */
    height: 100%; /* Set the height */
    position: relative; /* Set the position to relative */
    min-width: 100px; /* Set the minimum width */
    max-width: 480px; /* Set the maximum width */
    display: flex; /* Set the display to flex */
    border: none; /* Remove the border */
    border-radius: 15px;
}

.project-text {
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to vertical */
    width: 100%; /* Set the width of content */
    justify-content: flex-start; /* Vertically align items */
    align-items: center; /* Horizontally align items */
    margin: 0; /* Remove margins on all sides */
    color: var(--white-color); /* Make the text white */
    height: 60%; /* Set the height of content to the container height */
    overflow: hidden; /* Remove overflow */
    z-index: 2;
}

.project-text p {
    margin: 50px 5% 0 5%; /* Set a margin on either side */
    text-align: left; /* Align the text to the left */
    text-indent: 0; /* Indent the text */
    padding: 0 5%; /* Remove all padding */
}

.project-buttons {
    display: flex; /* Set display to flex */
    flex-direction: row; /* Set the flex direction to row */
    justify-content: space-evenly; /* Space the content evenly */
    align-items: center; /* Align content horizontally */
    width: 100%; /* Set the width */
    height: 20%; /* Set the height */
    position: relative; /* Set the position to relative */
    margin-bottom: 10%; /* Add a margin to the bottom */
    z-index: 1;
}

.project-site-button,
.project-steam-button {
    width: 130px; /* Set the button width */
    height: 40px; /* Set the button height */
    font-size: 1.1em; /* Set the font size */
    cursor: pointer; /* Turn the mouse into a pointer */
    background-color: var(--black-color); /* Change the button color to black */
    color: var(--white-color); /* Change the font color to white */
    border: none; /* Remove the border */
    border-radius: 5px; /* Round the edges */
    transition: all 0.4s; /* Allow smooth transitions */
    font-family: MadimiOne-Regular, sans-serif; /* Set the font */
    z-index: 2;
}

.project-site-button:hover,
.project-steam-button:hover {
    border-radius: 5px; /* Round the edges */
    transform: translateY(-10px); /* Adjust vertically */
    box-shadow: 0 7px 0 -2px #f85959, 0 15px 0 -4px #39a2db, 0 16px 10px -3px #39a2db; /* Set shadow colors */
}

.project-site-button:active,
.project-steam-button:active {
    transition: all 0.2s; /* Allow smooth transitions */
    transform: translateY(-5px); /* Push the button down */
    box-shadow: 0 2px 0 -2px #f85959, 0 8px 0 -4px #39a2db, 0 12px 10px -3px #39a2db; /* Adjust shadows */
}

.project-slide-button {
    width: 64px; /* Set the width */
    height: 64px; /* Set the height */
    top: 50%; /* Set the position of the slide buttons */
    position: absolute; /* Set the position to absolute */
    z-index: 1; /* Place the buttons in front */

}

.project-slide-button button {
    width: 100%; /* Set the width */
    height: 100%; /* Set the height */
    background: rgba(0, 0, 0, 0); /* Make the background transparent */
    border: none; /* Remove the border */
    cursor: pointer; /* Turn the mouse into a pointer when hovering */
}

.project-slide-button svg {
    fill: var(--white-color); /* Set the arrow color to white */
}

#next-project { /* Position the next button */
    right: clamp(20px, calc((100% - var(--max-content-width)) / 2 - 20px), calc(100% - var(--max-content-width) / 2 - 20px));
}

#prev-project { /* Position the previous button */
    left: clamp(20px, calc((100% - var(--max-content-width)) / 2 - 20px), calc(100% - var(--max-content-width) / 2 - 20px));
}

/* News Section */

#news-listings {
    width: 100%; /* Set the width of content to the container width */
    height: 100%; /* Set the height of content to the container height */
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to horizontal */
    overflow: hidden; /* Remove overflow from each section */
    position: relative; /* Set position to relative */
}

#news-header {
    width: 100%; /* Set the width of content to the container width */
    height: 10%; /* Set the height of content to the container height */
    display: flex; /* Set the display to flex */
    flex-direction: column; /* Set the flex direction to vertical */
    justify-content: center; /* Vertically align items */
    align-items: center; /* Horizontally align items */
    overflow: hidden; /* Remove overflow from each section */
    position: relative; /* Set position to absolute */
    top: 1%; /* Place the header near the top */
    z-index: 1; /* Place the header near the front */
}

#news-header {
    color: var(--white-color); /* Make the text white */
    margin: 0; /* Remove margins on all sides */
    text-wrap: nowrap; /* Disallow text wrapping */
}

#news-entries {
    display: flex; /* Set the display to flex */
    flex-direction: row; /* Set the flex direction to vertical */
    flex-wrap: wrap; /* Wrap objects */
    justify-content: space-evenly; /* Vertically align items */
    align-items: center; /* Horizontally align items */
    overflow: hidden; /* Remove overflow from each section */
    width: 100%; /* Set the width of content to the container width */
    height: 90%; /* Set the height of content to the container height */
    margin-bottom: 50px;
    z-index: 1;
}

.news-entry {
    width: 300px;
    height: 200px;
}

.news-card {
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.news-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.999s;
}

.news-card:hover .news-card-inner {
    transform: rotateY(180deg);
}

.news-card-front,
.news-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    box-sizing: border-box;
}

.news-card-front {
    background-color: #6A2C70;
    color: #fff;
    display: flex;
    align-items: center;
    border-radius: 10px;
    justify-content: center;
    font-size: 24px;
    transform: rotateY(0deg);
    overflow: hidden;
}

.news-card-front:before {
    content: '';
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); /* Create a fade out */
}

.news-card-front img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: -1;
}

.news-card-front p {
    position: absolute;
    bottom: 0;
    font-family: Rubik-Medium, sans-serif;
}

.news-card-back {
    background-color: var(--primary-color);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 5px solid var(--white-color);
    border-radius: 10px;
    justify-content: flex-start;
    transform: rotateY(180deg);
    padding: 0;
}

.news-card-back p {
    font-size: 18px;
    padding: 15px;
    text-align: left;
    margin: 0;
}

.read-more-button {
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
    border: none;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    right: 10px;
    transition-duration: 0.3s;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

.read-more-button .chevron {
    stroke: var(--white-color);
    width: 20px;
    height: 20px;
    transition-duration: 0.3s;
    display: flex;
    position: relative;
    right: 0;
    margin: 0;
}

.read-more-button .read-more-text {
    position: relative;
    text-wrap: nowrap;
    right: 0;
    width: 0;
    opacity: 0;
    color: var(--white-color);
    font-size: 1.2em;
    font-weight: 600;
    transition-duration: 0.3s;
    overflow: hidden;
}

.read-more-button:hover {
    width: 110px;
}

.read-more-button:hover .chevron {
    width: 20px;
}

.read-more-button:hover .read-more-text {
    width: 90px;
    opacity: 1;
}

#blog-link {
    height: 10%;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

#blog-button {
    border: none;
    border-radius: 10px;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    z-index: 1;
    margin-bottom: 40px;
}

#blog-button a {
    font-size: 17px;
    color: var(--white-color);
    font-weight: bold;
    text-decoration: none;
}

#button-text {
    display: block;
    box-sizing: border-box;
    border: 2px solid var(--black-color);
    border-radius: 10px;
    padding: 0.75em 1.5em;
    background: var(--primary-color);
    transform: translateY(-0.2em);
    transition: transform 0.1s ease;
}

#blog-button:hover #button-text {
    transform: translateY(-0.33em);
}

#blog-button:active #button-text {
    transform: translateY(0);
}

/* Footer */

.footer {
    background-color: rgb(11, 18, 18); /* Set background color */
    display: flex; /* Set the display to flex */
    position: relative; /* Make the position relative to its parent */
    justify-content: center; /* Vertically align items */
    align-items: center; /* Horizontally align items */
    width: 100vw; /* Set the width to 100% */
    height: 5%; /* Set the height to 100% */
    overflow: hidden; /* Remove overflow from each section */
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
    bottom: 0; /* Move to the bottom */
}

#footer-content {
    display: flex; /* Set the display to flex */
    margin-right: 10px; /* Add margins */
    width: 100%; /* Set the width of content to the container width */
    height: 100%; /* Set the height of content to the container height */
    max-width: var(--max-content-width); /* Set the maximum width for content */
    justify-content: right; /* Align text to the right */
    align-items: center; /* Align text vertically */
    color: var(--white-color); /* Set text colors */
}

/* Reusable Content */

.social-container ul {
    list-style: none; /* Remove bullet points */
    display: flex; /* Set the display to flex */
    overflow: hidden; /* Remove overflow */
    position: relative;
    margin: 0;
    padding: 0;
}

.social-container ul li {
    width: 50px; /* Set the width of each icon */
    height: 50px; /* Set the height of each icon */
    margin: 5px; /* Add a margin between icons */
}

.social-container ul li a {
    background-color: var(--white-color); /* Add a background color to icons */
    display: flex; /* Set the display mode to flex */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    width: 100%; /* Set the width */
    height: 100%; /* Set the height */
    border-radius: 50%; /* Round the edges */
    transition: background-color 0.3s ease-in-out; /* Make hover transitions smooth */
}

.social-container ul li a svg {
    fill: var(--primary-color); /* Fill the svg with a color */
    width: 50%; /* Set the svg width */
    height: 50%; /* Set the svg height */
    padding: 10%; /* Add padding around the svg */
    margin: 0; /* Remove margins */
    transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out; /* Make hover transitions smooth */
}

.social-container ul a:hover {
    background-color: var(--primary-color); /* Change the background color of icons */
}

.social-container ul a:hover svg {
    fill: var(--white-color); /* Change the fill of the svg */
    width: 60%; /* Set the svg width */
    height: 60%; /* Set the svg height */
}

/* Media Queries */

@media (max-width: 390px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1rem;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .project-slide-button {
        top: 37%;
    }

    .news-entry {
        width: 250px;
        height: 150px;
    }

    #footer-content p { font-size: 0.8rem; }
}

@media (min-width: 390px) and (max-width: 500px) {
    h1 {
        font-size: 3.2rem;
    }

    h2 {
        font-size: 2.4rem;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 1.7rem;
    }

    p {
        font-size: 1.2rem;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .project-slide-button {
        top: 35%;
    }

    .news-entry {
        width: 275px;
        height: 175px;
    }

    #footer-content p { font-size: 1rem; }
}


@media (min-width: 500px) and (max-width: 700px) {
    h1 {
        font-size: 3.4rem;
    }

    h2 {
        font-size: 2.7rem;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 1.9rem;
    }

    p {
        font-size: 1.4rem;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #footer-content p { font-size: 1.4rem; }
}

@media (min-width: 700px) {
    h1 {
        font-size: 3.6rem;
    }

    h2 {
        font-size: 3rem;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 2rem;
    }

    p {
        font-size: 1.5rem;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #footer-content p { font-size: 1.5rem; }
}