html {
    scroll-behavior: smooth;
}

.back-to-top {
    display: block;

    width: 200px;

    margin: 40px auto;

    padding: 12px;

    text-align: center;
    text-decoration: none;

    color: white;
    background-color: rgb(35, 35, 35);

    border-radius: 8px;

    transition: background-color 0.3s ease;
}

.back-to-top:hover {
    background-color: rgb(70, 70, 70);
}

.page {
    animation: FadeIn;
    animation-duration: 1s;
    animation-timing-function: ease;
}

@keyframes FadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.traveling-section {
    width: 800px;
    margin: 40px auto 0 auto;

    background-color: rgb(70, 170, 220);
    border-radius: 6px 6px 0 0;

    text-align: center;
}

.traveling-section h2 {
    margin: 0;
    padding: 10px;

    font-size: 30px;
}

.traveling {
    width: 800px;
    margin: 0 auto 80px auto;

    background-color: rgb(45, 120, 180);
    border-radius: 0 0 6px 6px;

    text-align: center;
    overflow: hidden;

    transition: box-shadow 0.3s ease;
}

.traveling:hover {
    box-shadow: 0 12px 28px rgba(223, 223, 223, 0.4);
}

.traveling p {
    padding: 20px;
    margin: 0;
    font-size: 25px;
    line-height: 1.5;
}

.traveling-image {
    width: 100%;
    height: 450px;

    object-fit: cover;
    object-position: center 35%;

    display: block;

    transition: transform 0.3s ease;
}

.traveling-image:hover {
    transform: scale(1.03);
}


.norway-section {
    width: 800px;
    margin: 40px auto 0 auto;

    background-color: rgb(210, 60, 60);
    border-radius: 6px 6px 0 0;

    text-align: center;
}

.norway-section h2 {
    margin: 0;
    padding: 10px;

    font-size: 30px;
}

.norway {
    width: 800px;
    margin: 0 auto 80px auto;

    background-color: rgb(155, 35, 35);
    border-radius: 0 0 6px 6px;

    text-align: center;
    overflow: hidden;

    transition: box-shadow 0.3s ease;
}

.norway:hover {
    box-shadow: 0 12px 28px rgba(223, 223, 223, 0.4);
}

.norway p {
    padding: 20px;
    margin: 0;
    font-size: 25px;
    line-height: 1.5;
}

.norway-image {
    width: 100%;
    height: 450px;

    object-fit: cover;
    object-position: center 35%;

    display: block;

    transition: transform 0.3s ease;
}

.norway-image:hover {
    transform: scale(1.03);
}

.sweden-section {
    width: 800px;
    margin: 40px auto 0 auto;

    background-color: rgb(255, 205, 50);
    border-radius: 6px 6px 0 0;

    text-align: center;
}

.sweden-section h2 {
    margin: 0;
    padding: 10px;

    font-size: 30px;
}

.sweden {
    width: 800px;
    margin: 0 auto 80px auto;

    background-color: rgb(200, 155, 20);
    border-radius: 0 0 6px 6px;

    text-align: center;
    overflow: hidden;

    transition: box-shadow 0.3s ease;
}

.sweden:hover {
    box-shadow: 0 12px 28px rgba(223, 223, 223, 0.4);
}

.sweden p {
    padding: 20px;
    margin: 0;
    font-size: 25px;
    line-height: 1.5;
}

.sweden-image {
    width: 100%;
    height: 450px;

    object-fit: cover;
    object-position: center 35%;

    display: block;

    transition: transform 0.3s ease;
}

.sweden-image:hover {
    transform: scale(1.03);
}

.estonia-section {
    width: 800px;
    margin: 40px auto 0 auto;

    background-color: rgb(55, 115, 215);
    border-radius: 6px 6px 0 0;

    text-align: center;
}

.estonia-section h2 {
    margin: 0;
    padding: 10px;

    font-size: 30px;
}

.estonia {
    width: 800px;
    margin: 0 auto 80px auto;

    background-color: rgb(35, 75, 165);
    border-radius: 0 0 6px 6px;

    text-align: center;
    overflow: hidden;

    transition: box-shadow 0.3s ease;
}

.estonia:hover {
    box-shadow: 0 12px 28px rgba(223, 223, 223, 0.4);
}

.estonia p {
    padding: 20px;
    margin: 0;
    font-size: 25px;
    line-height: 1.5;
}

.estonia-image {
    width: 100%;
    height: 450px;

    object-fit: cover;
    object-position: center 35%;

    display: block;

    transition: transform 0.3s ease;
}

.estonia-image:hover {
    transform: scale(1.03);
}

.latvia-section {
    width: 800px;
    margin: 40px auto 0 auto;

    background-color: rgb(150, 45, 60);
    border-radius: 6px 6px 0 0;

    text-align: center;
}

.latvia-section h2 {
    margin: 0;
    padding: 10px;

    font-size: 30px; 
}

.latvia {
    width: 800px;
    margin: 0 auto 80px auto;

    background-color: rgb(105, 25, 40);
    border-radius: 0 0 6px 6px;

    text-align: center;
    overflow: hidden;

    transition: box-shadow 0.3s ease;
}

.latvia:hover {
    box-shadow: 0 12px 28px rgba(223, 223, 223, 0.4);
}

.latvia p {
    padding: 20px;
    margin: 0;
    font-size: 25px;
    line-height: 1.5;
}

.latvia-image {
    width: 100%;
    height: 450px;

    object-fit: cover;
    object-position: center 35%;

    display: block;

    transition: transform 0.3s ease;
}

.latvia-image:hover {
    transform: scale(1.03);
}

.lithuania-section {
    width: 800px;
    margin: 40px auto 0 auto;

    background-color: rgb(60, 170, 75);
    border-radius: 6px 6px 0 0;

    text-align: center;
}

.lithuania-section h2 {
    margin: 0;
    padding: 10px;

    font-size: 30px;
}

.lithuania {
    width: 800px;
    margin: 0 auto 80px auto;

    background-color: rgb(40, 125, 55);
    border-radius: 0 0 6px 6px;

    text-align: center;
    overflow: hidden;

    transition: box-shadow 0.3s ease;
}

.lithuania:hover {
    box-shadow: 0 12px 28px rgba(223, 223, 223, 0.4);
}

.lithuania p {
    padding: 20px;
    margin: 0;
    font-size: 25px;
    line-height: 1.5;
}

.lithuania-image {
    width: 100%;
    height: 450px;

    object-fit: cover;
    object-position: center 35%;

    display: block;

    transition: transform 0.3s ease;
}

.lithuania-image:hover {
    transform: scale(1.03);
}

.russia-section {
    width: 800px;
    margin: 40px auto 0 auto;

    background-color: rgb(95, 75, 190);
    border-radius: 6px 6px 0 0;

    text-align: center;
}

.russia-section h2 {
    margin: 0;
    padding: 10px;

    font-size: 30px;
}

.russia {
    width: 800px;
    margin: 0 auto 80px auto;

    background-color: rgb(65, 50, 140);
    border-radius: 0 0 6px 6px;

    text-align: center;
    overflow: hidden;

    transition: box-shadow 0.3s ease;
}

.russia:hover {
    box-shadow: 0 12px 28px rgba(223, 223, 223, 0.4);
}

.russia p {
    padding: 20px;
    margin: 0;
    font-size: 25px;
    line-height: 1.5;
}

.russia-image {
    width: 100%;
    height: 450px;

    object-fit: cover;
    object-position: center 35%;

    display: block;

    transition: transform 0.3s ease;
}

.russia-image:hover {
    transform: scale(1.03);
}

.places-to-visit-section {
    width: 800px;
    margin: 40px auto 0 auto;

    background-color: rgb(235, 145, 40);
    border-radius: 6px 6px 0 0;

    text-align: center;
}

.places-to-visit-section h2 {
    margin: 0;
    padding: 10px;

    font-size: 30px;
}

.places-to-visit {
    width: 800px;
    margin: 0 auto 80px auto;

    background-color: rgb(180, 100, 25);
    border-radius: 0 0 6px 6px;

    text-align: center;
    overflow: hidden;

    transition: box-shadow 0.3s ease;
}

.places-to-visit:hover {
    box-shadow: 0 12px 28px rgba(223, 223, 223, 0.4);
}

.places-to-visit p {
    padding: 20px;
    margin: 0;
    font-size: 25px;
    line-height: 1.5;
}

.places-to-visit-image {
    width: 100%;
    height: 450px;

    object-fit: cover;
    object-position: center 35%;

    display: block;

    transition: transform 0.3s ease;
}

.places-to-visit-image:hover {
    transform: scale(1.03);
}

.page-bottom-space {
    height: 30px;
}

@media (max-width: 600px) {

    .traveling-section,
    .traveling,
    .norway-section,
    .norway,
    .sweden-section,
    .sweden,
    .estonia-section,
    .estonia,
    .latvia-section,
    .latvia,
    .lithuania-section,
    .lithuania,
    .russia-section,
    .russia,
    .places-to-visit-section,
    .places-to-visit {
        width: 90%;
    }

    .traveling p,
    .norway p,
    .sweden p,
    .estonia p,
    .latvia p,
    .lithuania p,
    .russia p,
    .places-to-visit p {
        font-size: 18px;
    }

    .traveling-section h2,
    .norway-section h2,
    .sweden-section h2,
    .estonia-section h2,
    .latvia-section h2,
    .lithuania-section h2,
    .russia-section h2,
    .places-to-visit-section h2 {
        font-size: 24px;
    }

    .traveling-image,
    .norway-image,
    .sweden-image,
    .estonia-image,
    .latvia-image,
    .lithuania-image,
    .russia-image,
    .places-to-visit-image {
        height: 250px;
    }

    .places-to-visit ul {
        font-size: 20px !important;
    }
}