body {
    background-color: #14001D;
    overflow-x: hidden;
}

.inter-font {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0%;
}

/*Met de hulp van Beau kreeg ik te horen als ik ipv px vh gebruik dan zorgt
dat er voor dat als iemand uitzoomt dat de website mee scaled*/
/*-> https://khaledkzy.github.io/pixel-vh-vw-converter/ <-*/
.logo {
    width: 14.388489208633093vh;
    margin-left: 5.755395683453237vh;
    cursor: pointer;
}

.logo_naam {
    color: #FFFFFF;
    font-size: 7.194244604316546vh;
    font-weight: 500;
    text-decoration: none;
}

nav ul {
    width: 100%;
    text-align: right;
    padding-right: 8.633093525179856vh;
}

nav ul li {
    display: inline-block;
    margin: 0vh 2.8776978417266186vh;
}

nav ul li a {
    color: #FFFFFF;
    font-size: 4.316546762589928vh;
    font-weight: 600;
    text-decoration: none;
}

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4388489208633093vh 0;
}

.onigiri1 {
    display: flex;
    align-items: center;
    /* Zorgt ervoor dat de items (afbeelding en tekst) verticaal gecentreerd zijn */
    justify-content: flex-start;
    /* Zorgt ervoor dat de items aan de linkerkant blijven */
}

.onigiri1 img {
    width: 71.68776978417266vh;
    margin-top: 14.388489208633093vh;
    margin-left: 14.388489208633093vh;

    border-radius: 25.899280575539567vh;
}

.onigiri1 img {
    color: #8D2977;
    box-shadow: 0 0 14.388489208633093vh #8D2977;
}

.text1 {
    color: #FFFFFF;
    font-size: 11.510791366906474vh;
    font-weight: 800;
    text-shadow: 0.7194244604316546vh 0.7194244604316546vh 1.4388489208633093vh purple;
    max-width: 28.776978417266186vh;
    margin-left: 36.69064748201439vh;
    text-align: left;
    /* Tekst uitlijnen naar links */
}

.authentic {
    color: #FA03FF;
}

.buynow {
    background-color: #640066;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 3.597122302158273vh;
    text-shadow: 0.7194244604316546vh 0.7194244604316546vh 1.4388489208633093vh black;
    width: 37.55395683453237vh;
    height: 6.762589928057554vh;
    margin-top: 59.568345323741006vh;
    margin-left: -25.323741007194243vh;
    border-radius: 7.194244604316546vh;
    border-color: #FFFFFF;
    cursor: pointer;
}

.buynow:hover {
    background-color: #60004B;
    transition: all 300ms ease-in-out;
}





.redbackground {
    margin-top: 14.388489208633093vh;
    background-color: #240016;
    height: auto;
    width: 100%;
    display: flex;
    grid-template-columns: auto;
}

.halal {
    color: #FA03FF;
}

.text2 {
    color: #FFFFFF;
    font-size: 11.510791366906474vh;
    font-weight: 800;
    text-shadow: 0.7194244604316546vh 0.7194244604316546vh 1.4388489208633093vh purple;
    max-width: 71.776978vh;
    margin-top: 14.388489208633093vh;
    margin-left: 14.388489208633093vh;
    text-align: left;
}

.onigirisrood {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    position: relative;
    /* Maakt deze container het referentiepunt voor de afbeeldingen */
    z-index: 1;
    /* Zorg ervoor dat de afbeeldingen voor de glow komen */
}

.onigirisrood img {
    width: 50vh;
    margin-top: 14.388489208633093vh;
    margin-bottom: 9vh;
    border-radius: 16.899281vh;
    object-fit: cover;
}

.glow {
    background: linear-gradient(302deg, #981414 100%, rgba(168, 191, 28, 1) 0%, rgba(255, 255, 255, 1) 0%);
    filter: blur(80px);
    /* Verklein de blur voor een subtieler glow-effect */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    /* Plaatst de glow in het midden van de container */
    width: 90%;
    /* Verklein de breedte van de glow */
    height: 80%;
    /* Verklein de hoogte van de glow */
    z-index: -1;
    /* Plaats de glow achter de afbeeldingen */
    border-radius: 50%;
    /* Maakt de glow ronder */
}


.onigirisrood img:nth-child(1) {
    position: relative;
    z-index: 1;
}

.onigirisrood img:nth-child(2) {
    position: relative;
    left: -6vh;
    z-index: 0;
}

.onigirisrood img:nth-child(3) {
    position: absolute;
    top: 4vh;
    right: 7vh;
    width: 20vh;
    z-index: 2;
    border-radius: 50%;
}




.subtitle {
    color: #FA03FF;
    font-size: 11.510791366906474vh;
    font-weight: 800;
    text-shadow: 0.7194244604316546vh 0.7194244604316546vh 1.4388489208633093vh purple;
    margin-top: 14.388489208633093vh;
    margin-left: 3vh;
    text-align: left;
}

.text3 {
    color: #FFFFFF;
    font-size: 3.510791vh;
    font-weight: 800;
    text-shadow: 0.7194244604316546vh 0.7194244604316546vh 1.4388489208633093vh purple;
    max-width: 102.776978vh;
    margin-left: 3vh;
    text-align: left;
}

.text3 span {
    color: #fb03ffd4;
}

.lastpage img {
    position: absolute;
    width: 80vh;
    margin-top: 3.388489vh;
    margin-left: 126vh;
    border-radius: 33.899281vh;
    object-fit: cover;
    color: #8D2977;
    box-shadow: 0 0 14.388489208633093vh #8D2977;
}



/* Footer */
.row {
    display: flex;
    flex-wrap: wrap;
}

.footer {
    background-color: #1B0426;
    border-top: 0.3vh solid gray;
}

.hours {
    font-size: 4.5vh;
}

.openingtimes {
    color: #FFFFFF;
    font-size: 2vh;
    font-weight: 800;
    text-align: left;
}

.weekdaytimes {
    color: #42ff00;
}

.saturdaytimes {
    color: #FF0000;
}

.sundaytimes {
    color: #42FF00;
}

.orderinfo {
    max-width: 40vh;
    font-size: 1.5vh;
}

.orderinfo span {
    color: #42FF00;
}

.icontitle {
    font-size: 4.5vh;
    color: #FFFFFF;
    font-size: 800;
    text-align: left;
    max-width: none;
}

.socialicons {
    max-width: 26vh;
    /*tijdelijke oplossing normaal gwn 33vh later fixen door die icons ofzo.*/
    margin-left: 40vh;
}

.socialicons ul a {
    color: #FFFFFF;
    font-size: 3vh;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
}

.socialicons img {
    width: 4vh;
    max-width: 20vh;
}

.contacttitle {
    font-size: 4.5vh;
    color: #FFFFFF;
    font-size: 800;
    text-align: left;
    max-width: none;
}

.contact {
    color: #FFFFFF;
    font-size: 3vh;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
    margin-left: 40vh;
}



/*About Page*/

.abouttitle {
    color: #FFFFFF;
    font-size: 800;
    text-align: center;
    font-size: 10vh;
}

.aboutinfo,
.aboutinfo2 {
    color: #FFFFFF;
    font-size: 4.5vh;
    font-weight: 800;
    margin-left: 10vh;
    margin-top: 10vh;
    display: flex;
    text-align: center;
    justify-content: space-between;
}

.about-text {
    max-width: 102.776978vh;
}

.about-text2 {
    max-width: 80vh;
    margin-right: 20vh;
}

.about-image {
    width: 87vh;
    border-radius: 20vh;
    object-fit: cover;
    flex-shrink: 0;
    /* Prevents image resizing */
    margin-right: 10vh;
}

.about-image-left {
    width: 70vh;
    border-radius: 20vh;
    object-fit: cover;
    flex-shrink: 0;
    margin-left: 10vh;
    margin-bottom: 10vh;
}


/*About page*/

.contact-container {
    background-color: #14001D;
    color: #FFFFFF;
    width: 60vh;
    margin: 10vh auto;
    padding: 5vh;
    border-radius: 2vh;
    box-shadow: 0 0 2vh #8D2977;
    text-align: center;
}

.contact-container h2 {
    font-size: 6vh;
    margin-bottom: 3vh;
}

.contact-form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    font-size: 2.5vh;
    margin-bottom: 1vh;
    text-align: left;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1vh;
    font-size: 2.5vh;
    margin-bottom: 3vh;
    border: none;
    border-radius: 1vh;
}

.contact-form button {
    background-color: #640066;
    color: #FFFFFF;
    font-size: 2.5vh;
    font-weight: 800;
    padding: 1.5vh;
    border: none;
    border-radius: 1.5vh;
    cursor: pointer;
    transition: background-color 300ms ease-in-out;
}

.contact-form button:hover {
    background-color: #60004B;
}