/* Global Colors */
:root {
    /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
    --background-color: #fff8f0;
  
    /* Default Color - This is the default color used for the majority of the text content. */
    --default-color: #5d5d5d;
  
    /* Heading Color - This color is used for titles, headings and secondary elements. */
    --heading-color: #5d5d5d;
  
    /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
    --accent-color: #ec8129;
  
    /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
    --contrast-color: #fff8f0;
  }


.tutorial-title{
    color: var(--accent-color);
    text-align: center;
    font-size: 40px !important;
}

.pro-title{
    text-align: center;
}

.noob-title{
    text-align: center;
}

.platforms {
    text-align: center;
    margin-bottom: 2em;
}

.platforms .platform img {
    width: 25%;
}

.platforms .platform span {
    font-size: 2.5em;
    font-weight: bold;
    color: #ff7f00;
    margin-left: 85px;
    margin-right: 85px;
}

.tutorial {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.column {
    flex: 1;
    margin: 0 1em;
    max-width: 48%;
}

.step {
    margin-bottom: 2em;
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Initially slightly shifted down */
    animation: fadeInUp 0.6s ease-out forwards;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.step:nth-child(1) {
    animation-delay: 0.3s;
}
.step:nth-child(2) {
    animation-delay: 0.6s;
}
.step:nth-child(3) {
    animation-delay: 0.9s;
}
.step:nth-child(4) {
    animation-delay: 1.2s;
}

.divider {
    width: 5px;
    background-color: var(--default-color);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.step h2 {
    font-size: 1.5em;
    color: #333;
}

.step img {
    width: 55%;
    height: auto;
}

.step p {
    font-size: 1em;
    color: #666;
    text-align: center;
}

#popup-toggle {
    display: none;
}

#popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease;
}

#popup-toggle:checked ~ #popup {
    display: none;
}

.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    width: 80%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.popup-content h2 {
    margin-top: 0;
}

.popup-buttons {
    margin-top: 20px;
}

.skip-button {
    background: var(--default-color);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    margin: 5px;
    transition: 0.3s ease;
}

.skip-button:hover {
    background: #414141;
    color: #ffffff;
}

.continue-button {
    background: var(--accent-color);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    margin: 5px;
    transition: 0.3s ease;
}

.continue-button:hover {
    background: #c56b22;
    color: #ffffff;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .column {
        max-width: 100%;
    }
    .platforms .platform img {
        width: 80%;
    }
    .step img {
        width: 100%;
        height: auto;
        margin-bottom: 1em;
    }
}